Multi checkboxes in filter - Row mode

12 posts, 0 answers
  1. Tomasz
    Tomasz avatar
    1 posts
    Member since:
    Mar 2015

    Posted 25 Mar 2015 Link to this post

    Hi

    Do you plan to add multi checkboxes inside the filter in the Row mode - when the filter boxes appear under headers?

    Currently it is possible but in the Menu mode when filters appear after filter icon is clicked.

    If yes when it could be expected? If no do you know any easy way to customize that?

    Thanks in advance for an answer
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Mar 2015 Link to this post

    Hello Tomasz,

    I am afraid that we do not have such plans. However you can customize the cell when filtering row through a template. Here is a small example that should give you the basic idea:

    http://dojo.telerik.com/ilaHa

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Pavel
    Pavel avatar
    1 posts
    Member since:
    Sep 2015

    Posted 25 Sep 2015 in reply to Petur Subev Link to this post

    This code example contain errors. It's bad that there is no ability to change columns.filterable.logic property.

    Don't know what to do with another problem.
    grid.dataSource.filter() breaks filter structure if there is an field with dot notaion like 'user.name', works fine when userName, but for any grid column that use dot notaion it it's field - doesn't work.

  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Sep 2015 Link to this post

    Hello Pavel,

     

    The problem is that the columns.field name should be a valid JavaScript identifier and should contain no spaces, no special characters, and the first character should be a letter (including dot notation). 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Geert
    Geert avatar
    4 posts
    Member since:
    Dec 2015

    Posted 13 Jan in reply to Boyan Dimitrov Link to this post

    Hi,

     

    I have used this example and it works fine except for one issue.

    The placeholder for the selection does not extend the entire search header and it keeps a spot reserver for the "clear all filters" icon

  7. Geert
    Geert avatar
    4 posts
    Member since:
    Dec 2015

    Posted 13 Jan in reply to Geert Link to this post

    The clear icon also reappears if any other column has a filter with valid clear see screenshot
  8. Geert
    Geert avatar
    4 posts
    Member since:
    Dec 2015

    Posted 13 Jan Link to this post

    I have to add that the grid is added in Angular Js

     

    vm.runsGridOptions = {
                dataSource: {
                    type: "json",
                    serverPaging: true,
                    serverSorting: true,
                    sort: { field: "id", dir: "desc" },
                    serverFiltering: true,
                    pageSize: 25,
                    transport: {
                        read: {
                            url: config.RunMetaDataForGridUrl,
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total"
                        }
                    }
                },
                height: 500,
                scrollable: {
                    virtual: true
                },
                sortable: {
                    allowUnsort: false,
                    mode: 'single'
                },
                filterable: {
                    mode: "row",
                    operators: {
                        date: {
                            eq: "Is equal to",
                            gte: "Is after or equal to",
                            lt: "Is before"
                        }
                    }
                },
                columns: [
                    {
                        title: "Id",
                        field: "id",
                        filterable: {
                            cell: {
                                enabled: true,
                                showOperators: false,
                                operator: "eq",
                                dataSource: []
                            }
                        }
                    },
                    {
                        title: "RunDate",
                        field: "runDate",
                        type: "date",
                        format: "{0:dd/MM/yyyy HH:mm}",
                        filterable: {
                            ui: "datetimepicker"
                        }
                    },
                    {
                        title: "Operator",
                        field: "operator",
                        filterable: {
                            cell: {
                                template: function (args) {
                                    args.element.removeAttr('data-bind').kendoMultiSelect({
                                        change: function(){
                                            var grid = $('#runGrid').getKendoGrid();;
                                            var filter = grid.dataSource.filter();
                                            if(filter) {
                                                removeFiltersForField(filter, "operator");
                                            }
                                            var values = this.value();

                                            var newFilter = {
                                                logic: "or",
                                                filters: []
                                            };
                                            if (!values.length){
                                                grid.dataSource.filter({});
                                                return;
                                            }
                                            for (var i = 0; i<values.length; i++) {
                                                newFilter.filters.push({ field: "operator", value: values[i], operator: "eq" });
                                            }

                                            if(filter && filter.filters) {
                                                filter.filters.push(newFilter);
                                            } else {
                                                filter = newFilter;
                                            }

                                            grid.dataSource.filter(filter);


                                        },
                                        dataSource: {
                                            type: "json",
                                            transport: {
                                                read: {
                                                    url: config.OperatorsUrl,
                                                    dataType: "json"
                                                }
                                            }
                                        },
                                        dataTextField: "operator",
                                        dataValueField: "operator",
                                        valuePrimitive: true
                                    });
                                },
                                showOperators: false
                            }
                        }
                    }
                ]
            };

            function removeFiltersForField(expression, field) {
                if (expression.filters) {
                    expression.filters = $.grep(expression.filters, function (filter) {
                        removeFiltersForField(filter, field);
                        if (filter.filters) {
                            return filter.filters.length;
                        } else {
                            return filter.field != field;
                        }
                    });
                }
            }

  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 15 Jan Link to this post

    Hello Geert,

     

    This behavior should not be affected by using with angular. I tried to replicate the behavior with this http://dojo.telerik.com/UCoYI example. Could you please isolate the problem in runnable dojo example to investigate the problem? 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Geert
    Geert avatar
    4 posts
    Member since:
    Dec 2015

    Posted 25 Jan in reply to Boyan Dimitrov Link to this post

    Hi,

     

    As you can see in my screenshot the issue still persists. I have selected several filters and then removed them with the X beside the field. Results ar eno longer filtered but the items remain in the list.

     

    I have solved this issue by hiding the overall remove button and stretch the select box:

     /* Progress grid */
    #overviewGrid th:nth-child(3) button{
            display:none !important;
          }

    #overviewGrid th:nth-child(3) .k-operator-hidden{
        width: 100% !important;
          }

     

  11. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Jan Link to this post

    Hello Geert,

     

    Indeed you are absolutely right - the clear icon next to the MultiSelect widget remain and does not clear the current selection of the MultiSelect. This is caused by the fact the element used to initialize the MultiSelect widget does not have the binding ( that should clear its selected items). The following code removes it: 

    function createMultiSelect(element) {
              element.removeAttr("data-bind");
    ....

    In this case the the most convenient solution is to hide the clear button for this column and clear the selection by selecting the "x" button for each item in the MultiSelect widget. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Thomas
    Thomas avatar
    1 posts
    Member since:
    Jun 2015

    Posted 28 Sep in reply to Petur Subev Link to this post

    http://dojo.telerik.com/ilaHa
    is almost what I am looking for, I need to make my filter's "operator" a "contains" rather than "eq" 

    in the column I have filterable: {multi: true, dataSource: Witness ,search: true  } that brings up a list of names but I can't find a way to make the operator change from eq to contains

    can you make a little example?

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
    Petur Subev said:Hello Tomasz,

    I am afraid that we do not have such plans. However you can customize the cell when filtering row through a template. Here is a small example that should give you the basic idea:

    http://dojo.telerik.com/ilaHa

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 30 Sep Link to this post

    Hello Thomas,

    The MultiCheckBox filter using internally "eq" operator and can not changed. I would suggest to take a look  at the Create Checkbox Filter Menu how-to article. The developer has full control over setting the operators. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready