Custom Column Filters with TagHelpers

12 posts, 1 answers
  1. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 01 Jul 2020 Link to this post

    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?  
  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 06 Jul 2020 Link to this post

    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.
  3. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 06 Jul 2020 in reply to Ivan Danchev Link to this post

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

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 09 Jul 2020 Link to this post

    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.
  5. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 10 Jul 2020 in reply to Ivan Danchev Link to this post

    That worked.  Thank you!
  6. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 08 Oct 2020 Link to this post

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

     

     

     

     

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 13 Oct 2020 Link to this post

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

  8. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 13 Oct 2020 in reply to Ivan Danchev Link to this post

    Does not work.  The integerFilter function is never called and the column filter for the numeric column still shows decimals and the spinner control.
  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 16 Oct 2020 Link to this post

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

  10. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 16 Oct 2020 Link to this post

    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. 

     

     

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 21 Oct 2020 Link to this post

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

  12. John
    John avatar
    13 posts
    Member since:
    Jun 2019

    Posted 21 Oct 2020 in reply to Ivan Danchev Link to this post

    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!

Back to Top