Angular Grid Clearing/Emptying/Resetting

[Michael Quiblat]

Hello Syncfusion,

I am having trouble finding resources on how to completely clear/empty/reset an Angular Syncfusion Grid that is populated using a QueryBuilder.

Here's my attempted stackblitz example:

https://stackblitz.com/edit/angular-trying-to-clear-grid?file=app.component.ts

When you click the "Clear Grid" button on the top left, I would like that to clear the grid. It currently doesn't work despite clearing the data source on the query builder, clearing the data source on the grid, calling refresh on the grid, calling reset and refresh on the query builder.

Mike

[Rajapandiyan Settu]

Hi Michael, 

Thanks for contacting Syncfusion support. 

Query: When you click the "Clear Grid" button on the top left, I would like that to clear the grid. 

 

By analyzing your code example, you were empty both the dataSource and columnSettings in the Grid. Before proceeding with your query we would like to let you know the behavior of EJ2 Grid. 

In EJ2 Grid, we are not support to render a Grid with both dataSource and columns as empty. We must define at least anyone of these property to render a Grid. This is the default behavior of EJ2 Grid. 

So, we suggest you to empty the Grid’s dataSource only to achieve your requirement. Please find the below modified code example and sample for your reference. 

setData2() { 

    setTimeout(() => { 

      this.dataSource = []; 

// empty the Grid dataSource 

      this.grid.dataSource = []; 

// Don’t empty the Grid column settings since the grid should have either column settings or dataSource 

      // this.grid.columns = []; 

 

      ------ 

    }, 100); 

  } 

Sample: https://stackblitz.com/edit/angular-trying-to-clear-grid-ng46cp?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S