Custom Column Filters with TagHelpers

[Richard]

Hi, I've gone through all of the documentation and spent quite a bit of time on the forums. I have yet to find an example of creating a custom filter for a column via TagHelpers. Is this possible with the current API?

I've noticed that if you define a filterable block on a column, that there is the 'filter-ui' and 'item-template', but neither of those appear to do anything, no errors are thrown and there is no intellisense. I went through the JavaScript API for those and it doesn't make much sense in the context of the TagHelper.

I'm just trying to create a filter that has a dropdown with check boxes for all known types, I know these types at development time so don't need to make a request to get them. Is this possible?

Thanks

[Nikolay]

Hi Richard,

What you are trying to do could be achieved with columns.filterable.multi property of the grid. Applying this to a certain column will convert its filter menu into a dropdown with checkboxes. The syntax for your project using Tag Helpers would look like the following example:

<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
        </transport>
    </datasource>
    <sortable enabled="true" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <filterable enabled="true" mode="menu" />
    <columns>
        <column field="ContactName" title="Contact Name" width="240">
            <filterable multi="true"></filterable>
        </column>
        <column field="ContactTitle" title="Contact Title" width="240" />
        <column field="Country" title="Country" width="150" />
    </columns>
</kendo-grid>

Regarding the data types you can use please refer to the following article:

• https://docs.telerik.com/aspnet-core/tag-helpers/datasource/types

If there is anything else, we could help further, please contact us back.

Regards,
Nikolay
Progress Telerik

[Richard]

Hi Nikolay, thanks for the response. I did indeed find that, however I didn't find a good way to set what those multiple selection options were. Setting multi to true seems like it executes against the whole data set and gets the distinct values. I did notice that you can provide a data source for that multi filter (see below), but is there no way to just hard code the values?

 

<kendo-grid name="grid" height="550">
    <datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
        <transport>
            <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
        </transport>
    </datasource>
    <sortable enabled="true" />
    <pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
    </pageable>
    <filterable enabled="true" mode="menu" />
    <columns>
        <column field="ContactName" title="Contact Name" width="240">
            <filterable multi="true">
                <datasource type="DataSourceTagHelperType.Ajax" server-operation="false">
                    <transport>
                        <read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/CustomerNames" />
                    </transport>
                </datasource>
            </filterable>
        </column>
        <column field="ContactTitle" title="Contact Title" width="240" />
        <column field="Country" title="Country" width="150" />
    </columns>
</kendo-grid>

[Nikolay]

Hello Richard,

What you have configured is the right approach. Indeed, you can provide a datasource for the multi filter column, but it can be either the current grid data or a remote datasource.  Hard coding values for the Grid multi filter column using Tag Helpers is not coming out of the box. 

Hope this answers your question and please contact us back, if you have any other questions. 

Regards,
Nikolay
Progress Telerik

[Bill]

I want to achieve the same thing as Richard.  If it is not out of the box, how can it be done?  Is there an easy way to create a custom datasource (use DataSourceTagHelperType.Custom) that will provide a fixed list of values?  Can I access the datasource with JavaScript after the grid is created and pass it the data items, or swap out the datasource?  Providing the datasource appears quite simple when creating the grid via JavaScript in the jQuery version, but the taghelpers don't provide access to that feature --is there a workaround?

[Nikolay]

Hello Bill,

It is possible to set a data source with local data via the setOptions() Grid method. Here is how this can be achieved:

<script>
    $(document).ready(function () {
        var grid = $('#grid').data('kendoGrid');
        var options = grid.options;
        var ds = new kendo.data.DataSource({
            data: [
                {
                    City: "Seattle",
                }, {
                    City: "Tacoma",
                }, {
                    City: "Kirkland",
                }, {
                    City: "Redmond",
                }, {
                    City: "London"
                }]
        });

        options.columns[columnIndex].filterable.dataSource = ds;
        grid.setOptions(grid.options);
    });
</script>

For your reference, I am attaching a small MVC Core project demonstrating the above.

Let me know if yo have any questions.

Regards,
Nikolay
Progress Telerik

[Bill]

Nikolay -

Thanks!  That works great.  Much better performance than scanning the main dataset for the values. (It shows all the possible values rather than the ones actually used by the dataset, but I prefer that for my scenario.)

I combined this with a custom filter template so that I can display a human-meaningful value but actually filter based on the ID. 

- Bill