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

Custom Column Filters with TagHelpers

11 Answers 27 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 01 Jul 2020, 12:59 PM
How can I implement a custom column filter with tag helpers for a numeric column?  With the regular razor syntax grid, columns bound to numeric data automatically give you options like "is greater than" or "is less than".  This is not happening with the tag helper syntax so how would I go about creating a custom column filter to show greater than or less than?  

11 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 06 Jul 2020, 09:52 AM

Hello John,

If a column is bound to a filed of type "number", this has to be specified in the DataSource schema. This will enable the respective filter options for that type: "is grater than", "is less than", etc.

For example we have the "Freight" field:

<column field="Freight" title="Freight">
	<filterable enabled="true">
	</filterable>
</column>

The DataSource schema configuration:

<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
    <transport>
        <read url="@Url.Action("Orders_Read", "Grid")" />
    </transport>
    <schema>
        <model>
            <fields>
                <field name="Freight" type="number"></field>
            </fields>
        </model>
    </schema>
</datasource>

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
John
Top achievements
Rank 1
answered on 06 Jul 2020, 10:45 AM

Thank you Ivan.  That worked.

For those columns bound to numbers, how can I remove some of the filter options?  For example, I'd like to not show "Is null" and "Is not null".

0
Ivan Danchev
Telerik team
answered on 09 Jul 2020, 10:24 AM

John,

To prevent some operators from showing, declare only those that you want to appear, e.g.:

<column field="Freight" title="Freight">
	<filterable>
		<operators>
			<number eq="Is equal to" neq="Is not equal to" gt="Is greater than"   />
		</operators>
	</filterable>
</column>

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
John
Top achievements
Rank 1
answered on 10 Jul 2020, 02:23 PM
That worked.  Thank you!
0
John
Top achievements
Rank 1
answered on 08 Oct 2020, 11:05 AM

I have another issue for column filtering.  How can I format the numeric column to not have decimals in the filter UI?

 

This post shows how to do it for Razor syntax but I have not been able to figure out how to get it to work using the tag helper syntax.

https://www.telerik.com/forums/numeric-column-filter-format

Here is what I have that is not working.

 

<column field="Year" title="CY" width="40">
    <filterable extra="false">
        <cell show-operators="false" template="#=integerFilter()#"></cell>
        <operators>
            <number eq="Is equal to" neq="Is not equal to" gt="Is greater than" lt="Is less than" isnull="Is empty" />
        </operators>
    </filterable>
</column>

 

function integerFilter(e) {
    e.element.kendoNumericTextBox({
        spinners: false,
        format: "#",
        decimals: 0
    });
}

 

 

 

 

0
Ivan Danchev
Telerik team
answered on 13 Oct 2020, 09:08 AM

John,

The "filterable.cell.template" option expects the name of a function, so you can set it like this in the tag helper:

<cell show-operators="false" template="integerFilter"></cell>

Regards,
Ivan Danchev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
John
Top achievements
Rank 1
answered on 13 Oct 2020, 11:42 AM
Does not work.  The integerFilter function is never called and the column filter for the numeric column still shows decimals and the spinner control.
0
Ivan Danchev
Telerik team
answered on 16 Oct 2020, 10:50 AM

John,

Attached you can find a sample project. There are two Grids in the Index view, one initialized with the Html helper and the other initialized with the tag helper. In both cases integerFilter is called and decimals are not accepted by the filter (Freight column).

Regards,
Ivan Danchev
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
John
Top achievements
Rank 1
answered on 16 Oct 2020, 11:09 AM

I ran the sample project.  It's not working.  See attached image.  The Freight column filter popup shows spinner controls and decimal places.  I need it to not show any decimal places. 

 

 

0
Ivan Danchev
Telerik team
answered on 21 Oct 2020, 09:45 AM

John,

What you've shown on the screenshot is the column menu. Filterable.Cell.Template has no effect on the column menu, it affects the column row filter (the filter in the header below the column menu).

To customize the NumericTextBox in the column menu, the ColumnMenuInit event should be used.

Event handler:

<script>
	function onColumnMenuInit(e) {
		if (e.field === "Freight") {
			e.container.find("[data-role=numerictextbox]").each(function (idx) {
				var numeric = $(this).data("kendoNumericTextBox");
				numeric.setOptions({
					spinners: false,
					format: "#",
					decimals: 0
				})
			});
		}
	}
</script>

The tag helper with the necessary changes highlighted:

<kendo-grid name="grid" height="550" on-column-menu-init="onColumnMenuInit">
	<column-menu enabled="true">
	</column-menu>
	<columns>
		<column field="OrderID" title="Order ID">
			<filterable enabled="false"></filterable>
		</column>
		<column field="Freight" title="Freight">
			<filterable extra="false">
				<cell show-operators="false" template="integerFilter"></cell>
				<operators>
					<number eq="Is equal to" neq="Is not equal to" gt="Is greater than" lt="Is less than" isnull="Is empty" />
				</operators>
			</filterable>
		</column>
		<column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
		<column field="ShipName" title="Ship Name" />
		<column field="ShipCity" title="Ship City" />
	</columns>
	<scrollable enabled="true" />
	<sortable enabled="true" />
	<pageable enabled="true" />
	<filterable enabled="true" mode="row" />
	<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
		<transport>
			<read url="@Url.Action("Orders_Read", "Grid")" />
		</transport>
		<schema data="Data" errors="Errors" total="Total">
			<model>
				<fields>
					<field name="Freight" type="number"></field>
				</fields>
			</model>
		</schema>
	</datasource>
</kendo-grid>

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
John
Top achievements
Rank 1
answered on 21 Oct 2020, 05:15 PM

Sorry.  I should have been more specific.   Your code got me on the right track.  I was able to use on-filter-menu-init to get the filter menu to not display decimals and spinners in the filter textbox for numeric columns since I'm not using the column menus, just the column filter.  Thanks!

Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
John
Top achievements
Rank 1
Share this question
or