Grid custom filter for boolean field

10 posts, 0 answers
  1. Nick
    Nick avatar
    1 posts
    Member since:
    Oct 2014

    Posted 07 Oct 2014 Link to this post

    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
  2.
  3. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 09 Oct 2014 Link to this post

    Hi Nick,

    This topic is already discussed in the following forum post:

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Brian
    Brian avatar
    17 posts
    Member since:
    Aug 2015

    Posted 05 Apr 2019 in reply to Vladimir Iliev Link to this post

    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?

  7. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 09 Apr 2019 Link to this post

    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
    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.
  8.
  9. Andreas
    Andreas avatar
    18 posts
    Member since:
    Aug 2007

    Posted 12 Aug 2019 in reply to Tsvetina Link to this post

    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

  11. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 14 Aug 2019 Link to this post

    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
    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.
  13. Brian
    Brian avatar
    17 posts
    Member since:
    Aug 2015

    Posted 14 Aug 2019 in reply to Alex Hajigeorgieva Link to this post

    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

     

  14.
  15. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 15 Aug 2019 Link to this post

    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
    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.
  17. Andreas
    Andreas avatar
    18 posts
    Member since:
    Aug 2007

    Posted 16 Aug 2019 in reply to Alex Hajigeorgieva Link to this post

    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

     

  19. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 19 Aug 2019 Link to this post

    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
    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.
  20.
Back to Top