KendoUI Grid Universal Search
by VtoCorleone
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<br />
<div id="gridSearchWrapper">
<input id="gridSearchText" type="text"></input>
<input id="gridSearch" type="button" value="Search" />
<input id="clearGridSearch" type="button" value="Clear" />
</div>
<br />
<br />
<div id="gridContainer">
<div id="searchableGrid"></div>
</div>
JavaScript
FilterGridData = (function($) {
var
dataSource, columns, customFilter = {
logic: "or",
filters: []
};
function buildFilter(searchText) {
for (i = 0; i < columns.length; i++) {
if (columns[i].values === undefined) {
customFilter.filters.push({
field: columns[i].field,
operator: "eq",
value: searchText
});
}
else {
}
}
}
function setFilterValue(searchText) {
for (i = 0; i < customFilter.filters.length; i++) {
customFilter.filters[i].value = searchText;
}
}
function filterData(searchText) {
buildFilter(searchText);
//setFilterValue(searchText);
if (dataSource.filter() === undefined) {
dataSource.filter(customFilter);
}
else {
var tempFilter = dataSource.filter().filters;
tempFilter.push(customFilter);
dataSource.filter(tempFilter);
}
}
return {
Initialize: function(_dataSource, _columns) {
dataSource = _dataSource;
columns = _columns;
},
Filter: function(_searchText) {
filterData(_searchText);
}
};
})(jQuery);
var gridData = [{
"id": 1,
"PatientFirst": "Don",
"PatientLast": "Johnson",
"Gender": 0,
"Status": 0,
"DrFirst": "Han",
"DrLast": "Solo"},
{
"id": 2,
"PatientFirst": "James",
"PatientLast": "Bond",
"Gender": 1,
"Status": 2,
"DrFirst": "Michael",
"DrLast": "Salvatore"},
{
"id": 3,
"PatientFirst": "James",
"PatientLast": "Cameron",
"Gender": 1,
"Status": 0,
"DrFirst": "Kevin",
"DrLast": "Jones"},
{
"id": 4,
"PatientFirst": "Shane",
"PatientLast": "Chapman",
"Gender": 1,
"Status": 0,
"DrFirst": "Jaime",
"DrLast": "Johnson"},
{
"id": 5,
...