Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script> 
  <script src="http://demos.kendoui.com/content/shared/js/people.js"></script>  
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body> 
   
    <div id="grid"></div>
    
    <script>
      $(document).ready(function() {
        $("#grid").kendoGrid({
          dataSource: {
            data: createRandomData(50),
            schema: {
              model: {
                fields: {
                  City: { type: "string" },
                  Title: { type: "string" },
                  BirthDate: { type: "date" }
                }
              }
            },
            pageSize: 15
          },
          height: 430,
          scrollable: true,
          filterable: {
            extra: false,
            operators: {
              string: {
                startswith: "Starts with",
                eq: "Is equal to",
                neq: "Is not equal to"
              }
            }
          },
          pageable: true,
          columns: [
            {
              title: "Name",
              width: 160,
              filterable: false,
              template: "#=FirstName# #=LastName#"
            },
            {
              field: "Title",
              width: 130,
              filterable: {
                ui: titleFilter
              }
            } ,
            {
              field: "City",
              width: 130,
              filterable: {
                ui: cityFilter
              }
            } 
          ]
        });
      });
      
      function filterByTitle(e){
        var cities = e.data.widget.value();
        var filter = {logic: "or", filters: []}; 
        for (var i = 0; i < cities.length; i++)
        {
          filter.filters.push({ field: "Title", operator: "eq", value: titles[i] })
        } 
        $("#grid").data("kendoGrid").dataSource.filter(filter);
      };
      
      function titleFilter(element) {
        
        var menu = $(element).parent(); 
        menu.find(".k-filter-help-text").text("Show records for people working as:");
        menu.find("[data-role=dropdownlist]").remove(); 
        
        element.removeAttr("data-bind");
        var multiSelect = element.kendoMultiSelect({
          dataSource: titles 
        }).data("kendoMultiSelect");
        
        menu.find("[type=submit]").on("click", {widget: multiSelect}, filterByTitle); 
      }
      
      
      
      function filterByCity(e){
        var cities = e.data.widget.value();
        var filter = {logic: "or", filters: []}; 
        for (var i = 0; i < cities.length; i++)
        {
          filter.filters.push({ field: "City", operator: "eq", value: cities[i] })
        } 
        $("#grid").data("kendoGrid").dataSource.filter(filter);
      };
      
      function cityFilter(element) {
        
        var menu = $(element).parent(); 
        menu.find(".k-filter-help-text").text("Show people that live in:");
        menu.find("[data-role=dropdownlist]").remove(); 
        
        element.removeAttr("data-bind");
        var multiSelect = element.kendoMultiSelect({
          dataSource: cities 
        }).data("kendoMultiSelect");
        
        menu.find("[type=submit]").on("click", {widget: multiSelect}, filterByCity); 
      }
      
    </script> 
​
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
apoffpro
0viewers