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. Image for the cookie policy date

Add and Remove Rows

Is there a method to add and remove rows to/from an already populated grid?

This is the behaviour  I'm looking for:

I populate a grid using a json service as datasource
The user click on a link inside a cell of a row in the grid.
This link makes a ajax call to an API retrieving some values with the same schema/columns of the grid.

I add a new row just below the clicked one, inserting the values retrieved from the API.
This row will also contain a cell with the link to remove itself.

I've looked into the documentation but I haven't found any method to add/remove rows
Many thanks

Best Regards,

1 Reply

VA Venkatesh Ayothi Raman Syncfusion Team September 25, 2017 12:53 PM UTC

Hi Marco, 

Thanks for contacting Syncfusion support. 

We have achieved your requirement using unbound column feature in the Grid. In this feature, we can rendered the customize column. Please refer to the following Help documentation for more information, 
And we suspect that you want to add/remove the row based on index. In Grid, we can’t add the row based on index value. So, we suggest you to add the new record based on the index in database at server side like as follows, 
        public object Post(Orders value) 
            // Perform ADD operation 
            ord.Insert(4, value);//insert the record based on index in database 
            return value; 

After inserting the record then Grid will populate the new added record from Database which is added in post method of API service. And you can delete the record while clicking the link like as follows, 
var dataManager = ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }); 
            // the datasource "window.employeeView" is referred from jsondata.min.js 
            dataSource: dataManager, 
            allowPaging: true, 
                  . . . 
            columns: [ 
                        . .  . 
                        { headerText: "", format: "<a onclick =\"click(this)\" rel='nofollow' href=#>Delete</a>" } 
[Click function] 
function click(e) { 
            var obj = $("#Grid").data("ejGrid"); 
            obj.deleteRecord("OrderID", obj.getSelectedRecords()[0]); //remove  the record 

Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon