I have a grid that is re purposed for different types of data. I saw an example of enabling "features" in non-angular implementation to enable sorting/filtering globally on grid.
But when I try to enable "features" like below
<igx-grid #grid1 id="grid1" [data]="rowData" [autoGenerate]="true"> <features> <feature name="Sorting"> </feature> </features> </igx-grid>I get error - Uncaught Error: Template parse errors:'feature' is not a known element:1. If 'feature' is an Angular component, then verify that it is part of this module.2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <igx-grid #grid1 id="grid1" [data]="rowData" [autoGenerate]="true"> <features> [ERROR ->]<feature name="Sorting"> </feature> </features>"): ng:///AppModule/AddnewComponent.html@123:8
Hello Pranay,
In the igx-grid sorting could be achieved with the following lines of code:
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" sortable="true"></igx-column>
Filtering could be achieved with these lines:
<igx-grid #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true">
More information about sorting and filtering could be found in our documentation: Grid Sorting Overview and Grid Filtering Overview.
You can also have filtering and sorting that can be turned on using buttons. There is a sample, which is described in the Data Grid Overview and Configuration in State persistence topic.
Looking forward to hearing from you.
Regards,
Monika Kirkova,
Infragistics
Thanks Monika,
This does solve the filtering and sorting. But I don't see any examples of show the grouping header where columns can be dragged/dropped. Can you please provide some sample code for that as well?
Grouping by header could be achieved with the following lines of code:
public ngOnInit() { grid.groupingExpressions = [
{ fieldName: 'ProductName', dir: SortingDirection.Desc },
{ fieldName: 'Released', dir: SortingDirection.Desc } ]; }
Columns can be dragged and dropped like this:
<igx-column [field]="'Category'" [movable]="true"></igx-column>
More information can be found in the Grid Group By section and the Grid Column Moving Overview section.
I have made a sample demonstrating grouping of rows and drag and drop of columns.