Dropdownlist filter for grid

[Pouya]

Hi,

I am trying add a dropdown as filter in the column template. Using this I managed to do it but I doesn't apply the filter to the grid. The Plunker doesn't work due to 'Access-Control-Allow-Origin' problem so I can't see any live example. The dropbownlist is shown and the value returns correctly but nothing happens in the grid. I've added field parameter since the fieldName and valueField is not the same. I've recognized that the filter is always undefined. 

 

My HTML:

<kendo-grid-column field="sSY90Falttyp" title="Fälttyp" width="160px">
    <ng-template kendoGridFilterCellTemplate let-filter>
        <my-dropdown-filter [filter]="filter" [data]="fieldTypes" textField="text" valueField="value" field="sSY90Falttyp">
        </my-dropdown-filter>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem>
        {{getFieldTypeText(dataItem.sSY90Falttyp)}}
    </ng-template>
</kendo-grid-column>

 

DropdownlistFilterComponent:

import { Component, OnInit, Input } from '@angular/core';
import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';
import { FilterService, BaseFilterCellComponent } from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-dropdown-filter',
    templateUrl: './dropdownlist-filter.component.html',
    styleUrls: ['./dropdownlist-filter.component.scss']
})
export class DropdownlistFilterComponent extends BaseFilterCellComponent {

    public get selectedValue(): any {
        const filter = this.filterByField(this.field);
        return filter ? filter.value : null;
    }

    @Input() public filter = <CompositeFilterDescriptor>null;
    @Input() public data: any[];
    @Input() public textField: string;
    @Input() public valueField: string;
    @Input() public field: string;

    public get defaultItem(): any {
        return {
            [this.textField]: "Select item...",
            [this.valueField]: null
        };
    }

    constructor(filterService: FilterService) {
        super(filterService);
    }

    public onChange(value: any): void {
        this.applyFilter(
            value === null ? // value of the default item
                this.removeFilter(this.valueField) : // remove the filter
                this.updateFilter({ // add a filter for the field with the value
                    field: this.field,
                    operator: "eq",
                    value: value
                })
        ); // update the root filter
    }

}

[Dimiter Topalov]

Hi Pouya,

Indeed we were facing some issues with opening the online demos from our site in Plunker:

https://github.com/telerik/kendo-angular/issues/1129

You can try either opening the developer tools console (F12) before the Plunker is loaded, or saving it via the "Save" button in the header, and hard-refreshing the page (or refreshing it with the console opened):

http://plnkr.co/edit/CVsnx3qk6g6pXoM8V8GJ?p=preview

I hope inspecting the runnable example will provide better understanding of the mechanism, described in the documentation.

The provided code does not show how is filtering itself handled in the Grid (i.e. whether there is dataStateChange or filterStateChange binding, or a built-in data binding directive is used). If there is no data binding directive in use, please make sure that the filterChange (or dataStateChange) event are handled like in the following example:

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

If the problem is elsewhere, and comparing the example from the first plunker to your implementation does not reveal what is causing the issue, please send us a similar Plunker or isolated runnable project where the described issue can be observed, so we can inspect it further, and suggest a solution that is most suitable to the specific scenario. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Pouya]

He Dimiter,

Thank you for your reply. dataStateChange solved the problem. Can you explain why the demo on Plunker works without it?

Comparing with Jquery components, it seems that my functionalities are needed to develop by us; such as filtering, sorting, paging, etc. We are immigrating from Jquery to Angular. Is there any chance that these functionalities will be included in the new release January 2018? We don't want to spend time on developing them and cast them away after couple of months.

 

Regards,
/Pouya
Aditro

[Dimiter Topalov]

Hello Pouya,

Some online demos utilize the built-in automatic data binding directive. In general, it handles the dataStateChange event internally and reduces the overhead and boilerplate code required when the data operation events are handled by the developer. Further details are available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/automatic-operations/

When the automatic binding directive is used, the events are still fired, and can be handled for further customization, but even if they are not, the dataStateChange event is handled behind the scenes.

When the databinding directive is not used, and the Grid is bound to a regular array, an object of type GridDataResult, or to an Observable of either of these types, the dataStateChange event must be handled by the developer, and the data should be processed in accordance with the incoming Grid state in the handler, like in the following example:

https://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/#toc-filter-row

All data operations are currently available and supported by the Grid component, and can be handled either automatically, as described in the first linked article, or manually, like in the second example.

Let me know if you have further questions.

Regards,
Dimiter Topalov
Progress Telerik