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>
    <base href="http://demos.telerik.com/kendo-ui/grid/filter-menu-customization">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
            <script src="../content/shared/js/people.js"></script>
​
        <div id="example">
            <div id="grid"></div>
​
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            schema: {
                                model: {
                                    fields: {
                                        City: { type: "string" },
                                    }
                                }
                            },
                            pageSize: 15
                        },
                        height: 550,
                        scrollable: true,
                        filterable: {
                          
                          //****************************************
                          
                            //hide second filter option
                                    extra: false,
                                    operators: {
                                      string: {
                                        eq: "Is equal to"
                                      }
                                    }
                                  },
                                  filterMenuInit: function(e) {
                                    //when filter menu opens toss it cause its lame!
                                    e.container.html("<input name='radio' type='radio' checked='checked' value='Clear'>Clear</input><input name='radio' type='radio' value='London'>London</input><input name='radio' type='radio' value='Seattle'>Seattle</input>");   
                                    
                                    $("input[type=radio]").click(function(){
                                      if($(this).val() != "Clear") {
                                        $(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
                                      }else {
                                        $(".k-grid").data("kendoGrid").dataSource.filter({})
                                      }
                                    });
                                    
                                    
                          //****************************************        
                                  
                        },
                        pageable: true,
                        columns: [
                            {
                                title: "Name",
                                width: 160,
                                filterable: false,
                                template: "#=FirstName# #=LastName#"
                            },
                            {
                                field: "City",
                                width: 130                          
                                    
                            }
                       ]
                    });
                });
              
              $("input[type=radio]").click(function(){
                                      if($(this).val() != "Clear") {
                                        $(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
                                      }else {
                                        $(".k-grid").data("kendoGrid").dataSource.filter({})
                                      }
                                    });
                                    
            
            </script>
        </div>
             
​
</body>
</html>
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers