Add, delete and edit rows in grid using external buttons

[sachin]

Hello,

I am developing a small project where i need to provide the add , delete and edit functionality of the grid on external buttons .I tried the addRecord() method and it's working fine but the deleteRecord() and editCell() method are not working. below is my js code to call these methods.

 $("#record-delete-btn").click(function () {

        var gridObj = $("#FlatGrid").data("ejGrid");

        gridObj.deleteRecord();

    })

    $("#record-edit-btn").click(function () {

        var gridObj = $("#FlatGrid").data("ejGrid");

        gridObj.editCell();

    })

    $("#record-add-btn").click(function () {

        var gridObj = $("#FlatGrid").data("ejGrid");

        gridObj.addRecord();

    });

The delete and edit button should show a 'row not selected popup' if the user presses it without selecting a row. Please tell me where i am going wrong. 

Thanks 

Regards,

Sachin 

[Prasanna Kumar Viswanathan]

Hi Sachin, 

Thanks for contacting Syncfusion support. 

Queries	Response
Edit Record	To edit a record in grid, use startEdit method of ejGrid. In startEdit method we need to pass the tr row element.  Find the code example:   $("#button2").ejButton({                  size: "mini",                  click: "Edit",              });  ------------------------------    var grid = $("#Grid").ejGrid("instance");              if (grid.getSelectedRows().length > 0)                  grid.startEdit(grid.getSelectedRows());              else                  alert(grid.localizedLabels.EditOperationAlert);
Delete Record	In deleteRecord method we need to pass the primary key field name and JSON data as a parameter to delete a record in the grid.   Find the code example:     $("#button3").ejButton({                  size: "mini",                  click: "Delete",              });    -----------------------------  function Delete(args) {              var grid = $("#Grid").ejGrid("instance");              if (grid.getSelectedRows().length > 0)                  grid.deleteRecord("OrderID", grid.getSelectedRecords()[0]);              else                  alert(grid.localizedLabels.DeleteOperationAlert);          }
The delete and edit button should show a 'row not selected popup' if the user presses it without selecting a row	To show a pop-up when the user press the edit or delete button without selecting a row, use getSelectedRows method of ejGrid.     In getSelectedRows method we can get the selected rows in the grid. Using that we check the condition and display the pop-up box.      Please check the above code example.

Sample: http://jsplayground.syncfusion.com/f4b22ion 

Note: The startEdit method will be worked when the editmode is normal. 

Refer to the Help document for the deleteRecord and startEdit method of ejGrid. 

https://help.syncfusion.com/api/js/ejgrid#methods:deleterecord 

https://help.syncfusion.com/api/js/ejgrid#methods:startedit 

Regards, 

Prasanna Kumar N.S.V

[sachin]

Hi Prasanna,

Thank you so much for your help. I am glad it worked. 

Regards,

sachin 

[Prasanna Kumar Viswanathan]

Hi Sachin,
 
We are happy that the provided solution working fine at your end.  

 

Please let us know if you need any further assistance.
 
Regards, 

Prasanna Kumar N.S.V