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

[filter] is not applied in Grid filtering

9 Answers 741 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sang B
Top achievements
Rank 1
Sang B asked on 11 Jan 2018, 01:01 AM

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

Sort by
0
Dimiter Topalov
Telerik team
answered on 11 Jan 2018, 08:52 AM
Hi Sang,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sang B
Top achievements
Rank 1
answered on 24 Jan 2018, 04:16 AM

Thank you for your answer.

 

I think that filter attribute must be applied initially if they exsit.

 

 

0
Dimiter Topalov
Telerik team
answered on 25 Jan 2018, 08:36 AM
Hello Sang,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Paul
Top achievements
Rank 1
answered on 21 Mar 2018, 08:27 PM
I am having trouble with the date filter after data is loaded. I am dynamically building my columns using [ngForOf]. My dates are formatted in d - MM format. I have tried to set the formatting in the grid itself and cannot get that to work so I resorted to using the value formatted using a date pipe however the filter still does not work. 
0
Dimiter Topalov
Telerik team
answered on 22 Mar 2018, 12:20 PM
Hello Paul,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Paul
Top achievements
Rank 1
answered on 22 Mar 2018, 01:17 PM

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

0
Paul
Top achievements
Rank 1
answered on 22 Mar 2018, 02:26 PM

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;
}

0
Dimiter Topalov
Telerik team
answered on 23 Mar 2018, 01:14 PM
Hi Paul,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Paul
Top achievements
Rank 1
answered on 23 Mar 2018, 07:42 PM

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. 

Tags
General Discussions
Asked by
Sang B
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Sang B
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Share this question
or