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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add and Remove Rows

Thread ID:





132812 Sep 22,2017 08:44 AM UTC Sep 25,2017 12:53 PM UTC JavaScript 1
Tags: ejGrid
Marco Giorgi
Asked On September 22, 2017 08:44 AM UTC

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,

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon