k-grid fiter

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<div id="grid"></div>

CSS

#grid {
 margin-top: 40px;   
}

JavaScript

var myData = [
    { name: "Item1", date: new Date("October 13, 2012") },
    { name: "Item2", date: new Date("January 22, 2012") },
    { name: "Item3", date: new Date("December 4, 2012") },
    { name: "Item4", date: new Date("October 17, 2012") }
];

$("#grid").kendoGrid({
    dataSource: {
        data: myData,
        schema: {
            model: {
                fields: {
                    name: { type: "string" },
                    date: { type: "date" }                    
                }
            }                
        }
    },
    dataBound: function() {
        //removeOptions();
    },
    columns: [ 
        { 
            field:"date", 
            format: "{0:MM/dd/yyyy}",
            filterable: {
                extra: true,
                operators: {
                    date: {
                        gte: "Is equal to or after",
                        lte: "Is equal to or before"
                    }
                }                    
            }
        }
    ],
    filterable: true
});

function removeOptions() {
    //finds the select elements that are used to init the dropDownLists
    var selectElements = $(".k-filter-menu").eq(0).find("select");
    //gets kendoDropDownList widgets
    var firstDropDown = selectElements.eq(0).data("kendoDropDownList"),
        andOrDropDown = selectElements.eq(1).data("kendoDropDownList"),
        secondDropDown = selectElements.eq(2).data("kendoDropDownList");
    //creates objects
    var gteObj = { text: "Is equal to or after", value: "gte" };
    var lteObj = { text: "Is equal to or before", value: "lte" };
    var andObj = { text: "And", value: "and" };
    
    //rebinds the dropDownLists to the new objects
    firstDropDown.dataSource.data([gteObj]);
    andOrDropDown.dataSource.data([andObj]);
    secondDropDown.dataSource.data([lteObj]);
    //selects the option
    secondDropDown.select(0);
}
//calls the removeOptions function
removeOptions();