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

Custom Column Filters with TagHelpers

6 Answers 232 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 06 Aug 2019, 11:04 AM

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

6 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 08 Aug 2019, 10:27 AM
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>
        </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: If there is anything else, we could help further, please contact us back.

Regards,
Nikolay
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Richard
Top achievements
Rank 1
answered on 08 Aug 2019, 10:40 AM

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>
        </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>
0
Nikolay
Telerik team
answered on 13 Aug 2019, 06:38 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bill
Top achievements
Rank 1
answered on 16 Feb 2021, 10:50 PM
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?
0
Nikolay
Telerik team
answered on 19 Feb 2021, 12:22 PM

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

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
Bill
Top achievements
Rank 1
answered on 19 Feb 2021, 05:56 PM

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

Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Richard
Top achievements
Rank 1
Bill
Top achievements
Rank 1
Share this question
or