This is a migrated thread and some comments may be shown as answers.

Angular Kendo Grid: Save Sorted Filtered Grid in a Variable

1 Answer 42 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JoeThomas
Top achievements
Rank 1
Veteran
JoeThomas asked on 07 Jul 2020, 11:20 PM
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

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 09 Jul 2020, 11:42 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
JoeThomas
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Share this question
or