Angular Kendo Grid: Save Sorted Filtered Grid in a Variable

[JoeThomas]

We are making a Grid which is: Sortable, Selectable, Filterable, and Column selector, etc.

What is the property in API for Kendo Angular Grid which does this?

We are trying to store this filtered/sorted grid data into a variable, different  from the Original Grid data.

How can this be done?

Currently looking through resource;

https://www.telerik.com/kendo-angular-ui/components/grid/api/


    <kendo-grid 
      [data]="documentPropertyGridData" 
      [resizable]="true" 
      [reorderable]="true" 
      [sortable]="true"
      >

      

      <kendo-grid-checkbox-column title="Select" [width]="10" [columnMenu]="false" [showSelectAll]="true">
      </kendo-grid-checkbox-column>
      <kendo-grid-column field="apn" title="APN" [width]="40">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <div>{{dataItem?.apn}}</div>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="propertyDescription" title="Property Description" [width]="70">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <div>{{dataItem?.propertyDescription}}</div>
        </ng-template>
      </kendo-grid-column>
      <kendo-grid-column field="situsAddress" title="Situs Address" [width]="40">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
          <div>{{dataItem?.situsAddress}}</div>
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>


https://docs.telerik.com/kendo-ui/api/javascript/ui/grid

[Martin]

Hi Joe,

Thank you for the provided code snippet.

To be more descriptive and guide you in a right direction, I will use mostly articles from our documentation (demo included).

In order to make the Grid sortable, as you already explored, sortable option needs to be set to true. The sortable option is part of the GridComponent from the API list that you have shared:

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-selectable

Here is the dedicated article about enabling the sorting functionality:

https://www.telerik.com/kendo-angular-ui/components/grid/sorting/

The same is valid for the rest of the Grid functionalities:

Filtering:

- enable filterable option and bind the filter option. Here is the article:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/

Selectable:

- to enable selection set the selectable property to true or an object of type SelectableSettings. Please check the respective documentation article:

https://www.telerik.com/kendo-angular-ui/components/grid/selection/

Now I will explain how the Grid works actually. 

Generally speaking, the Grid relies on emitting events when the data is changed - pageChange, filterChange, groupChange and etc. (all Grid events can be found in the GridComponent page - here) The events contain important information about the manipulation the user is trying to achieve (FilterDescriptor, SortDescriptor, GroupDescriptor, etc.). As a result, the Grid is filtered, grouped and etc. The dataStateChange combines all these separate events and fires after each of them. This allows the developer to manipulate the data in a single instead of many event handlers.

Once the grid is filtered for example, and the dataStateChange (or filterChange) is emitted, the data needs to be processed with the updated state. The state contains all the information about the Grid:

  public dataStateChangeHandler(state: DataStateChangeEvent): void {
    this.state = state; //update the state
    this.loadProducts();
  }

  public loadProducts() {
    this.gridData = process(sampleProducts, this.state); // the Grid data is updated according to state
  }

Here is an example:

https://stackblitz.com/edit/angular-ykhudr-8rzu68?file=app/app.component.ts

I hope this helps, but if you have any further questions or if I am missing something do not hesitate to write back.

Regards,
Martin
Progress Telerik