Custom Column Filters with TagHelpers

[John]

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?  

[Ivan Danchev]

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

[John]

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".

[Ivan Danchev]

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

[John]

That worked.  Thank you!

[John]

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

 

 

 

 

[Ivan Danchev]

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

[John]

Does not work.  The integerFilter function is never called and the column filter for the numeric column still shows decimals and the spinner control.

[Ivan Danchev]

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

[John]

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. 

 

 

[Ivan Danchev]

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

[John]

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!