Limiting numeric filter row column values

[David]

Hi

Im trying to limit my numeric filter row column to allow just values from 0-1000, but am having trouble finding an exact sample.

I was following the NumericFilterMenuComponent link, https://www.telerik.com/kendo-angular-ui/components/grid/api/NumericFilterMenuComponent/

I tried the code below but an unable to get the the spinner on the filter to show.  Can you provide a sample please?  Is there another way besides using the kendo-numerictextbox control?

    <kendo-grid-column field="UnitPrice" title="Unit Price Custom Filter" width="200">
        <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
        <kendo-grid-numeric-filter-menu
            [column]="column"
            [filter]="filter"
            [filterService]="filterService"
            >
            <kendo-numerictextbox
                [max]="1000"
                [min]="0"
                [spinners]="true"
                [value]="numericValue"
                (valueChange)="numericChange($event)">
            </kendo-numerictextbox>

        </kendo-grid-numeric-filter-menu>
        </ng-template>
    </kendo-grid-column>

Thanks

[Martin]

Hi David,

Thank you for the provided code snippet.

Here is an example demonstrating the <kendo-grid-numeric-filter-menu> component applied to the 'UnitPrice' column with spinners enabled:

https://stackblitz.com/edit/angular-gwuwre?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[David]

Hi Martin

Thanks for the quick response

This solution works great for "Menu" style filter (popup).

However, what in need is for a row style filter, I lifted your answer and applied it to the sample below. What I need is for the Unit Price column to be have a limited range, I'm not sure we even apply the kendoGridFilterMenuTemplate built in template to a "Row" style filter ... 

https://stackblitz.com/edit/angular-sdfgyy?file=app/app.component.ts

Thanks

[Martin]

Hi David,

If you would like to utilize the NumbericTextBox filter with the filter row approach use the FilterCellTemplate (instead of kendoGridFilterMenuTemplate) and the NumericFilterCellComponent. Here is an example, again the UnitPrice column filter is modified:

https://stackblitz.com/edit/angular-ocsssz-yiacna?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[SmCoup]

Do you have this example using KendoReact ? It seems we may have to prepare custom component,  but not sure how to include the numeric filter operation options.

( sorry - I know we are in Angular forum )

[David]

Thank you Martin for the very quick response !!

[Aravind]

Hi martin, I am working on kendo grid angular.. my problem is I want to do execute some customise function of mine when clicking clear button in filterable menu.. Sadly, I found there is event for button filter.. But I not found any event for clear button on angular 8... Pls help

[Martin]

Hi Aravind,

Indeed the Grid does not expose a separate event for the Clear button only.

When the built-in Filter and Clear buttons of the menu filter are clicked, the events that are fired are dataStateChange and filterChange event.

In case these events are not an option, the developer can utilize the kendoGridFilterMenuTemplate and customize the entire content of the filter menu, including custom Filter and Clear buttons with their dedicated handler. Please keep in mind that such an appraoch requires handling the filtering and clearing the filters manually. 

For more details and examples please check the following topics:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-customizing-filter-menus

In case any further questions come up, do not hesitate to write us back.

Regards,
Martin
Progress Telerik