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

Multi checkboxes in filter - Row mode

11 Answers 162 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tomasz
Top achievements
Rank 1
Tomasz asked on 25 Mar 2015, 12:58 PM
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

11 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 26 Mar 2015, 09:51 AM
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!
 
0
Pavel
Top achievements
Rank 1
answered on 25 Sep 2015, 01:33 PM

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.

0
Boyan Dimitrov
Telerik team
answered on 29 Sep 2015, 09:14 AM

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!
 
0
Geert
Top achievements
Rank 1
answered on 13 Jan 2016, 01:48 PM

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

0
Geert
Top achievements
Rank 1
answered on 13 Jan 2016, 01:58 PM
The clear icon also reappears if any other column has a filter with valid clear see screenshot
0
Geert
Top achievements
Rank 1
answered on 13 Jan 2016, 02:29 PM

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

0
Boyan Dimitrov
Telerik team
answered on 15 Jan 2016, 12:49 PM

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!
 
0
Geert
Top achievements
Rank 1
answered on 25 Jan 2016, 06:08 AM

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;
      }

 

0
Boyan Dimitrov
Telerik team
answered on 26 Jan 2016, 04:52 PM

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!
 
0
Thomas
Top achievements
Rank 1
answered on 28 Sep 2016, 07:44 PM

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!
 
[/quote][quote]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!
 
[/quote]
0
Boyan Dimitrov
Telerik team
answered on 30 Sep 2016, 03:16 PM

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.
 
Tags
Grid
Asked by
Tomasz
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Pavel
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Geert
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Share this question
or