[ANGULAR] Delete Resource from context Menu

[Aniket]

Team,
How can I remove a resource from context Menu so that autoSync picks this and sends a post request.

I set showRemoveRowInContextMenu to false , since I perform the validation of deleting only an empty resource.

Any suggestions?

[Aniket]

Any suggestions?

[pmiklashevich]

Hello,

I set showRemoveRowInContextMenu to false , since I perform the validation of deleting only an empty resource.

I don't see how showing or not a menu item can be related to the resource removing. 'removeRow' is a menu item which calls resourceStore.remove with a selected resource. Also I don't see how you perform validation. If removing operation is not valid, you can return false from https://www.bryntum.com/docs/scheduler/#Scheduler/data/ResourceStore#event-beforeRemove handler.

Also please keep in mind that https://www.bryntum.com/docs/scheduler/#Grid/view/GridBase#config-showRemoveRowInContextMenu is deprecated. If you need to hide the 'removeRow' item, please use the following approach:

const scheduler = new Scheduler({
    features : {
        cellMenu : {
            items : {
                removeRow : false
            }
        }
    }
});

If you want to show/hide the 'removeRow' item base on a condition, that's another thing. Please take a look at https://www.bryntum.com/docs/scheduler/#Grid/feature/CellMenu#config-processItems. For example:

features : {
    cellMenu : {
        processItems({contextRecord, items}) {
            // Show/hide delete option
            items.removeRow.hidden = true; // or false according to your logic
        }
    }
}

Cheers,
Pavel

[Aniket]

Pavel,
I have a contextMenu item inside a custom column.

 {
        text: 'Action',
        template: () => `<img src="./assets/icons/icon-action.svg" alt="Action"/>`,
        type: 'template',
        field: 'option',
        width: 51,
        editor: false,
        draggable: false,
        sortable: false,
        filterable: false,
        tooltipRenderer: false,
        hideable: false,
        cellMenuItems: [
          {
            text: 'Delete Item',
            icon: 'b-fa b-fa-fw b-fa-car',
            onItem: ({ record }) => {
              MessageDialog.confirm({
                title: 'Delete Item',
                message: 'Are you sure?'
              }).then(result => {
                // @ts-ignore 
                if (result === MessageDialog.yesButton) {
                  // The YES button was clicked, so go ahead!
                  const count = this.scheduler.schedulerInstance.eventStore.getEventsForResource(record.id).length;
                  // count indicates tests on a car
                  if (count > 1) {
                    Toast.show(`Resource can only be deleted if there are no events attached`);
                  } else {
                    this.scheduler.schedulerInstance.resourceStore.remove(record);
                  }
                }
              });

        }
      },
    ],
  },

Above code, deletes a resource for me but makes multiple api post calls to the backend, I have set autoSync to true

[pmiklashevich]

What is the question? Please explain better what you're trying to overcome. You said about custom column, context menu, confirmation dialog, resource removing, auto synchronization, data saving, multiple requests. But there is no questions in the post above. What is the problem?

[Aniket]

Pavel,
I want to remove a resource using the context Menu Item, P.S above code.

However, Removing a resource triggers multiple sync calls to the backend.

Is my approach of removing a resource incorrect? P.S refer above code

[pmiklashevich]

https://www.bryntum.com/docs/scheduler/#Grid/column/Column#config-cellMenuItems has to be an object. Providing an array is deprecated. See the docs please. Other than that it looks good. If you remove the record from console, do you see 2 requests too?

scheduler.resourceStore.remove(scheduler.resourceStore.first)

If so, please let us know how to reproduce with one of our examples or produce a runnable testcase that shows the issue. And please add screenshots of the requests, so it's clear what data is sent. Thanks

[Aniket]

Pavel,
I ran

scheduler.resourceStore.remove(10)

in the console and did see 2 requests in the network tab

Here is what I see in the network tab contents

1st Request

{type: "sync", requestId: 16031699562781,…}
events: {updated: [{resourceId: null, id: 78}, {resourceId: null, id: 57}, {resourceId: null, id: 58},…]}
requestId: 16031699562781
resources: {removed: [{id: 10}]}
type: "sync"

2nd request

{type: "sync", requestId: 16031699735632, resources: {removed: [{id: 10}]}}
requestId: 16031699735632
resources: {removed: [{id: 10}]}
type: "sync"

In the first request, Inside events array, these are the events attached to the deleted resource

[pmiklashevich]

Hello Aniket,

Please open https://www.bryntum.com/examples/scheduler/crudmanager/. It uses crud manager and has autoSync enabled. Open dev console and run:

scheduler.resourceStore.remove(1)

See only one sync request is sent:

Снимок экрана 2020-10-20 в 10.38.23.png (632.02 KiB) Viewed 1751 times

Please submit a testcase. You can modify this demo, for example.

Cheers,
Pavel

[Aniket]

pavel,
since I am removing a record, Does my backend need to respond with removed items as well?
should I get the id's of removed resources in the response of sync?
Similar to below

{
    "success" : true,
    ...
    "resources" : {
        "removed" : [
            { id : 10 },
           

    ]
}
}

Does crudManager requires the id's of resources/events which were removed either from UI or backend explicilty?