Здесь Вы можете найти доказательство концепции.
Это всего лишь концепция, что можно добиться того, что вы делаете, конечно же, необходимо провести больше исследований и лучше всего справиться с checkboxes, проверяя и снимая с себя цель - предоставить концепцию о том, как ее достичь.
- Вам нужно будет узнать больше о фильтрации в случае проверки всех флажков и других возможностей, и вы можете найти справку по этому поводу в документации telerik или в stackoverflow.
Вот JSBIN http://jsbin.com/bakediseci/edit?html,js,output
ДЛЯ СКРЫТОЙ COLUMN Фильтр СМОТРИТЕ ЭТУFILTER HIDDEN COLUMN
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<span> Group1 <input type="checkbox" id="group1"/><br/>
<span> Group2 <input type="checkbox" id="group2"/>
<br/>
<br/>
Date: <input id="date" />
<br/>
<br/>
<br/>
<br/>
<div id="grid"></div>
</html>
JavaScript:
var data = [
{ name: "Paul", birthDate: new Date("1948/12/08"),Group:"Group1" },
{ name: "Janet", birthDate: new Date("1952/02/19"),Group:"Group1" },
{ name: "Nancy", birthDate: new Date("1963/08/30"),Group:"Group2" },
{ name: "Steven", birthDate: new Date("1937/09/19"),Group:"Group2" }
];
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: data,
columns: [
{field: "birthDate", format: "{0:d}" },
{field:"name"},
{field:"Group"}
]
}).data("kendoGrid");
$(document).ready(function() {
//set initial state.
$('#group1').val($(this).is(':checked'));
$('#group2').val($(this).is(':checked'));
$('#group1').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group1"});
}else {
grid.dataSource.filter({});
}
});
$('#group2').change(function() {
if($(this).is(":checked")) {
$("#grid").data("kendoGrid").dataSource.filter({field:"Group",operator:"eq",value:"Group2"});
}else {
grid.dataSource.filter({});
}
});
});
$("#date").kendoDatePicker({
change: function() {
var value = this.value();
if (value) {
grid.dataSource.filter({
field: "birthDate",
operator: "eq",
value: value
});
} else {
grid.dataSource.filter({});
}
}
});
});
ВЫВОД
Исследования и ПОЛЕЗНЫЕ ссылки, которые вы будете нуждаться вниз по дороге
Там было определенно исследования и источник, используемый вам нужно будет пройти через им снова, чтобы сделать его прочным.
@sean кан Спасибо за помощь, я не хочу использовать «filterMenuInit» событие, чтобы показать меню фильтра, он должен быть вне сетки, чтобы иметь его более заметным для пользователя (UX) , Также поля для фильтрации не будут отображаться в сетке как столбцы и т. Д. –
нет встроенного способа иметь несколько фильтров, что вы можете сделать, чтобы сделать отдельный элемент управления для флажка и чтения огня и обновления на сетке соответственно. –
поля для фильтрации не будут видны в сетке в виде столбцов. Для этого вы можете просто скрыть предполагаемый coloumn –