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"
  6. date-scrollable="true"
  8. data-editable="true"
  10. data-toolbar="['create', 'save']"
  12. data-columns="[
  14. { 'field': 'UserName'},
  16. { 'field': 'FirstName' },
  18. {'field':'Country'},
  20. ]"
  22. data-bind="source: products,
  24. visible: isVisible"
  26. style="height: 200px"></div>
  27. </div>
  28. </div>

Kendo Remote Binding MVVM script

  1. $(document).ready(create);
  3. var viewModel = kendo.observable({
  5. isVisible: true,
  7. products: new kendo.data.DataSource({
  9. schema: {
  11. model: {
  13. id: "UserID",
  15. fields: {
  17. UserName: {
  18. type: "string"
  19. },
  21. FirstName: {
  22. type: "string"
  23. },
  25. Country: {
  26. type: "string"
  27. }
  29. }
  31. }
  33. },
  35. batch: true,
  37. transport: {
  39. read: {
  41. url: "/api/MultiStepRegistrations",
  43. dataType: "json"
  45. },
  47. parameterMap: function(options, operation) {
  49. if (operation !== "read" && options.models) {
  51. return {
  52. models: kendo.stringify(options.models)
  53. };
  55. }
  57. }
  59. }
  61. })
  63. });
  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"
  23. date-scrollable="true"
  25. data-editable="true"
  27. data-columns="[
  29. { 'field': 'UserName'},
  31. { 'field': 'FirstName' },
  33. {'field':'Country'},
  35. ]"
  37. data-bind="source: products,
  39. visible: isVisible"
  41. style="height: 200px"></div>
  42. </div>
  43. </div>

Kendo Remote Binding MVVM script
  1. $(document).ready(create);
  3. var viewModel = kendo.observable({
  5. isVisible: true,
  7. create: function(e) { //This event will fire on button click
  9. e.preventDefault()
  11. var UserName = $("#Txt_search").val();
  13. var grid = $("div[data-role='grid']").data("kendoGrid");
  15. if (UserName) {
  17. grid.dataSource.query({
  19. page: 1,
  21. pageSize: 20,
  23. filter: {
  25. filters: [
  27. {
  28. field: "UserName",
  29. value: UserName
  30. },
  32. ]
  34. }
  36. })
  38. } else {
  40. alert("Please enter the data")
  42. }
  44. },
  46. products: new kendo.data.DataSource({
  48. schema: {
  50. model: {
  52. id: "UserID",
  54. fields: {
  56. UserName: {
  57. type: "string"
  58. },
  60. FirstName: {
  61. type: "string"
  62. },
  64. Country: {
  65. type: "string"
  66. }
  68. }
  70. }
  72. },
  74. batch: true,
  76. transport: {
  78. read: {
  80. url: "/api/MultiStepRegistrations",
  82. dataType: "json"
  84. },
  86. parameterMap: function(options, operation) {
  88. if (operation !== "read" && options.models) {
  90. return {
  91. models: kendo.stringify(options.models)
  92. };
  94. }
  96. }
  98. }
  100. })
  102. });
  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">
  9. Search by Country/Username
  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"
  29. date-scrollable="true"
  31. data-editable="true"
  33. data-columns="[
  35. { 'field': 'UserName'},
  37. { 'field': 'FirstName' },
  39. {'field':'Country'},
  41. ]"
  43. data-bind="source: products,
  45. visible: isVisible"
  47. style="height: 200px"></div>
  48. </div>
  49. </div>
Kendo Remote Binding MVVM script
  1. $(document).ready(create);
  3. var viewModel = kendo.observable({
  5. isVisible: true,
  7. create: function(e) {
  9. e.preventDefault();
  11. var User_Country = $("#Txt_search_Country_un").val();
  13. var grid = $("div[data-role='grid']").data("kendoGrid");
  15. if (User_Country) {
  17. grid.dataSource.query({
  19. page: 1,
  21. pageSize: 20,
  23. filter: {
  25. logic: "or",
  27. filters: [
  29. {
  30. field: "UserName",
  31. operator: "contains",
  32. value: User_Country
  33. },
  35. {
  36. field: "Country",
  37. opertor: "contains",
  38. value: User_Country
  39. }
  41. ]
  43. }
  45. })
  47. } else {
  49. alert("Please enter the data")
  51. }
  53. },
  55. products: new kendo.data.DataSource({
  57. schema: {
  59. model: {
  61. id: "UserID",
  63. fields: {
  65. UserName: {
  66. type: "string"
  67. },
  69. FirstName: {
  70. type: "string"
  71. },
  73. Country: {
  74. type: "string"
  75. }
  77. }
  79. }
  81. },
  83. batch: true,
  85. transport: {
  87. read: {
  89. url: "/api/MultiStepRegistrations",
  91. dataType: "json"
  93. },
  95. parameterMap: function(options, operation) {
  97. if (operation !== "read" && options.models) {
  99. return {
  100. models: kendo.stringify(options.models)
  101. };
  103. }
  105. }
  107. }
  109. })
  111. });
  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">
  14. Search By Country:
  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"
  35. date-scrollable="true"
  37. data-editable="true"
  39. data-columns="[
  41. { 'field': 'UserName'},
  43. { 'field': 'FirstName' },
  45. {'field':'Country'},
  47. ]"
  49. data-bind="source: products,
  51. visible: isVisible"
  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);
  3. var viewModel = kendo.observable({
  5. isVisible: true,
  7. create: function(e) {
  9. e.preventDefault();
  11. var UserName = $("#Txt_search").val();
  13. var Country = $("#Txt_search_Country").val();
  15. var User_Country = $("#Txt_search_Country_un").val();
  17. var grid = $("div[data-role='grid']").data("kendoGrid");
  19. if (Country || UserName) {
  21. grid.dataSource.query({
  23. page: 1,
  25. pageSize: 20,
  27. filter: {
  29. logic: "or",
  31. filters: [
  33. {
  34. field: "UserName",
  35. operator: "contains",
  36. value: UserName || Country
  37. },
  39. {
  40. field: "Country",
  41. opertor: "contains",
  42. value: Country || UserName
  43. }
  45. ]
  47. }
  49. })
  51. } else {
  53. alert("Please enter the data")
  55. }
  57. },
  59. products: new kendo.data.DataSource({
  61. schema: {
  63. model: {
  65. id: "UserID",
  67. fields: {
  69. UserName: {
  70. type: "string"
  71. },
  73. FirstName: {
  74. type: "string"
  75. },
  77. Country: {
  78. type: "string"
  79. }
  81. }
  83. }
  85. },
  87. batch: true,
  89. transport: {
  91. read: {
  93. url: "/api/MultiStepRegistrations",
  95. dataType: "json"
  97. },
  99. parameterMap: function(options, operation) {
  101. if (operation !== "read" && options.models) {
  103. return {
  104. models: kendo.stringify(options.models)
  105. };
  107. }
  109. }
  111. }
  113. })
  115. });
  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" >
  4. < div id = "example"
  5. style = "margin-top:50px" >
  7. < div class = "demo-section k-header wide" >
  9. < div class = "row" >
  11. < div class = "col-md-6" >
  13. < h4 > Kendo Grid < /h4>
  15. <div id="kGrid" data-role="grid"
  17. date-scrollable="true"
  19. data-editable="false"
  21. data-filterable="{ mode: 'row'}"
  23. data-pageable='true'
  25. data-columns="[
  27. { 'field': 'UserName'},
  29. { 'field': 'FirstName' },
  31. {'field':'Country'},
  33. ]"
  35. data-bind="source: products,
  37. visible: isVisible"
  39. style="height: 250px"></div >
  41. < /div>
  43. </div >
  45. <script>
  46. $(document).ready(function() {
  48. var viewModel = kendo.observable({
  50. isVisible: true,
  52. products: new kendo.data.DataSource({
  54. schema: {
  56. model: {
  58. id: "UserID",
  60. fields: {
  62. UserName: {
  63. type: "string"
  64. },
  66. FirstName: {
  67. type: "string"
  68. },
  70. Country: {
  71. type: "string"
  72. }
  74. }
  76. }
  78. },
  80. batch: true,
  82. transport: {
  84. read: {
  86. url: "/api/MultiStepRegistrations",
  88. dataType: "json"
  90. },
  92. parameterMap: function(options, operation) {
  94. if (operation !== "read" && options.models) {
  96. return {
  97. models: kendo.stringify(options.models)
  98. };
  100. }
  102. }
  104. }
  106. })
  108. });
  110. kendo.bind($("#example"), viewModel);
  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.