In API document, filter is configured with [filter] attribute.However, it does not work in the way that I thnik.
You can see my test code in https://plnkr.co/edit/byxbUXjzTjslnL2gCCSV
In summay, I put the filterDescriptor in [filter] attrbitue.
<kendo-grid
[data]="gridData"
[filter]="filter"
>
<kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name" width="100">
</kendo-grid-column>
<kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" filter="date" format="{0:d}">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="180" filter="numeric" format="{0:c}">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="120" filter="boolean">
</kendo-grid-column>
</kendo-grid>
And filter is configured like following:
public filter = {
logic: 'or',
filters: [{ field: 'ProductName', operator: 'contains', value: 'Chef' },
{ field: 'ProductName', operator: 'contains', value: 'Chang' }]
};
Anyway, initial filter does not work and everyting is showed without filter.
Could you give me any advice?
9 Answers, 1 is accepted
The data the Grid is bound to still needs to be processed in accordance with the current state (paging, sorting, filtering and grouping configuration), e.g.:
https://plnkr.co/edit/zFtaavYN1Q4kDd7fmEEm?p=preview
Further details about the Grid filtering functionality are available in the following section of our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Thank you for your answer.
I think that filter attribute must be applied initially if they exsit.
The Grid is just a presentational component that renders the data set it is provided with. By setting the initial filter configuration, the developer ensures that the respective filters will be reflected visually in the Grid filter row, but the data the Grid is bound to still needs to be processed accordingly.
Alternatively, you can use the Grid automatic data binding directive (either the built-in one, or a custom one):
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/automatic-operations/
... that abstracts away and encapsulates all data-related operations. This way the data will be processed in accordance with the provided initial filter configuration automatically:
https://plnkr.co/edit/BiIIwL8LPBos5PKMWTuN?p=preview
Regards,
Dimiter Topalov
Progress Telerik
It seems the described issue is caused by the fact that the values that are displayed in the Grid are not actual JavaScript dates, but rather string representations of dates (e.g. serialized dates, coming from a remote server). To ensure that the Grid will process date values accordingly, you will need to map the data collection the Grid is bound to such that all date fields represent actual JavaScript dates (e.g. gridData = data.map(item => {item.startDate = new Date(item.startDate); return item;})).
Once the Grid columns are bound to actual dates, both built-in filtering and formatting functionalities will work out of the box:
<
kendo-grid-column
field
=
"FirstOrderedOn"
title
=
"First Ordered On"
width
=
"240"
filter
=
"date"
format
=
"{0:d}"
>
</
kendo-grid-column
>
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/#toc-filter-row
I hope this helps, but if the issue persists, or if I am missing something, please send us a similar isolated runnable project, or modify the demo above so that the issue is reproduced, so we can inspect it further, and provide a suggestion that is most suitable to the specific scenario. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik
Dimiter,
Thanks for the response. I thing that you hit on something. I believe that the value is not binding to the date property in my model correctly because I am dynamically adding columns to the grid so it is not normal binding using the field="FirstOrderedOn" syntax. So I get a list of column and their order from a database on how the user has configured their view of the data. Here is an example of how I am setting up the grid...
<ng-template ngFor [ngForOf]="columns" let-column>
<ng-template *ngIf="column.field==='eventDate'" kendoGridCellTemplate let-dataItem>
{{dataItem.eventDate | date: 'd - MMM'}}
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell [column]="column" [filter]="filter">
</kendo-grid-date-filter-cell>
</ng-template>
</ng-template>
</ng-template>
The users want to see the date formatted as such (23 - Sept) so I used the date pipe to format it. I am new to kendo so I am sure that I may be doing something wrong here. I have tried to use the format of the column on the kendoGridFilterCellTemplate node and remove the date pipe but it still did not work. Any help is appreciated. If needed, I can try to write a short project to demonstrate my issue.
Thanks,
Paul
here is the base model of the model that is being used in the grid..
export abstract class EventBase {
eventId: number;
portfolioId: string;
accountName: string;
eventDate: Date;
}
The proper displaying of the value when using Angular pipes in the template suggests that the value/column field is bound correctly, but the value is string (not date). Here is an example of dynamically generating Grid columns by iterating over an array of column config objects (the second example):
https://www.telerik.com/kendo-angular-ui/components/grid/columns/hidden/#toc-using-structural-directives
Both the cell values and the built-in filtering UI respect the format, set via the column's "format" property and no templates are required.
https://plnkr.co/edit/IygPxUPYgEZHQMdn8X8w?p=preview
That said, I noticed a somewhat strange structure of the markup. When necessary, both Cell and Filter templates should be provided as directed children of the kendo-grid-column component, e.g.:
https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/built-in-template/#toc-customizing-filter-rows
https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates/#toc-cell-template
... and should not be nested within one another.
I modified the Plunker example above to illustrate why my assumption is that the Grid is dealing with strings and not with actual dates, which leads to the discussed issues:
https://plnkr.co/edit/RxjcvZmMDuimxoRTHbEh?p=preview
Column 3 - actual date value, Grid column format and filter properties work as expected
Column 4 - string value - Angular pipe works
Column 5 - same string value - Grid column format property is ignored (as the value is a string, not a date).
If the same issues persist when you are certain the values the Grid is bound to contain actual dates (new Date(...) as opposed to something like "2018-03-23T13:12:52.010Z"), we will need an isolated runnable project or a Plunker similar to the ones above to inspect further and determine what is causing the problem. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik
I was assuming that the Date property of my model (javascript) was getting set correctly as it had a value and the date pipe worked. However after some investigation, I found that the property was actually a string and my assumption was wrong. The value was being passed from the server and due to the fact that it had a valid date value when looking at the object, I did not notice that it was in fact a string. The typescript some times makes devs come that from a type safe environment forget that it is javascript behind the scenes....I was able to get it working.
Thanks for your help.