Add and Remove Rows

[Marco Giorgi]

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,

Marco

[Venkatesh Ayothi Raman]

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, 

https://help.syncfusion.com/js/grid/columns#unbound-column 

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, 

[HttpPost] 

        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, 

[Grid] 

var dataManager = ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }); 

 

        $("#Grid").ejGrid({ 

            // 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 

        } 

Regards, 

Venkatesh Ayothiraman.