Grid search feature

7 Answers 2786 Views
Grid
Yevgeniy
Top achievements
Rank 1
Yevgeniy asked on 19 Feb 2013, 07:37 PM
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 
amrish
Top achievements
Rank 1
commented on 02 Jul 2020, 02:01 PM

HI, 

I'm facing issue , when search anything, searched content disappear with in second.

amrish
Top achievements
Rank 1
commented on 02 Jul 2020, 02:05 PM

I'm applying search on two columns, one code and second one title.

 

title column search is  working fine, but when text matches to Code column value, text disappeared .

 

 

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 20 Feb 2013, 04:41 PM
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!
0
Tim
Top achievements
Rank 1
answered on 10 Jan 2014, 09:35 AM
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
Barry Burton
Top achievements
Rank 1
commented on 11 Nov 2014, 05:22 PM

Your post and example code was very helpful Tim.  Many thanks!!
0
Thomas
Top achievements
Rank 1
answered on 03 Feb 2014, 05:05 PM
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({});
    }
 
});

0
Dhruv
Top achievements
Rank 1
answered on 20 Jun 2017, 03:19 PM

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;
}

 

Dhruv
Top achievements
Rank 1
commented on 20 Jun 2017, 03:28 PM

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.)
0
Thomas
Top achievements
Rank 1
answered on 25 Jul 2019, 03:11 PM

Apologies for resurrecting this thread, but it's the first result for this question on Google and thought I'd share.

I combined the solutions by Thomas and Dhruv to be able to search like in Jquery datatables on all string fields.

// When typing on the search box
$('.searchStringInput').keyup(function () {
    var table = $("#grid").data("kendoGrid");
    var searchText = $(this).val().toUpperCase();
    var searchTextArray = searchText.split(" ");
 
    if (searchText) {
        var orfilter = { logic: "or", filters: [] };
        var andfilter = { logic: "and", filters: [] };
        $.each(searchTextArray, function (i, txt1) {
            if (txt1.trim() == "") {
            }
            else {
                $.each(searchTextArray, function (i, txt2) {
                    if (txt2.trim() == "") {
                    }
                    else {
                        $.each(table.options.dataSource.options.schema.model.fields, function (index, value) {
                            if (value.field && table.options.dataSource.options.schema.model.fields[value.field].type == "string") {
                                var filter = {
                                    field: value.field,
                                    operator: "contains",
                                    value: txt2
                                }
                                orfilter.filters.push(filter);
                            }
                        }); //each
                        andfilter.filters.push(orfilter);
                        orfilter = { logic: "or", filters: [] };
                    }
                }); //each
            }
        }); // each
        table.dataSource.filter(andfilter);
    }
    else {
        table.dataSource.filter({});
    }
});
0
Alex Hajigeorgieva
Telerik team
answered on 29 Jul 2019, 07:01 AM
Hi, Thomas,

Thank you very much for the provided solution.

If you are not using serverfiltering, you can filter the entire grid for numbers, dates, strings and booleans as shown in this how-to article rom our knowledge base:

https://docs.telerik.com/kendo-ui/knowledge-base/filter-all-columns-with-one-textbox

In addition to that, I am pleased to let you know this has been a very popular feature request and we have created it as a toolbar feature. It is due to be released in R3 scheduled or 18th September 2019.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Alex Hajigeorgieva
Telerik team
answered on 06 Jul 2020, 07:11 AM

Hello, Amrish,

It is not very clear if you are using the built-in search panel or the knowledge base article that we have discussed:

https://demos.telerik.com/kendo-ui/grid/search-panel

If you are using the built-in search panel over two fields, can you use the API live example to show us the behaviour you are seeing? You can click on the Open In Dojo link and add the sample fields and data and send us the Dojo url:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/search.fields

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Yevgeniy
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Tim
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Dhruv
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or