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

Refreshing grid after adding columns


I m using a dynnamic ejGrid, which i add its columns at ngAfterViewInit(), and sets it datasource after pressing Search button.

 var obj = $("#webReportGrid").ejGrid("instance");

      data => {
        var columns = data.userViewColumns;
        var gridColumns;
        for (var i = 0; i < columns.length; i++) {
          var newColumn = { field: columns[i].field, headerText: columns[i].name, width: 100, textAlign: "center" }
          gridColumns = obj.model.columns.push(newColumn);
      err => console.error(err),
      () => console.log('done getting report info')

 this.gridData=[];//here the columns is appeared at UI

The issue is that after adding the columns to grid, it does not appear, it appears only after pressing the button and set the datasource, if i set it after adding the columns at ngAfterViewInit() it does not appear, 

kindly let me know what to do to make the grid appears with its columns to the user, before search  button is pressed.


1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 6, 2017 06:15 AM UTC

Hi Dina,  
Thanks for contacting Syncfusion Support.  
We are not aware of the code example that you are trying to update the Grid columns. However, we suspect that you are pushing the new columns in the Grid Model and not refreshing the Grid. So, we suggest to use the following scenarios.  
  1. Update Grid Columns using the columns method
Refer to the following code example and API References.  
    var cols = []; 
    cols.push({ field: "EmployeeID" }); 
    cols.push({ field: "CustomerID" }); 
    $("#Grid").ejGrid("columns", cols, "add"); 
  1. Pushing Grid columns and Refreshing the Content
Refer to the following code example and API Reference for the refreshContent method. 
    var obj = $("#Grid").ejGrid("instance"); 
    obj.model.columns.push({ field: "CustomerID" }); 
    obj.model.columns.push({ field: "EmployeeID" }); 
If you are still facing any problem, please share the following details to analyze the problem at our end.  
  1. Complete code example of the column update along with the Grid
  2. Screenshot or video demo of the issue
Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon