Kendo UI Grid - External Filter

External Filter example for Kendo UI Grid, as documented here: http://randombrainworks.com/2014/03/15/external-filte…for-kendo-grid

by Random Brainworks

HTML

<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<!-- External Filter Dropdowns -->Filter by:
<!-- Network filter dropdown -->
<br />Network :
<select id="network">
    <option value="0">-- select --</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<!-- OS filter dropdown -->&nbsp; OS :
<select id="os">
    <option value="0">-- select --</option>
    <option>Win 7</option>
    <option>Win 8</option>
    <option>Win 8.1</option>
    <option>Redhat</option>
</select>
<!-- Clear Filter button -->&nbsp;
<input type="button" id="clear" value="Clear Filters" />
<br />
<br />
<!-- Example Data -->
<table id="TableGrid">
    <tr>
        <th>Network</th>
        <th>OS</th>
        <th>Hostname</th>
    </tr>
    <tr>
        <td>A</td>
        <td>Win 7</td>
        <td>W7-001</td>
    </tr>
    <tr>
        <td>A</td>
        <td>Win 8</td>
        <td>W8-002</td>
    </tr>
    <tr>
        <td>B</td>
        <td>Win 7</td>
        <td>W7-003</td>
    </tr>
    <tr>
        <td>B</td>
        <td>Win 8.1</td>
        <td>W81-004</td>
    </tr>
    <tr>
        <td>B</td>
        <td>Win 7</td>
        <td>W7-005</td>
    </tr>
    <tr>
        <td>C</td>
        <td>Redhat</td>
        <td>RH-006</td>
    </tr>
    <tr>
        <td>C</td>
        <td>Win 7</td>
        <td>W7-007</td>
    </tr>
    <tr>
        <td>C</td>
        <td>Win 8.1</td>
        <td>W81-008</td>
    </tr>
</table>

JavaScript

// Initialize Kendo Grid from our table.
$("#TableGrid").kendoGrid({
    sortable: true
});

// attache change event for "OS" dropdown
$("#os").change(function () {
    applyFilter("OS", $(this).val());
});

// attach change event to the "network" dropdown.
$("#network").change(function () {
    applyFilter("Network", $(this).val());
});

// attach click event for Clear Filters button 
$("#clear").click(function () {
    clearFilters();
});

// applyFilter function accepts the Field Name and the new value to use for filter.
function applyFilter(filterField, filterValue) {

    // get the kendoGrid element.
    var gridData = $("#TableGrid").data("kendoGrid");

    // get currently applied filters from the Grid.
    var currFilterObj = gridData.dataSource.filter();

    // get current set of filters, which is supposed to be array.
    // if the oject we obtained above is null/undefined, set this to an empty array
    var currentFilters = currFilterObj ? currFilterObj.filters : [];

    // iterate over current filters array. if a filter for "filterField" is already
    // defined, remove it from the array
    // once an entry is removed, we stop looking at the rest of the array.
    if (currentFilters && currentFilters.length > 0) {
        for (var i = 0; i < currentFilters.length; i++) {
            if (currentFilters[i].field == filterField) {
                currentFilters.splice(i, 1);
                break;
            }
        }
    }

    // if "filterValue" is "0", meaning "-- select --" option is selected, we don't 
    // do any further processing. That will be equivalent of removing the filter.
    // if a filterValue is selected, we add a new object to the currentFilters array.
    if (filterValue != "0") {
        currentFilters.push({
            field: filterField,
            operator: "eq",
            value: filterValue
        });
    }

    // finally, the currentFilters array is applied back to the Grid, using "and" logic.
   ...