We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Add, delete and edit rows in grid using external buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

127877 Dec 15,2016 02:15 AM Dec 18,2016 10:58 PM JavaScript 3
loading
Tags: ejGrid
sachin
Asked On December 15, 2016 02:15 AM

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 [Syncfusion]
Replied On December 16, 2016 05:10 AM

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. 
 
 


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. 



Regards, 
Prasanna Kumar N.S.V

sachin
Replied On December 17, 2016 05:40 AM

Hi Prasanna,

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

Regards,
sachin 

Prasanna Kumar Viswanathan [Syncfusion]
Replied On December 18, 2016 10:58 PM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;