custom context menu & remoteSaveadaptor

[Hewen Bin]

i was using remoteSaveadaptor for databinding

```

this.data = new DataManager({

json: localData,

updataUrl:  "/update",

insertUrl:  "/insert",

})

```

and i try to custom context menu like this: 

```

this.contextMenuItems = [

{text: 'delRow', target: 'e.-content', id: 'delRow'}

]

contextMenuClick(arg: MenuEventArgs): void {

if(arg.item.id === 'delRow') {

  // here i don't konw how to del row and sync to server

}

}

```

thank you

[Hewen Bin]

 i try to use DataManager.remove function, 

contextMenuClick(args: MenuEventArgs): void {

if (args.item.id === 'delRow') {

// 删除row data

let _rowIndex = (this.treeGridObj.getSelectedRows()[0] as (Element & {rowIndex: number})).rowIndex

let rowInfo = this.data.dataSource.json![_rowIndex]

this.data.remove('TaskID', (rowInfo as {TaskID: number}).TaskID)

this.data.executeQuery(new Query())

.then((e: ReturnOption) => this.items = e.result as object[]).catch((e) => true);

}

// if(args.item.id === 'frozen') {

// this.setFrozen(2,3)

// }

}

but it turn's error:

core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'params')

    at Function.getAddParams (ej2-data.es2015.js:979:27)

[Pon Selva Jeganathan]

Hi Hewen Bin,  

We are working on this query with high priority. And we need time to validate the issue(custom context menu with remote save adaptor) and will update you with further details by 11^th April 2022. 

Until then we value your patience.

Regards,

Pon selva

[Pon Selva Jeganathan]

Hi Hewen Bin,  

Thanks for your patience.

While using the remote save adaptor you need to perform the CRUD operation in server end. We suggest you follow the below code example,

….

    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],

    contextMenuItems:[

      { text: "delRow", target: ".e-content", id: "delRow" }

    ],

    contextMenuClick: function (args) {

      var treegrid = document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

      if (args.item.id === 'delRow') {

     

        var selectedIndex = treegrid['getSelectedRowIndexes']()[0]; // select the records on

        var selectedRecord = treegrid['getSelectedRecords']()[0];

     

        let ajax = new ej.base.Ajax({ url: "Home/Delete", type: "POST", data: selectedReocord.TaskId });

        treegrid.showSpinner();

        ajax.send();

        ajax.onSuccess = function (data) {

          treegrid.hideSpinner();

          treegrid.dataSource = JSON.parse(data);

        };

      } },

…..

 

 

Controller

public ActionResult Delete(CRUDModel<TreeData> value)

    {

      TreeData.GetSelfData().Remove(TreeData.GetSelfData().Where(or => or.TaskId == int.Parse(value.key.ToString())).FirstOrDefault());

      return Json(value);

    }

Please refer to the below sample.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/context_menu_with_remotesave-155042775

Kindly get back to us for further assistance.

Regards,

Pon selva