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
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
Rank 1
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.
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
Rank 1
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
Rank 1
Rank 1
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;
}
});
}
}
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
Rank 1
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;
}
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
Rank 1
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?
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
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