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

Customizing enum inrow filter

10 Answers 91 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jod
Top achievements
Rank 1
Jod asked on 26 Feb 2021, 01:26 PM
Hello and good day,

please help with the following problem: there is an ASP.Net MVC grid in use where one column is an enum column. Furthermore, the grid is filtered using row-filter. Now the default behaviour is that the combobox shows the discrete enum values. So far the expected behaviour. But this unfortunately does not allow to display end-user friendly strings, to supress specific values and certainly not to display localised strings. So the questions:

- how can localised values be set at runtime for the individual enum members in row-filter dropdown instead of the simple .ToString() values?
- how are individual enum values suppressed for row-filter? (not every value should be displayed)

To display localized values within the columns cells is no problem due to .ClientTemplate. Thats fair easy. Thanks!

Unfortunately, the documentation at https://demos.telerik.com/aspnet-mvc/grid/filter-row is rather thin and various API links from which one hoped for enlightenment lead to 404-nirvana: 

https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnFilterableCellSettingsBuilder#templatesystemfuncsystemobjectsystemobject
https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridColumnFilterableCellSettingsBuilder#templatesystemstring

These are listed as links on https://docs.telerik.com/aspnet-mvc/api/grid and several others are dead, too.


I would be happy if you could provide me with some sufficient sample code that solves the two problems mentioned above for a grid created by @(Html.Kendo().Grid... within a .cshtml file.
Thank you very much!

10 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 03 Mar 2021, 08:25 AM

Hello Jod,

Thank you for reporting the missing articles, I've forwarded the issue to my colleagues who are responsible for the docs.

Indeed the way to go is implementing a custom filter widget via the Column.Filterable.Cell.Template setting as shown below:

// configure column

columns.Bound(p => p...).Title("Price").Filterable(x=> x.Cell(c=> c.Template("enumFilterTemplate")));

// filter template handler

function enumFilterTemplate(args) {
        args.element.kendoComboBox({
            ...
        })
}

Where the combobox is configured using the following api:

You can configure it to use a remote dataSource which requests a server end point that returns the items filtered and localized.

Regards,
Georgi
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
Jod
Top achievements
Rank 1
answered on 21 Apr 2021, 08:31 AM
A belated thank you. We will try to apply this as a starting point.
0
Lenny
Top achievements
Rank 1
answered on 21 Apr 2021, 01:38 PM
I tried this but it does not work for enum data types. The javascript function is never called by the grid.
0
Nils
Top achievements
Rank 1
Veteran
Iron
answered on 21 Apr 2021, 02:12 PM

Im trying around on this as well, the js function gets called (with enum datatype), and the combo box gets initialized. But I dont unterstand how to continue from here.

The args contain the element and a datasource property. But the datasource is always undefined. Is there a way to set the datasource for the combo box when initializing the grid?

Im looking for something similiar to this:

x.Bound(b => b.Status).Title(Localizer.Lang_Status).ClientTemplate("#: StatusName #").Filterable(f => f.Cell(c => c.Template("enumFilterTemplate").DataSource(d => d.Read("ActionName", "ControllerName"))));

 

 

0
Lenny
Top achievements
Rank 1
answered on 21 Apr 2021, 02:15 PM
I cant even get the grid to call the javascript function. I am using .net core but I dont think that is the issue here. I need to workaround the missing support for localized enum display values. The only way I can get it to work is to set the enum column as a foreign key type and set all the possible values for the euum in a select list collection. What a real pain.
0
Georgi
Telerik team
answered on 23 Apr 2021, 10:49 AM

Hello,

Lenny, is it possible that the function handler is not available in the global scope, thus, the grid is not able to get its reference? Could you please check if there are any JS errors in your console?

Nils, you can configure the combobox's dataSource within the client handler that initializes it.

e.g.

function enumFilterTemplate(args) {
        args.element.kendoComboBox({
            dataSource: {
               transport: {
                   read: "..."
              }
            }
        })
}

Further information about the dataSource.transport JS configuration can be found in the documentation:

I hope this helps.

Regards,
Georgi
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Lenny
Top achievements
Rank 1
answered on 23 Apr 2021, 01:16 PM
There are no errors. From what I researched enum columns cannot use custom filters. The values for the enumerations are sent to the grid by the MVC helper. This all stems from the open defect that the kendo grid does not honor the Display attribute for enumerations. I dont remember the work item number. I solved it by changing the enum column from a bound column to a foreign key column.
0
Nils
Top achievements
Rank 1
Veteran
Iron
answered on 23 Apr 2021, 01:59 PM

Hey Georgi,

thanks for the reply, but thats not what i meant.

function enumFilterTemplate(args) {
        args.element.kendoComboBox({
            dataSource: {
               transport: {
                   read: "..."
              }
            }
        })
}

 

The args contain a property "args.dataSource". Is there a way to set this? I would prefer to not hardcode the url inside the javascript but use a Mvc Helper for that.

 

Else I will look up foreign key columns and try your solution Lenny.

 

Thank you very much :)

0
Lenny
Top achievements
Rank 1
answered on 23 Apr 2021, 02:33 PM

You can use a Html helper if the javascript is in your .cshtml file.

 

    function productTypeFilter(element) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: "@Url.Action("GetAllBrokerProductType", "Common")"
                }
            },
            optionLabel: "--Select Value--"
        });
    }

 

The foreign key method is real simple.

col.ForeignKey(x => x.FundingType, Model.FundingTypes, "Value", "Text").Width(120)

The Model.FundingTypes is an IList<SelectListItem> that is sent to the view

 

0
Nils
Top achievements
Rank 1
Veteran
Iron
answered on 26 Apr 2021, 11:30 AM

Thank you so much Lenny

It works like a charm :)

Tags
Grid
Asked by
Jod
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Jod
Top achievements
Rank 1
Lenny
Top achievements
Rank 1
Nils
Top achievements
Rank 1
Veteran
Iron
Share this question
or