Post
Ask Question

Internal & External Search/Filter in Kendo UI Grid

Introduction

This article explains how to do the external and internal Search/Filter in Kendo Grid UI.

Description

Before going through this article please refer to my previous article MultiStep Registration Form With Kendo UI MVVM Pattern Using Web API 2 and EF5 because I will use the same Web API service and the database table to explain this external and internal search in Kendo Grid UI.

There are two possibilities to do the search/filtration in the Kendo Grid, they are:
  1.    External Search 
  2.    Internal Search 
External Search

This is my table structure that is obtained as the result from the article MultiStep Registration Form With Kendo UI MVVM Pattern Using Web API 2 and EF 5,
 
    
 
                                                                                 Figure 1 
 
 The following is the HTTP GET  Web API service code that I will use:
  1.  // GET: api/MultiStepRegistrations   
  2. public IQueryable<RegistrationMultiStep> GetMultiPathRegistration()  
  3. {  
  4.    return db.MultiPathRegistration;  
  5. } 
Check the service in POSTMAN/Fiddler.
 
 
                                                              Figure 2
 
Design the Kendo Grid to display the values that is my SQL table.

HTML Design
  1. <div class="row">  
  2.     <div class="col-md-6">  
  3.         <h4>Kendo Grid</h4>  
  4.         <div id="kGrid" data-role="grid"  
  5.   
  6.             date-scrollable="true"  
  7.   
  8.             data-editable="true"  
  9.   
  10.             data-toolbar="['create', 'save']"  
  11.   
  12.             data-columns="[  
  13.   
  14.             { 'field': 'UserName'},  
  15.   
  16.             { 'field': 'FirstName' },  
  17.   
  18.             {'field':'Country'},  
  19.   
  20.             ]"  
  21.   
  22.             data-bind="source: products,  
  23.   
  24.             visible: isVisible"  
  25.   
  26.             style="height: 200px"></div>  
  27.     </div>  
  28. </div> 

Kendo Remote Binding MVVM script

  1. $(document).ready(create);  
  2.   
  3. var viewModel = kendo.observable({  
  4.   
  5.     isVisible: true,  
  6.   
  7.     products: new kendo.data.DataSource({  
  8.   
  9.         schema: {  
  10.   
  11.             model: {  
  12.   
  13.                 id: "UserID",  
  14.   
  15.                 fields: {  
  16.   
  17.                     UserName: {  
  18.                         type: "string"  
  19.                     },  
  20.   
  21.                     FirstName: {  
  22.                         type: "string"  
  23.                     },  
  24.   
  25.                     Country: {  
  26.                         type: "string"  
  27.                     }  
  28.   
  29.                 }  
  30.   
  31.             }  
  32.   
  33.         },  
  34.   
  35.         batch: true,  
  36.   
  37.         transport: {  
  38.   
  39.             read: {  
  40.   
  41.                 url: "/api/MultiStepRegistrations",  
  42.   
  43.                 dataType: "json"  
  44.   
  45.             },  
  46.   
  47.             parameterMap: function(options, operation) {  
  48.   
  49.                 if (operation !== "read" && options.models) {  
  50.   
  51.                     return {  
  52.                         models: kendo.stringify(options.models)  
  53.                     };  
  54.   
  55.                 }  
  56.   
  57.             }  
  58.   
  59.         }  
  60.   
  61.     })  
  62.   
  63. });  
  64.   
  65. kendo.bind($("#example"), viewModel); 

Then the Kendo Grid in the browser is as shown in Figure 3.


                                                   Figure 3

Let us do the external search/filter in the Kendo Grid based on:

  1.    UserName
  2.    FirstName/UserName

Search based on UserName.

HTML design

  1. <div class="container">  
  2.     <div id="example" style="margin-top:50px">  
  3.         <div class="demo-section k-header wide">  
  4.             <div class="row">  
  5.                 <div class="col-md-3"> Search By UserName:</div>  
  6.                 <div class="col-md-3">  
  7.                     <input id="Txt_search" type="text" class='k-textbox' data-bind="value:Username" placeholder="Enter User Name" />  
  8.                 </div>  
  9.             </div>  
  10.             <br />  
  11.             <div class="row">  
  12.                 <div class="col-md-3">  
  13.                     <button id="create" data-bind="click: create" class="k-button">Search</button>  
  14.                 </div>  
  15.             </div>  
  16.             <br />  
  17.             <br />  
  18.             <div class="row">  
  19.                 <div class="col-md-6">  
  20.                     <h4>Kendo Grid</h4>  
  21.                     <div id="kGrid" data-role="grid"  
  22.   
  23.          date-scrollable="true"  
  24.   
  25.          data-editable="true"  
  26.   
  27.          data-columns="[  
  28.   
  29.          { 'field': 'UserName'},  
  30.   
  31.          { 'field': 'FirstName' },  
  32.   
  33.          {'field':'Country'},  
  34.   
  35.          ]"  
  36.   
  37.          data-bind="source: products,  
  38.   
  39.          visible: isVisible"  
  40.   
  41.          style="height: 200px"></div>  
  42.     </div>  
  43. </div> 

Kendo Remote Binding MVVM script
  1. $(document).ready(create);  
  2.   
  3. var viewModel = kendo.observable({  
  4.   
  5.     isVisible: true,  
  6.   
  7.     create: function(e) { //This event will fire on button click  
  8.   
  9.         e.preventDefault()  
  10.   
  11.         var UserName = $("#Txt_search").val();  
  12.   
  13.         var grid = $("div[data-role='grid']").data("kendoGrid");  
  14.   
  15.         if (UserName) {  
  16.   
  17.             grid.dataSource.query({  
  18.   
  19.                 page: 1,  
  20.   
  21.                 pageSize: 20,  
  22.   
  23.                 filter: {  
  24.   
  25.                     filters: [  
  26.   
  27.                     {  
  28.                         field: "UserName",  
  29.                         value: UserName  
  30.                     },  
  31.   
  32.                     ]  
  33.   
  34.                 }  
  35.   
  36.             })  
  37.   
  38.         } else {  
  39.   
  40.             alert("Please enter the data")  
  41.   
  42.         }  
  43.   
  44.     },  
  45.   
  46.     products: new kendo.data.DataSource({  
  47.   
  48.         schema: {  
  49.   
  50.             model: {  
  51.   
  52.                 id: "UserID",  
  53.   
  54.                 fields: {  
  55.   
  56.                     UserName: {  
  57.                         type: "string"  
  58.                     },  
  59.   
  60.                     FirstName: {  
  61.                         type: "string"  
  62.                     },  
  63.   
  64.                     Country: {  
  65.                         type: "string"  
  66.                     }  
  67.   
  68.                 }  
  69.   
  70.             }  
  71.   
  72.         },  
  73.   
  74.         batch: true,  
  75.   
  76.         transport: {  
  77.   
  78.             read: {  
  79.   
  80.                 url: "/api/MultiStepRegistrations",  
  81.   
  82.                 dataType: "json"  
  83.   
  84.             },  
  85.   
  86.             parameterMap: function(options, operation) {  
  87.   
  88.                 if (operation !== "read" && options.models) {  
  89.   
  90.                     return {  
  91.                         models: kendo.stringify(options.models)  
  92.                     };  
  93.   
  94.                 }  
  95.   
  96.             }  
  97.   
  98.         }  
  99.   
  100.     })  
  101.   
  102. });  
  103.   
  104. kendo.bind($("#example"), viewModel); 
Design in the browser
 
 
                                              Figure 4
 
   
 
                                          Figure 5
 
Search based on UserName/Country.

HTML Design

  1. <body>  
  2.     <div class="container">  
  3.         <div id="example" style="margin-top:50px">  
  4.             <div class="demo-section k-header wide">  
  5.                 <br />  
  6.                 <div class="row">  
  7.                     <div class="col-md-3">  
  8.   
  9. Search by Country/Username  
  10.   
  11. </div>  
  12.                     <div class="col-md-3">  
  13.                         <input id="Txt_search_Country_un" type="text" class='k-textbox' data-bind="value:CUN" placeholder="Country or UserName" />  
  14.                     </div>  
  15.                 </div>  
  16.                 <br />  
  17.                 <div class="row">  
  18.                     <div class="col-md-3">  
  19.                         <button id="create" data-bind="click: create" class="k-button">Search</button>  
  20.                     </div>  
  21.                 </div>  
  22.                 <br />  
  23.                 <br />  
  24.                 <div class="row">  
  25.                     <div class="col-md-6">  
  26.                         <h4>Kendo Grid</h4>  
  27.                         <div id="kGrid" data-role="grid"  
  28.   
  29.          date-scrollable="true"  
  30.   
  31.          data-editable="true"  
  32.   
  33.          data-columns="[  
  34.   
  35.          { 'field': 'UserName'},  
  36.   
  37.          { 'field': 'FirstName' },  
  38.   
  39.          {'field':'Country'},  
  40.   
  41.          ]"  
  42.   
  43.          data-bind="source: products,  
  44.   
  45.          visible: isVisible"  
  46.   
  47.          style="height: 200px"></div>  
  48.     </div>  
  49. </div> 
Kendo Remote Binding MVVM script
  1. $(document).ready(create);  
  2.   
  3. var viewModel = kendo.observable({  
  4.   
  5.     isVisible: true,  
  6.   
  7.     create: function(e) {  
  8.   
  9.         e.preventDefault();  
  10.   
  11.         var User_Country = $("#Txt_search_Country_un").val();  
  12.   
  13.         var grid = $("div[data-role='grid']").data("kendoGrid");  
  14.   
  15.         if (User_Country) {  
  16.   
  17.             grid.dataSource.query({  
  18.   
  19.                 page: 1,  
  20.   
  21.                 pageSize: 20,  
  22.   
  23.                 filter: {  
  24.   
  25.                     logic: "or",  
  26.   
  27.                     filters: [  
  28.   
  29.                     {  
  30.                         field: "UserName",  
  31.                         operator: "contains",  
  32.                         value: User_Country  
  33.                     },  
  34.   
  35.                     {  
  36.                         field: "Country",  
  37.                         opertor: "contains",  
  38.                         value: User_Country  
  39.                     }  
  40.   
  41.                     ]  
  42.   
  43.                 }  
  44.   
  45.             })  
  46.   
  47.         } else {  
  48.   
  49.             alert("Please enter the data")  
  50.   
  51.         }  
  52.   
  53.     },  
  54.   
  55.     products: new kendo.data.DataSource({  
  56.   
  57.         schema: {  
  58.   
  59.             model: {  
  60.   
  61.                 id: "UserID",  
  62.   
  63.                 fields: {  
  64.   
  65.                     UserName: {  
  66.                         type: "string"  
  67.                     },  
  68.   
  69.                     FirstName: {  
  70.                         type: "string"  
  71.                     },  
  72.   
  73.                     Country: {  
  74.                         type: "string"  
  75.                     }  
  76.   
  77.                 }  
  78.   
  79.             }  
  80.   
  81.         },  
  82.   
  83.         batch: true,  
  84.   
  85.         transport: {  
  86.   
  87.             read: {  
  88.   
  89.                 url: "/api/MultiStepRegistrations",  
  90.   
  91.                 dataType: "json"  
  92.   
  93.             },  
  94.   
  95.             parameterMap: function(options, operation) {  
  96.   
  97.                 if (operation !== "read" && options.models) {  
  98.   
  99.                     return {  
  100.                         models: kendo.stringify(options.models)  
  101.                     };  
  102.   
  103.                 }  
  104.   
  105.             }  
  106.   
  107.         }  
  108.   
  109.     })  
  110.   
  111. });  
  112.   
  113. kendo.bind($("#example"), viewModel); 
The design in the browser
 
   
                                                   Figure 6 
 
   
      
                                                      Figure 7 
 
       
                                                Figure 8 
 
 
Now let we combine both  Search Based on UserName and  Search Based on Country together.
 
HTML Design
  1. <div class="container">  
  2.     <div id="example" style="margin-top:50px">  
  3.         <div class="demo-section k-header wide">  
  4.             <div class="row">  
  5.                 <div class="col-md-3"> Search By UserName:</div>  
  6.                 <div class="col-md-3">  
  7.                     <input id="Txt_search" type="text" class='k-textbox' data-bind="value:Username" placeholder="Enter User Name" />  
  8.                 </div>  
  9.             </div>  
  10.             <br />  
  11.             <div class="row">  
  12.                 <div class="col-md-3">  
  13.   
  14. Search By Country:  
  15.   
  16. </div>  
  17.                 <div class="col-md-3">  
  18.                     <input id="Txt_search_Country" type="text" class='k-textbox' data-bind="value: Country" placeholder="Country" />  
  19.                 </div>  
  20.             </div>  
  21.             <br />  
  22.             <br />  
  23.             <div class="row">  
  24.                 <div class="col-md-3">  
  25.                     <button id="create" data-bind="click: create" class="k-button">Search</button>  
  26.                 </div>  
  27.             </div>  
  28.             <br />  
  29.             <br />  
  30.             <div class="row">  
  31.                 <div class="col-md-6">  
  32.                     <h4>Kendo Grid</h4>  
  33.                     <div id="kGrid" data-role="grid"  
  34.   
  35.          date-scrollable="true"  
  36.   
  37.          data-editable="true"  
  38.   
  39.          data-columns="[  
  40.   
  41.          { 'field': 'UserName'},  
  42.   
  43.          { 'field': 'FirstName' },  
  44.   
  45.          {'field':'Country'},  
  46.   
  47.          ]"  
  48.   
  49.          data-bind="source: products,  
  50.   
  51.          visible: isVisible"  
  52.   
  53.          style="height: 200px"></div>  
  54.     </div>  
  55. </div> 
Now to observe the benefit of the || (OR operator) in the Filter query.
 
Kendo Remote Binding MVVM script
  1. $(document).ready(create);  
  2.   
  3. var viewModel = kendo.observable({  
  4.   
  5.     isVisible: true,  
  6.   
  7.     create: function(e) {  
  8.   
  9.         e.preventDefault();  
  10.   
  11.         var UserName = $("#Txt_search").val();  
  12.   
  13.         var Country = $("#Txt_search_Country").val();  
  14.   
  15.         var User_Country = $("#Txt_search_Country_un").val();  
  16.   
  17.         var grid = $("div[data-role='grid']").data("kendoGrid");  
  18.   
  19.         if (Country || UserName) {  
  20.   
  21.             grid.dataSource.query({  
  22.   
  23.                 page: 1,  
  24.   
  25.                 pageSize: 20,  
  26.   
  27.                 filter: {  
  28.   
  29.                     logic: "or",  
  30.   
  31.                     filters: [  
  32.   
  33.                     {  
  34.                         field: "UserName",  
  35.                         operator: "contains",  
  36.                         value: UserName || Country  
  37.                     },  
  38.   
  39.                     {  
  40.                         field: "Country",  
  41.                         opertor: "contains",  
  42.                         value: Country || UserName  
  43.                     }  
  44.   
  45.                     ]  
  46.   
  47.                 }  
  48.   
  49.             })  
  50.   
  51.         } else {  
  52.   
  53.             alert("Please enter the data")  
  54.   
  55.         }  
  56.   
  57.     },  
  58.   
  59.     products: new kendo.data.DataSource({  
  60.   
  61.         schema: {  
  62.   
  63.             model: {  
  64.   
  65.                 id: "UserID",  
  66.   
  67.                 fields: {  
  68.   
  69.                     UserName: {  
  70.                         type: "string"  
  71.                     },  
  72.   
  73.                     FirstName: {  
  74.                         type: "string"  
  75.                     },  
  76.   
  77.                     Country: {  
  78.                         type: "string"  
  79.                     }  
  80.   
  81.                 }  
  82.   
  83.             }  
  84.   
  85.         },  
  86.   
  87.         batch: true,  
  88.   
  89.         transport: {  
  90.   
  91.             read: {  
  92.   
  93.                 url: "/api/MultiStepRegistrations",  
  94.   
  95.                 dataType: "json"  
  96.   
  97.             },  
  98.   
  99.             parameterMap: function(options, operation) {  
  100.   
  101.                 if (operation !== "read" && options.models) {  
  102.   
  103.                     return {  
  104.                         models: kendo.stringify(options.models)  
  105.                     };  
  106.   
  107.                 }  
  108.   
  109.             }  
  110.   
  111.         }  
  112.   
  113.     })  
  114.   
  115. });  
  116.   
  117. kendo.bind($("#example"), viewModel); 
The result in the browser
 
   
                                             Figure 9 
 
  
                                             Figure 10  
 
   
                                             Figure 11
 
 
Internal Search 
 
Now we will see the magic of Kendo built-in internal filtration functionality using the data-filterable property that is simple to implement and more powerful.

The HTML Design and MVVM Script

  1. < div class = "container"  
  2. id = "example" >  
  3.   
  4. < div id = "example"  
  5. style = "margin-top:50px" >  
  6.   
  7. < div class = "demo-section k-header wide" >  
  8.   
  9. < div class = "row" >  
  10.   
  11. < div class = "col-md-6" >  
  12.   
  13. < h4 > Kendo Grid < /h4>  
  14.   
  15. <div id="kGrid" data-role="grid"  
  16.   
  17. date-scrollable="true"  
  18.   
  19. data-editable="false"  
  20.   
  21. data-filterable="{ mode: 'row'}"  
  22.   
  23. data-pageable='true'  
  24.   
  25. data-columns="[  
  26.   
  27. { 'field': 'UserName'},  
  28.   
  29. { 'field': 'FirstName' },  
  30.   
  31. {'field':'Country'},  
  32.   
  33. ]"  
  34.   
  35. data-bind="source: products,  
  36.   
  37. visible: isVisible"  
  38.   
  39. style="height: 250px"></div >  
  40.   
  41. < /div>  
  42.   
  43. </div >  
  44.   
  45.   <script>
  46. $(document).ready(function() {  
  47.   
  48.     var viewModel = kendo.observable({  
  49.   
  50.         isVisible: true,  
  51.   
  52.         products: new kendo.data.DataSource({  
  53.   
  54.             schema: {  
  55.   
  56.                 model: {  
  57.   
  58.                     id: "UserID",  
  59.   
  60.                     fields: {  
  61.   
  62.                         UserName: {  
  63.                             type: "string"  
  64.                         },  
  65.   
  66.                         FirstName: {  
  67.                             type: "string"  
  68.                         },  
  69.   
  70.                         Country: {  
  71.                             type: "string"  
  72.                         }  
  73.   
  74.                     }  
  75.   
  76.                 }  
  77.   
  78.             },  
  79.   
  80.             batch: true,  
  81.   
  82.             transport: {  
  83.   
  84.                 read: {  
  85.   
  86.                     url: "/api/MultiStepRegistrations",  
  87.   
  88.                     dataType: "json"  
  89.   
  90.                 },  
  91.   
  92.                 parameterMap: function(options, operation) {  
  93.   
  94.                     if (operation !== "read" && options.models) {  
  95.   
  96.                         return {  
  97.                             models: kendo.stringify(options.models)  
  98.                         };  
  99.   
  100.                     }  
  101.   
  102.                 }  
  103.   
  104.             }  
  105.   
  106.         })  
  107.   
  108.     });  
  109.   
  110.     kendo.bind($("#example"), viewModel);  
  111.   
  112. }); 
  113. </script>
The result in the browser
 
    
                                          Figure 12 
 
    
                                          Figure 13 
 
   
                                          Figure 14 
 
  
                                          Figure 15 
 
    
                                       Figure 16 
 
 
Conclusion
 
From this article we came to understand how to perform the external and internal Search/Filter in Kendo UI and the use of the filterable property in the Kendo Grid that makes the Kendo UI more flexible to perform the filter functionality.

I have attached the working example with this article, please have a look at it.

I hope that you have enjoyed this article.

Thank you, enjoy coding.


Similar Articles