Refreshing grid after adding columns

[Dina Abdelbary]

Hi,

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

"

ngAfterViewInit(){

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

    this.myService.getWebReportInfo(this.reportId).subscribe(

      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=[];

}

search()

{

 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.

Regards

[Seeni Sakthi Kumar Seeni Raj]

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"); 

 

 

 

https://help.syncfusion.com/api/js/ejgrid#methods:columns 

 

2. 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" }); 

    obj.refreshContent(true); 

 

https://help.syncfusion.com/api/js/ejgrid#methods:refreshcontent 

 

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

 

Regards,  

Seeni Sakthi Kumar S.