Search box kendo grid

2 posts, 0 answers
  1. Devon
    Devon avatar
    2 posts
    Member since:
    Jan 2016

    Posted 18 May Link to this post

    I'm trying to create a simple search box  that will search in all the fields found within the grid.

    I tried using the filterable option to get a search box. But I ended up getting search box/operators for every single column. All I want is a single search box in my grid that searches through all columns/fields. How can I do this? Also I setting the showOperators false for specific columns didn't work for me. The operators are always visible.

    I can post additional code if necessary but it's out of context for the problem I'm experiencing.

    <p></p><p>filterable: {<br>     mode: 'row',<br>    showOperators: false<br>}</p>

     

  2. Patrick
    Admin
    Patrick avatar
    172 posts

    Posted 18 May Link to this post

    Hello Devon,

    Please take a look at the following Progress Dojo which illustrates a Kendo Grid with a Search Box in the Toolbar.

    Here are the main points:
    1.  The toolbar is using a template which contains the label, textbox, and buttons.  Here is the code used:
        <script id="template" type="text/x-kendo-template">
              <label class="search-label" for="searchBox">Search Grid:</label>
              <input type="search" id="searchBox" class="k-textbox" style="width: 250px"/>
              <input type="button" id="btnSearch" class="k-button" value="Search"/>
              <input type="button" id="btnReset" class="k-button" value="Reset"/>
        </script>
     
    $("#grid").kendoGrid({      
             ...
              toolbar: [
                { template: kendo.template($("#template").html()) }
              ],
             ...
         });

    2. The search button's click event sets the Kendo Grid's Datasource Filters depending on what is passed in the textbox.  The reset button clears the filter.  Here's the function used for the search:
    $("#btnSearch").click(function () {
              var searchValue = $('#searchBox').val();
              $("#grid").data("kendoGrid").dataSource.filter({
                logic  : "or",
                filters: [
                  {
                    field   : "ContactName",
                    operator: "contains",
                    value   : searchValue
                  },
                  {
                    field   : "ContactTitle",
                    operator: "contains",
                    value   : searchValue
                  },
                  {
                    field   : "CompanyName",
                    operator: "contains",
                    value   : searchValue
                  },
                  {
                    field   : "Country",
                    operator: "contains",
                    value   : searchValue
                  }
                ]
              });
            });

    I hope this helps!

    Regards,
    Patrick
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top