Dynamically changing datasource and columns throws error

[Martin Dragnev]

Hello,

I am using your grid for an application and the feature I am trying to implement is to dynamically change the columns and the datasource without having to destroy the component. Here is a sample in which I was able to isolate that specific scenario https://stackblitz.com/edit/angular-gknz17-ekyjxv?file=app.component.ts. As you can see I want to be able to update the grid on some triggered event. Please observe the console for the errors.

Best

[Rajapandi Ravi]

Hi Martin, 

Greetings from syncfusion support 

By default, after the Grid component initialization you can do your new changes by using our Grid inbuilt methods and property’s. 

Before changing the datasource and column modal in the grid we need to clear all the Grid Settings like filtering, sorting, grouping, searching, etc.. in the grid and we need to empty the Grid’s columns property before setting the new columns. Then then we can change both the columns and datasource from Grid Instance. Please refer the below code example and sample for more information. 

 

App.component.ts 

 

addColumn(e) { //button click 

    this.grid.columns = []; 

    this.grid.dataSource = [[//set the new dataSource to the Grid’s dataSource 

      { id: '1', name: 'martin' }, 

      { id: '1', name: 'martin' }, 

      { id: '1', name: 'martin' }, 

      { id: '1', name: 'martin' } 

    ]; 

      this.grid.columns = [//set the new column to the Grid’s columns property 

        { 

          field: 'id', 

          headerText: 'id' 

        }, 

        { 

          field: 'name', 

          headerText: 'name' 

        } 

      ]; 

  } 

  

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

Regards,
Rajapandi R 

[Martin Dragnev]

Hello,

Thanks for your help. I managed to fix a issue with your suggestions.

Unfortunately, I faced common issue only when​ we have column virtualization enabled.

https://stackblitz.com/edit/angular-gknz17-ekyjxv?file=app.component.ts

Here in this sample you can try to click the button 'Add column' and observe that the number of the columns is correct but neither their fields/headerNames are correct, nor the data in the grid.

[Thiyagu Subramani]

Hi Martin, 

  

Thanks for your update. 

  

By default, in EJ2 Grid, we have to bind large number of records when using virtualization in Grid for better performance. Row virtualization allows you to load and render rows only in content viewport. It is an alternative way of paging in which the data will load while scrolling vertically.  

 

To setup the row virtualization, you need to define enableVirtualization as true and content height by height property. 

 

The number of records displayed in the Grid is determined implicitly by height of content area. Also you have an option to define visible number of records by pageSettings.pageSize property. The loaded data will be cached and reused when it is needed for next time. 

 

Column virtualization allows you to virtualize columns. It will render columns which are in viewport. You can scroll horizontally to view more columns. To setup the column virtualization, set the enableVirtualization and enableColumnVirtualization properties as true. 

  

In your provided sample you missed to define height property in Grid and used two column and there is no width property also. So you have to add height and remove columnVirtualization property from it. Please refer to the below modified sample. 

  

Sample link:  https://stackblitz.com/edit/angular-gknz17-3bcgla?file=app.component.html 

  

UG: https://ej2.syncfusion.com/angular/documentation/grid/virtual/ 

  

Note: Using virtualization, Minimum 1000 records are to be bind in Grid. 

  

Please get back to us, if you need any further assistance. 

  

Regards, 

Thiyagu S 

[Martin Dragnev]

Hello again,

Thank you for your answer but it does not help me.

That stackblitz is just an isolated sample of what issue I am facing right now. My grid configuration consist at least 30 columns and more than 10k records. In this case I definitely do need both row and column virtualization. Here I recreated a sample where there are more columns than the columns which are in the view port. I have set the width and height of the grid but the above issue still occurs. As I said before the issue is reproduced only with column virtualization enabled.

Sample: https://stackblitz.com/edit/angular-gknz17-z4szy9?file=app.component.html

Regards,

Martin

[Rajapandi Ravi]

Hi Martin, 

Thanks for the update 

Before changing the datasource and column modal in the grid we need to clear all the grid features like filtering, sorting, virtualization, etc., in the grid. please refer the below code example and sample for more information. 

addColumn(e) { 

    let a = [ 

      { 

        field: 'id', 

        headerText: 'id' 

      }, 

      { 

        field: 'name', 

        headerText: 'name' 

      }, 

      { 

        field: 'age', 

        headerText: 'age' 

      }, 

      { 

        field: 'device', 

        headerText: 'device' 

      } 

    ]; 

    this.grid.columns = []; 

    this.grid.enableColumnVirtualization = false; 

    this.grid.enableVirtualization = false; 

    this.grid.allowSorting = false; 

    this.grid.allowFiltering = false; 

    this.grid.columns = a; 

    this.data = [ 

      { id: '1', name: 'martin', age:'30', device: 'phone' }, 

      { id: '1', name: 'martin', age:'30', device: 'phone' }, 

      { id: '1', name: 'martin', age:'30', device: 'phone' }, 

      { id: '1', name: 'martin', age:'30', device: 'phone' } 

    ]; 

    this.grid.dataSource = this.data; 

    setTimeout(function(){ 

      this.grid.enableColumnVirtualization = true; 

      this.grid.enableVirtualization = true; 

      this.grid.allowSorting = true; 

      this.grid.allowFiltering = true; 

       }.bind(this)); 

     

  } 

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

Regards, 

Rajapandi R

[Martin Dragnev]

Hello,

Thank you for your help. With slight modification I managed to make it work.

Regards,

Martin

[Rajapandi Ravi]

Hi Martin, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R