Search box kendo grid

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

    Posted 18 May 2016 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
    204 posts

    Posted 18 May 2016 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. Samy
    Samy avatar
    1 posts
    Member since:
    Mar 2017

    Posted 29 Apr Link to this post

    Hello, I have this following code and the search toolbar doesn't work

    <!DOCTYPE html>
    <html>
    <head>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/kendo/2017.1.223/kendo.all.min.js"></script>
        <script src="~/Scripts/knockout-3.4.2.js"></script>
        <script src="~/Scripts/knockout-kendo.js"></script>
        <script src="~/Scripts/knockout-kendo.min.js"></script>



        <link rel="stylesheet" href="~/Content/kendo/2017.1.223/kendo.common.min.css" />
        <link rel="stylesheet" href="~/Content/kendo/2017.1.223/kendo.default.min.css" />
        <link rel="stylesheet" href="~/Content/kendo/2017.1.223/kendo.blueopal.min.css" />
    </head>

    <body>
      
            <script id="template" type="text/x-kendo-template">
                <label class="search-label" for="searchBox">Search Ouvrage:</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>

            <div id="grid" data-bind="kendoGrid"> </div>

            <script>
                var categories = [];
                var auteurs = [];
                var ouvrages = [];

                function Remplir_categories() {//Grid
                    $.ajax({
                        url: "http://localhost:31871/api/CategorieSets",
                        dataType: "json",
                        async: false,
                        success: function (result) {
                            for (var i = 0; i < result.length; i++) {
                                categories.push({ value: result[i]["Id"], text: result[i]["Nom"] });
                            }
                        },
                    });
                }
                Remplir_categories();
                function Remplir_auteurs() {//Grid
                    $.ajax({
                        url: "http://localhost:31871/api/AuteurSets",
                        dataType: "json",
                        async: false,
                        success: function (result) {
                            for (var i = 0; i < result.length; i++) {
                                auteurs.push({ value: result[i]["Id"], text: result[i]["Nom"] });
                            }
                        },
                    });
                }
                Remplir_auteurs();

                /* function auteurDropDownEditor(container, options) {

                     container.kendoDropDownList({
                         autoBind: true,
                         dataSource: auteurs,
                         dataTextField: "text",
                         dataValueField: "value",

                     });

                 };
                /* function categoryDropDownEditor(container, options) {

                     container.kendoDropDownList({
                         autoBind: true,
                         dataSource: categories,
                         dataTextField: "text",
                         dataValueField: "value"


                     });
                     return categories.value
                 };*/
                var OuvragesSetsDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:31871/api/OuvrageSets",
                            dataType: "json"

                        },
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Id: { editable: false, type: "number" },
                                    Titre: { validation: { required: true } },
                                    Description: { validation: { required: true } },
                                    Prix: { validation: { required: true } },
                                    Date_de_publication: { validation: { required: true } },
                                    Image: { validation: { required: true } },
                                    AuteurId: { validation: { required: true } },
                                    CategorieId: { validation: { required: true } },
                                    Auteur: { validation: { required: true } }
                                }
                            }
                        }
                    }
                });
                /*  function Remplir_ouvrages() {//Grid
                       $.ajax({
                           url: "http://localhost:31871/api/OuvrageSets",
                           dataType: "json",
                           async: false,
                           success: function (result) {
                               for (var i = 0; i < result.length; i++) {
                                   if (result[i]["Titre"] == "test") {
                                       ouvrages.push(result[i]);
                                   }
                               }
                               OuvragesSetsDataSource = ouvrages
                           },
                       });

                   }*/
                // Remplir_ouvrages();
                //
                $("#btnSearch").click(function () {
                    var searchValue = $('#searchBox').val();

                    //Setting the filter of the Grid
                    kendoGrid.dataSource.filter({
                        filters: [
                            {
                                field: "Titre",
                                operator: "contains",
                                value: searchValue
                            }

                        ]
                    });
                });

                //Clearing the filter
                $("#btnReset").click(function () {
                    $("#grid").data("kendoGrid").dataSource.filter({});
                });

                var ViewModel = function () {
                    var self = this;
                    this.items = ko.observableArray([]);
                  

                    ko.bindingHandlers.kendoGrid.options = {
                        groupable: true,
                        scrollable: true,
                        toolbar: [
                            { template: kendo.template($("#template").html()) }
                        ],
                        sortable: true,
                        pageable: true,
                        
                        dataSource: OuvragesSetsDataSource,
                        height: 500,
                        columns: [
                            {
                                field: "Id",
                                title: "Id"
                            },
                            {
                                field: "Titre",
                                title: "Titre"
                            },
                            {
                                field: "Description",
                                title: "Description"
                            },
                            {
                                field: "Date_de_publication",
                                title: "Date_de_publication"
                            },
                            {
                                field: "Prix",
                                title: "Prix"
                            },
                            {
                                field: "Image",
                                title: "Image",
                            },

                            {
                                field: "AuteurId",
                                title: "Auteur",
                                values: auteurs,
                                dataTextField: "text",
                                dataValueField: "value"

                            },
                            {
                                field: "CategorieId",
                                title: "Categorie",
                                values: categories,
                                dataTextField: "text",
                                dataValueField: "value"
                            },

                            {
                                command: ["add"]
                            }
                        ]

                    };



                }
                ko.applyBindings(new ViewModel());
            </script>
      
    </body>


    </html>

  4. Stefan
    Admin
    Stefan avatar
    1257 posts

    Posted 03 May Link to this post

    Hello Samy,

    Please have in mind that based on the provided code, the search button should work only on the Titre column, as the filter is set only for that column:

    filters: [
        {
            field: "Titre",
            operator: "contains",
            value: searchValue
        }
     
    ]

    Also, please have in mind that the filtering will not work as expected for the DropDownList columns as the filter is made based on the value, but the Grid is displaying the text.

    If additional assistance is needed, please provide a fully runnable example, or modify the one send by my colleague and I will gladly assist.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top