Switch datasource and complete context in autogenerated grid

[Tobias]

Hello,

i try to use the grid component to view dynamic data (different data with different column count, names, types, etc). It should work like a report component where the user can select a report from the dropdown and the result will be bound to the grid. I use the databound event to set header text, column type etc.

It works fine when i witch the data but when i sort or group the grid and select another report the grid wents to an inconsistent state with and exception in the databound event

ERROR TypeError: Cannot read property 'uid' of undefined

    at ComponentBase.getColumnHeaderByField (ej2-grids.es2015.js:12139)

    at Sort.removeSortIcons (ej2-grids.es2015.js:17769)

    at Sort.refreshSortIcons (ej2-grids.es2015.js:17804)

    at Observer.notify (ej2-base.es2015.js:1953)

    at ComponentBase.notify (ej2-base.es2015.js:6667)

    at HeaderRender.refreshUI (ej2-grids.es2015.js:3602)

    at ComponentBase.refresh (ej2-grids.es2015.js:12346)

    at ComponentBase.onPropertyChanged (ej2-grids.es2015.js:11434)

    at ComponentBase.dataBind (ej2-base.es2015.js:4933)

    at ComponentBase.dataBind (ej2-base.es2015.js:6619)

How can i reset/refresh the grid that i can define a different datasource with different column structure?

In the databound event i call this.grid.refreshColumns(); after defining all columns

Thank you in advance.

[Rajapandiyan Settu]

Hi Tobias,  

Greetings from syncfusion support. 

Query : It works fine when i witch the data but when i sort or group the grid and select another report the grid wents to an inconsistent state with and exception in the databound event 

 

Before changing the datasource and column modal in the grid we need to clear all the grid features like filtering, sorting, grouping, searching, etc., in the grid. Or else it raises the mentioned issue. 

 

Due to asynchronous process of grid which takes some time to clear all the all the features. because of that we need to change grid column modal and datasource after some time interval by using setTimeOut method. please refer the below code example and sample for more information. 

 

 

ddchange(args) { 

    console.log(args); 

    // clear the sorting 

    if (this.grid.sortSettings.columns.length) { 

      this.grid.clearSorting(); 

    } 

    // clear the grouping 

    if (this.grid.groupSettings.columns.length) { 

      this.grid.clearGrouping(); 

    } 

    // clear selection 

    if (this.grid.getSelectedRecords().length) { 

      this.grid.clearSelection(); 

    } 

    // clear the filtering 

    if (this.grid.filterSettings.columns.length) { 

      this.grid.clearFiltering(); 

    } 

    // clear searching 

    this.grid.searchSettings.key = ''; 

 

//update the grid column and dataSource after some time interval 

    setTimeout(() => { 

      switch (args.value) { 

        case "Data1": 

          this.grid.columns = []; 

          this.grid.dataSource = categoryData; 

          break; 

        case "Data2": 

          this.grid.columns = []; 

          this.grid.dataSource = employeeData; 

          this.grid.columns = [{ field: 'EmployeeID', headerText: 'Employee ID', width: 120 }, 

          { field: 'FirstName', headerText: 'First Name', width: 120 }, 

          { field: 'LastName', headerText: 'Last Name', width: 120 }]; 

          break; 

        case "Data3": 

          this.grid.columns = []; 

          this.grid.dataSource = hierarchyOrderdata; 

          this.grid.columns = [{ field: 'OrderID', headerText: 'Order ID', width: 120 }, 

          { field: 'ShipAddress', headerText: 'Ship Address', width: 120 }, 

          { field: 'ShipName', headerText: 'ShipName', width: 120 }, 

          { field: 'ShipCity', headerText: 'ShipCity', width: 120 }, 

          { field: 'Freight', headerText: 'Freight', width: 120 }]; 

          break; 

        default: 

      } 

    }, 100); 

  } 

 

 

 

Sample : https://stackblitz.com/edit/angular-udaqpk-lhg26c?file=app.component.ts 

 

Please get back to us if you need further assistance on this. 

 

Regards,  

Rajapandiyan S

[Tobias]

Hi Rajapandiyan,

thank you very much for your help. I got my grid working with your example. 

Best regards,

Tobias

[Rajapandiyan Settu]

Hi Tobias, 

We are glad that the provided solution resolved your requirement. Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S