<!DOCTYPE html>
<html>
<head>
<link
href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css"
rel="stylesheet" type="text/css" />
<link
href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.rtl.min.css"
rel="stylesheet" type="text/css" />
<link
href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css"
rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css"
rel="stylesheet" type="text/css" />
<link
href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css"
rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css"
rel="stylesheet" type="text/css" />
<script
src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script
src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="grid"></div>
</body>
</html>
<script type=”text/javascript”>
$("#grid").kendoGrid({
dataSource:[ {
foo: "Foo
1",
bar: "Bar
1"
} , {
foo: "Foo
2",
bar: "Bar
2"
}
]
});
var grid = $("#grid").data("kendoGrid");
$("<tr><th class='k-header'
data-field='foo'><input /></th><th data-field='bar'
class='k-header' ><input
/></th></tr>").appendTo($("#grid
thead")).find("input").keyup(function() {
grid.dataSource.filter({
operator:
"contains",
value:
$(this).val(),
field:
$(this).parent("th").data("field")
});
});
</script>Happy Coding!
No comments:
Post a Comment