Grid search feature

7 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
    2886 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. 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
  4. 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({});
        }
     
    });

  5. 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!!
  6. Dhruv
    Dhruv avatar
    3 posts
    Member since:
    Oct 2016

    Posted 20 Jun Link to this post

    I know this is a old post. But i wanted to provide this for anyone coming back here. I needed something a little more generic, This takes all string fields in the grid and searchs against them. I put this function in a global js file and now anytime a grid is loaded on the screen it dynamically adds a search box and searches all string fields on the grid. Thanks @Tim for the initial code which I based my solution off of.

     

    //Global Grid Search
    $(document).ready(function () {
        //change event
        $('.k-grid-add').after('<input type="search" id="searchbox" class="k-autocomplete k-input pull-right" placeholder="Search...">');
        $("#searchbox").keyup(function () {
            var val = $('#searchbox').val();
            var grid = $("#grid").data("kendoGrid");
            if (val) {
                var filters = []
                $.each(grid.options.dataSource.fields, function (index, value) {
                    if (value.field && grid.options.dataSource.schema.model.fields[value.field].type == "string") {
                        var filter = {
                            field: value.field,
                            operator: "contains",
                            value: val
                        }
                        filters.push(filter);
                    }
                })
                $("#grid").data("kendoGrid").dataSource.filter({
                    logic: "or",
                    filters: filters
                });
            } else {
                $("#grid").data("kendoGrid").dataSource.filter({
                    logic: "or",
                    filters: []
                });
            }
        });
    });

     

    Please note that I use kendo mvc scaffolder and it names all grids "grid" by default and not "Grid" as shown in @Tim's code.

    You may need to update the line: var grid = $("#grid").data("kendoGrid"); to match your grid name.

    Since I use JS to inject the search box you do not need to make any changes to your .cshtml which is very nice and generic.

     

    CSS Below if you want it: 

    #searchbox {
    height: 25px;
    margin-right:15px;
    padding-left:5px;
    }

     

  7. Dhruv
    Dhruv avatar
    3 posts
    Member since:
    Oct 2016

    Posted 20 Jun in reply to Dhruv Link to this post

    Forgot to mention you need to have the default "Add new record" button on the toolbar as thats how I inject the search bar. If you don't have a search bar then change line 4 to something more appropriate. 

    Here is the default cshtml toolbar i'm attaching to (line 9-11)...

    01.@(Html.Kendo().Grid<SecurityAccessApplication.Models.State>()
    02.      .Name("grid")
    03.      .Columns(columns =>
    04.      {
    05.        columns.Bound(c => c.Abbreviation);
    06.        columns.Bound(c => c.Name);
    07.        columns.Command(command => { command.Edit(); }).Width(180);
    08.      })
    09.      .ToolBar(toolbar => {
    10.            toolbar.Create();
    11.      })
    12.      .Editable(editable => editable.Mode(GridEditMode.InLine))
    13.      .Pageable()
    14.      .Filterable()
    15.      .Scrollable()
    16.      .DataSource(dataSource => dataSource
    17.          .Ajax()
    18.          .Model(model => model.Id(p => p.ID))
    19.          .Read(read => read.Action("States_Read", "State"))
    20.          .Create(create => create.Action("States_Create", "State"))
    21.          .Update(update => update.Action("States_Update", "State"))
    22.      )
    23.)
Back to Top