Kendo UI Grid Filtering with a Dropdown List

Kendo UI grid filtering using a simple custom dropdownList

Framework 1 :

Framework 2 :

+ Js file(s) :	http://cdn.kendostatic.com/2014.2.903/js/kendo.web.min.js

+ Css file(s) :	http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="4dc" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

CSS

Javascript

$(function() {
  
  function catFilter(element) {
    element.kendoDropDownList({
      dataSource: ['Router','Printer','Hdd'],
      optionLabel: "-- Select a Category --"
    });
  }
  
  var docLines = [
    {"id":"id001","aname":"Article n°1","cat":"Router","price":131,"qty":3},
    {"id":"id002","aname":"Article n°2","cat":"Router","price":89,"qty":1},
    {"id":"id003","aname":"Article n°3","cat":"Printer","price":120,"qty":9}];
  
  $("#kid").kendoGrid({
    dataSource: new kendo.data.DataSource({ data: docLines }),
    filterable: { extra: false },
    pageable: false,
    columns: [
        { field: "aname", title: "Article" },
        { field: "cat", title: "Category", 
         filterable: {
           ui: catFilter,
           operators: {
             string: {
               eq: "Is equal to",
               neq: "Is not equal to" }
           }}},
        { field: "price", title: "Prix", format: "{0:c}", width: "100px" ,filterable: false},
        { field: "qty", title: "Quantité", width: "100px",filterable: false },
      ]
	});
});

Kendo UI Grid Filtering with a Dropdown List

Link :

Fork button :

Embed preview :