Tuesday 19 November 2013

Custom Column Filter only with a single textbox on each column without any operators and buttons.







Here i find custom search functionality for KendoUI grid. Hope you really find helpfull.

HTML
<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>
 

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


http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/custom-column-filter-only-with-a-single-textbox-on-each-column-without-any-operators-and-buttons.aspx


Another link is

http://jsbin.com/ihanun/1/edit

Wednesday 13 November 2013