Grid custom filter for boolean field

[Nick]

Hello,

I want to filter a Grid with Bound bool field by using a dropdown instead of normal radiobuttons.
Is this possible at all?

I have tried settings filterable.UI as follows:

columns.Bound(c => c.UnServiceable)
    .Title("U/S")
    .ClientTemplate("#if(UnServiceable) { #Yes# } else { #No# }#")
    .Filterable(filter => filter
        .Messages(m => m.Info(Strings.Filter_UnServiceable_Message))
        .UI("boolAsDropdown"))
    .Width(100);

However, the ​boolAsDropdown​ javascript function is never called. It seems to be unable to call this when using a boolean field as data column.
The same method is working fine with other column types (int, string).

If anyone could help me with this issue, this would be great.

Thank you in advance,
Nick

[Vladimir Iliev]

Hi Nick,

This topic is already discussed in the following forum post:

• Custom bool filter and advanced filter questions

Regards,
Vladimir Iliev
Telerik

 

 

[Brian]

I don't agree, I need exactly the same and am having the exact same problem, having read that alternate thread multiple times I see nothing in there that helps me solve this?

How, in MVC do we get a customised filter for Boolean columns?

[Tsvetina]

Hi Brian,

The linked thread discusses that customizing the filter of a boolean column is not supported. Currently, the filter template function will be executed by the Grid but it is still not possible to replace the radio buttons with a DropDownList out of the box because the DropDownList has a text input at its base and the values in it will be strings.
There is a way to replace the string values with boolean ones at runtime, during the filter event, so with some customization, your requirement of showing a DropDownList should be achievable:

columns.Bound(p => p.Delivered).Filterable(filterable => filterable.UI("getBoolFilter"));

function getBoolFilter(input) {
    input.kendoDropDownList({
        dataSource: {
            data: [
                { text: "True", value: "true" },
                { text: "False", value: "false" }
            ]
        },
        dataTextField: "text",
        dataValueField: "value",
        valuePrimitive: true
    });
}

Then, on filter of the Grid, convert the values as needed:

.Events(e=>e.Filter("onFilter"))

function onFilter(e) {
    if (e.field === "Delivered") {
        if (e.filter && e.filter.filters && e.filter.filters.length > 0) {
            e.filter.filters[0].value = (e.filter.filters[0].value === "true");
        }
    }
}

Regards,
Tsvetina
Progress Telerik

[Andreas]

Hi Tsvetina,

i would like to have a dropdown control for boolean fields in kendoGrid and i would like to have it in Row-Filter and in Menu (ColumnMenu). I've searched the Forums and ended up here but your provided solution is not working on my end. I use asp core 2.2 and the latest kendo controls.

The "getBoolFilter" function is never fired and the grid behaves exactly the same, no matter if i implement your solution or not. It is always the default Filter with the radiobuttons.

Any ideas or is there a working example with a boll column and a dropdown filter template anywhere?

Best Regards

[Alex Hajigeorgieva]

Hello, Andreas,

I am pleased to let you know that the customisation of the filterable ui for boolean columns has now been made possible.

To create a dropdown list for the GridFilterMode.Menu - the Filterable.UI option is used.
To create a dropdown list for the GridFilterMode.Row - the Filterable.Cell.Template is used.

@(Html.Kendo().Grid<OrderViewModel>()
    .Name("grid")
    .Filterable(f=>f.Mode(GridFilterMode.Row))
    .Columns(columns =>
    {
       columns.Bound(p => p.Discontinued).Filterable(f=>f.Cell(cell=>cell.Template("boolDropDown")));

<script>
    function boolDropDown(args) {
        args.element.kendoDropDownList({
            dataSource: [{ value: true, text: "True" }, { value: false, text: "False" }],
            optionLabel: "--Select--",
            dataTextField: "text",
            dataValueField: "value"
        });
    }
</script>

Let me know in case further questions arise.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Brian]

Hi, thanks for getting back to us.

I assume this is possible with a new release of the tools?
Could you confirm the version please?

Thanks

 

[Alex Hajigeorgieva]

Hello, Brian,

The column filter appears to work in version 2015.2.624 which is as far back as the Dojo goes for easy testing:

https://dojo.telerik.com/@bubblemaster/eYUBIbOC/2

Which version are you currently using?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Andreas]

Hello Alex,

got it working, thank you for yout help. In case someone may have the same issue as i had:

I did what you suggested but with no avail. It was always the same result not matter what i did. The UI and the Template never showed. Finally i found it, it was my mistake. I built a custom global functionality to save and restore the grid state based on the getOptions and setOptions. As mentioned in the knowledgebase when you stringify the options, js-handlers need to be reassigned. That was my point. I always lost the UI-Templates because of the stringify-thing. I changed it and now everything works as expected!

Cheers

 

[Alex Hajigeorgieva]

Hello, Andreas,

Thank you for enhancing the forum post. Indeed, standard JSON does not preserve function references.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions

And here is the knowledge base article:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-customized-filter

Kind Regards,
Alex Hajigeorgieva
Progress Telerik