Customizing enum inrow filter

[Jod]

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!

[Georgi]

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:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox

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

[Jod]

A belated thank you. We will try to apply this as a starting point.

[Lenny]

I tried this but it does not work for enum data types. The javascript function is never called by the grid.

[Nils]

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

 

 

[Lenny]

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.

[Georgi]

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:

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport

I hope this helps.

Regards,
Georgi
Progress Telerik

[Lenny]

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.

[Nils]

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

[Lenny]

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

 

[Nils]

Thank you so much Lenny

It works like a charm :)