Kendo UI Grid Search as Example Type

Question

I would like to search for a datagrid in the Kendo user interface when typing in the input box above the grid.

How can i do this?

Thanks for any advice.

Here is an example of columns:

   $("#grid").kendoGrid({
            dataSource: dataPacket,
            filterable: true,
            pageSize: 10,
            pageable: true,
            sortable: true,
            reorderable: true,
            resizable: true,
            columnMenu: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: ["id", 
                      "username", 
                      "name",
                      "surname", 
                      "email", 
                      {
                          field :"created", 
                          title : "Created at",
                          format: "{0:M/d/yyyy}",
                          parseFormats: ["dd-MM-yyyy"],
                          type: "date"
                      }, 

Answer 1

Kendo makes this thing very easy for you, you need to create a filter and pass it to a DataSource. http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-filter

However, this problem needs to be divided into two different tasks:

a) Grab key events in the search box, Throttle and start the search operation.

b) Create a filter and pass it to the DataSource.

, -. underscorejs. ? . 250 ( ) .

HTML

<input type="text" id="search" /> 

script. , , .

(function($, kendo){

    // ID of the timeout "timer" created in the last key-press
    var timeout = 0;

    // Our search function 
    var performSearch = function(){

        // Our filter, an empty array mean "no filter"
        var filter = [];

        // Get the DataSource
        var dataSource = $('#grid').data('kendoGrid').dataSource;

        // Get and clean the search text.
        var searchText = $.trim($('#search').val());

        // Build the filter in case the user actually enter some text in the search field
        if(searchText){

            // In this case I wanna make a multiple column search so the filter that I want to apply will be an array of filters, with an OR logic. 
            filter.push({
                logic: 'or',
                filters:[
                    { field: 'username', operator: 'contains', value: searchText },
                    { field: 'name', operator: 'contains', value: searchText },
                    { field: 'surname', operator: 'contains', value: searchText },
                    { field: 'email', operator: 'contains', value: searchText }
                ]                  
            });               
        }

        // Apply the filter.
        dataSource.filter(filter); 
    };

    // Bind all the keyboard events that we wanna listen to the search field.
    $('#search').on('keyup, keypress, change, blur', function(){

          clearTimeout(timeout);
          timeout = setTimeout(performSearch, 250);
    });

})(window.jQuery, window.kendo);

: , DataSource.

serverFiltering = true, Ajax, .

serverFiltering = false, JavaScript ( !). ( ) .