Grid search feature

5 posts, 0 answers
  1. Yevgeniy
    Yevgeniy avatar
    3 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    Is it possible for the grid toolbar to have a search box on top of each column and to filter the results on the grid as soon as the user starts typing. 

    This is something that this grid has http://www.trirand.com/blog/jqgrid/jqgrid.html#

    Thank you so much 
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 20 Feb 2013 Link to this post

    Hi Yevgeniy,

    Thank you for getting in touch with us.

    In order to achieve that you should add search input inside the Grid's toolbar via template. When the value of this input changes you may filter the DataSource of the Grid using filter method of the DataSource.

    Similar approach is demonstrated in this demo: http://demos.kendoui.com/web/grid/toolbar-template.html

    Kind regards,
    Alexander Valchev
    the Telerik team
    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
  4. Tim
    Tim avatar
    13 posts
    Member since:
    Dec 2013

    Posted 10 Jan 2014 Link to this post

    Hi Yevgeniy,

    I found a way to do this.

    First you create a toolbar with a input field on the Kendo grid like this:


    @(Html.Kendo().Grid<KdG.ProjectPortofolio.IntranetApp.ViewModels.Projects.ListProjectViewModel>()
                                  .ToolBar(toolBar => {
                                      toolBar.Template(
                                          @<Text>
                                               <input type="search" id="searchbox" class="SearchRight SearchTopMargin" />
                                               <b class="FloatRight SearchTopMarginExtra">Search the grid: </b>
                                          </Text>); 
                                  }
    Then you create a javascript keyup event on that "searchbox"  and add the collumn you would like to add to the filter like this

        <script type="text/javascript">
            $(document).ready(function () {
                //change event
                $("#searchbox").keyup(function () {
                    var val = $('#searchbox').val();
                    $("#Grid").data("kendoGrid").dataSource.filter({
                        logic: "or",
                        filters: [
                            {
                                field: "Name",
                                operator: "contains",
                                value: val
                            },
                            {
                                field: "Status",
                                operator: "contains",
                                value: val
                            },
                            {
                                field: "Category",
                                operator: "contains",
                                value:val
                            },
                            {
                                field: "AreaOfStudy",
                                operator: "contains",
                                value:val
                            },
                        ]
                    });
     
     
                });
    });
     
    </script>

    I hope this info helps!

    Regards,

    Tim
  5. Thomas
    Thomas avatar
    2 posts
    Member since:
    Jul 2013

    Posted 03 Feb 2014 Link to this post

    I just wanted to add something I did to make my search on a kendo grid work like dataTables.js (meaning the search each space operates as an AND across all columns). I posted it on stack overflow originally http://stackoverflow.com/questions/13938101/search-all-columns-in-kendoui-grid/21492319#21492319 Here is the fiddle http://jsfiddle.net/Naka3/38/ . this is the code i editted from him to make the search like dataTables.js

    $("#category").keyup(function () {
        var selecteditem = $('#category').val();
        var kgrid = $("#grid").data("kendoGrid");
        selecteditem = selecteditem.toUpperCase();
        var selectedArray = selecteditem.split(" ");
        if (selecteditem) {
            //kgrid.dataSource.filter({ field: "UserName", operator: "eq", value: selecteditem });
            var orfilter = { logic: "or", filters: [] };
            var andfilter = { logic: "and", filters: [] };
            $.each(selectedArray, function (i, v) {
                if (v.trim() == "") {
                }
                else {
                    $.each(selectedArray, function (i, v1) {
                        if (v1.trim() == "") {
                        }
                        else {
                            orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
                                                  { field: "QuantityPerUnit", operator: "contains", value:v1});
                            andfilter.filters.push(orfilter);
                            orfilter = { logic: "or", filters: [] };
                        }
     
                    });
                }
            });
            kgrid.dataSource.filter(andfilter);
        }
        else {
            kgrid.dataSource.filter({});
        }
     
    });

  6. Barry Burton
    Barry Burton avatar
    25 posts
    Member since:
    Jan 2010

    Posted 11 Nov 2014 in reply to Tim Link to this post

    Your post and example code was very helpful Tim.  Many thanks!!
Back to Top
Kendo UI is VS 2017 Ready