KendoUI Grid Custom Filters

by VtoCorleone

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<br />
    <input id="gridSearchTextAutoComplete" type="text"> Auto Search </input>
<br />
<br />
<div id="gridSearchWrapper">
    <input id="gridSearchText" type="text"></input>
    <button id="gridSearch" >Search</button>
    <button id="clearGridSearch" >Clear</button>
    <button id="clearAllGridSearch" >Clear All</button>
</div>
<br />
<div id="gridContainer">
    <div id="searchableGrid"></div>
</div>
<div id="genderFilter" class="GenderContainer k-filter-menu k-popup k-group k-reset k-state-border-up">
    <div style="float:left; margin-right:15px;">
        <input id="genderMale" type="radio" name="Gender" value="Male"  />
        <label>Male</label>
    </div>
    <div style>
        <input id="genderFemale" type="radio" name="Gender" value="Female" />    
        <label>Female</label>
    </div>
    <button id="applyGenderFilter" type="submit" style="width:95px; float: left;" class="k-button">Apply</button>
    <button id="removeGenderFilter" type="submit" style="width:95px;" class="k-button">Clear</button>
</div>

CSS

.GenderContainer{
     padding: 15px;
     position: absolute;
     display: none;
     width: 200px;
}

JavaScript

GlobalFilterSearch = (function($) {
    var
    dataSource, columns, customFilter = {
        mthCustomFilter: true,
        logic: "or",
        filters: []
    };

    function initializeGridSearchFeatures(_dataSource, _columnDefinition) {
        dataSource = _dataSource;
        columns = _columnDefinition;
        dataSource.bind("change", function() {
            dataSourceOnChange();
        });
        buildFilter();
    }

    function dataSourceOnChange() {
        var searchTextValue = $("#gridSearchTextAutoComplete").val();
        if (searchTextValue !== '' || searchTextValue !== "" || searchTextValue !== null || searchTextValue !== undefined) {
            highlightSearchedText(searchTextValue);
        }
    }

    function buildFilter() {
        for (i = 0; i < columns.length; i++) {
            //if (columns[i].values === undefined) {
            if (columns[i].field !== undefined) {
                if (dataSource.options.schema.model.fields[columns[i].field].type == "string") {
                    customFilter.filters.push({
                        field: columns[i].field,
                        operator: "contains",
                        value: ''
                    });
                }
            }
        }
    }

    function setFilterValue(searchText) {
        for (i = 0; i < customFilter.filters.length; i++) {
            customFilter.filters[i].value = searchText;
        }
    }

    function filterData(searchText) {
        //buildFilter(searchText);
        setFilterValue(searchText);
        if (dataSource.filter() === undefined) {
            dataSource.filter([customFilter]);
        }
        else {
            for (i = 0; i < dataSource.filter().filters.length; i++) {
                if (dataSource.filter().filters[i].mthCustomFilter !== undefined) {
                    if (dataSource.filter().filters[i].mthCustomFilter === true) {
                        dataSource.filter().filters.splice(i, 1);
                       ...