|
| 1 | +--- |
| 2 | +title: Iterating and Checking Items in Kendo UI for jQuery Grid FilterMultiCheck |
| 3 | +description: Learn how to programmatically iterate through and check items in a Kendo UI for jQuery Grid FilterMultiCheck component. |
| 4 | +type: how-to |
| 5 | +page_title: Programmatically Check Items in Kendo UI for jQuery Grid FilterMultiCheck |
| 6 | +slug: iterate-check-items-kendo-ui-jquery-grid-filtermulticheck |
| 7 | +tags: kendo, ui, jquery, grid, filtermulticheck, iterate, check, items |
| 8 | +res_type: kb |
| 9 | +ticketid: 1682081 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | +<tbody> |
| 16 | +<tr> |
| 17 | +<td>Product</td> |
| 18 | +<td>Kendo UI for jQuery Grid</td> |
| 19 | +</tr> |
| 20 | +<tr> |
| 21 | +<td>Version</td> |
| 22 | +<td>2025.1.227</td> |
| 23 | +</tr> |
| 24 | +</tbody> |
| 25 | +</table> |
| 26 | + |
| 27 | +## Description |
| 28 | + |
| 29 | +It is necessary to iterate through a Kendo UI for jQuery Grid FilterMultiCheck component and manually check items based on their text or value. How can this be achieved since Kendo UI does not provide a built-in method for directly modifying the selected checkboxes within the FilterMultiCheck? |
| 30 | + |
| 31 | +This knowledge base article also answers the following questions: |
| 32 | +- How to programmatically select checkboxes in a Kendo UI for jQuery Grid FilterMultiCheck? |
| 33 | +- How to automatically check specific items in FilterMultiCheck based on their values? |
| 34 | +- How can I manipulate the checked state of items in a FilterMultiCheck component? |
| 35 | + |
| 36 | +## Solution |
| 37 | + |
| 38 | +To iterate and manually check items in a Kendo UI for jQuery Grid FilterMultiCheck component based on their text or value, follow the steps outlined below. Note that while Kendo UI does not support direct manipulation of checkboxes within the FilterMultiCheck, you can achieve the desired result by using jQuery to target the checkboxes after the filter menu has rendered. This can be done in the [`filterMenuInit`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/filtermenuinit) event handler. |
| 39 | + |
| 40 | +1. Subscribe to the [`filterMenuInit`](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/filtermenuinit) event of the Kendo UI for jQuery Grid. |
| 41 | + |
| 42 | +2. Verify the field being filtered matches your criteria (e.g., 'UnitPrice' or 'UnitsInStock'). |
| 43 | + |
| 44 | +3. Use jQuery to find the filter menu for the specific field and obtain a reference to it. |
| 45 | + |
| 46 | +4. Define the values that should be checked within the filter menu. |
| 47 | + |
| 48 | +5. Loop through each checkbox in the filter menu and check those whose associated label values match the predefined values. |
| 49 | + |
| 50 | +```javascript |
| 51 | +filterMenuInit: function (e) { |
| 52 | + // Check if the field being filtered is either 'UnitPrice' or 'UnitsInStock' |
| 53 | + if (e.field === "UnitPrice" || e.field === "UnitsInStock") { |
| 54 | + // Find the filter menu for the specific field (UnitPrice or UnitsInStock) using the header's data-field attribute |
| 55 | + let filterMenu = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck"); |
| 56 | + // Define an array of values that should be checked in the filter menu |
| 57 | + let valuesToCheck = [18, 40]; |
| 58 | + |
| 59 | + if (filterMenu) { |
| 60 | + // Loop through each checkbox input inside the filter menu |
| 61 | + $(".k-multicheck-wrap input[type='checkbox']").each( |
| 62 | + function () { |
| 63 | + // Get the label value next to the checkbox, remove the dollar sign, and convert it to a float |
| 64 | + var label = parseFloat( |
| 65 | + $(this).parent().next("span").text().replace("$", ""), |
| 66 | + ); |
| 67 | + |
| 68 | + // Check if the label value is included in the 'valuesToCheck' array |
| 69 | + if (valuesToCheck.includes(label)) { |
| 70 | + $(this).prop("checked", true); |
| 71 | + } |
| 72 | + }, |
| 73 | + ); |
| 74 | + } |
| 75 | + } |
| 76 | + }, |
| 77 | +``` |
| 78 | + |
| 79 | +For a practical implementation, refer to the below runnable demo: [Kendo UI for jQuery Grid FilterMultiCheck Demo] |
| 80 | + |
| 81 | +```dojo |
| 82 | +<div id="client"></div> |
| 83 | + <script> |
| 84 | + $(document).ready(function () { |
| 85 | + var telerikWebServiceBase = |
| 86 | + "https://demos.telerik.com/kendo-ui/service/"; |
| 87 | + $("#client").kendoGrid({ |
| 88 | + dataSource: { |
| 89 | + transport: { |
| 90 | + read: { |
| 91 | + url: telerikWebServiceBase + "/Products", |
| 92 | + dataType: "jsonp", |
| 93 | + }, |
| 94 | + parameterMap: function (options, operation) { |
| 95 | + if (operation !== "read" && options.models) { |
| 96 | + return { models: kendo.stringify(options.models) }; |
| 97 | + } |
| 98 | + }, |
| 99 | + }, |
| 100 | + batch: true, |
| 101 | + pageSize: 20, |
| 102 | + schema: { |
| 103 | + model: { |
| 104 | + id: "ProductID", |
| 105 | + fields: { |
| 106 | + ProductID: { editable: false, nullable: true }, |
| 107 | + ProductName: { validation: { required: true } }, |
| 108 | + UnitPrice: { |
| 109 | + type: "number", |
| 110 | + validation: { required: true, min: 1 }, |
| 111 | + }, |
| 112 | + Discontinued: { type: "boolean" }, |
| 113 | + UnitsInStock: { |
| 114 | + type: "number", |
| 115 | + validation: { min: 0, required: true }, |
| 116 | + }, |
| 117 | + }, |
| 118 | + }, |
| 119 | + }, |
| 120 | + }, |
| 121 | + filterMenuInit: function (e) { |
| 122 | + // Check if the field being filtered is either 'UnitPrice' or 'UnitsInStock' |
| 123 | + if (e.field === "UnitPrice" || e.field === "UnitsInStock") { |
| 124 | + // Find the filter menu for the specific field (UnitPrice or UnitsInStock) using the header's data-field attribute |
| 125 | + let filterMenu = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck"); |
| 126 | + // Define an array of values that should be checked in the filter menu |
| 127 | + let valuesToCheck = [18, 40]; |
| 128 | +
|
| 129 | + if (filterMenu) { |
| 130 | + // Loop through each checkbox input inside the filter menu |
| 131 | + $(".k-multicheck-wrap input[type='checkbox']").each( |
| 132 | + function () { |
| 133 | + // Get the label value next to the checkbox, remove the dollar sign, and convert it to a float |
| 134 | + var label = parseFloat( |
| 135 | + $(this).parent().next("span").text().replace("$", ""), |
| 136 | + ); |
| 137 | +
|
| 138 | + // Check if the label value is included in the 'valuesToCheck' array |
| 139 | + if (valuesToCheck.includes(label)) { |
| 140 | + $(this).prop("checked", true); |
| 141 | + } |
| 142 | + }, |
| 143 | + ); |
| 144 | + } |
| 145 | + } |
| 146 | + }, |
| 147 | + filterable: true, |
| 148 | + pageable: true, |
| 149 | + height: 550, |
| 150 | + toolbar: ["create", "save", "cancel"], |
| 151 | + columns: [ |
| 152 | + { field: "ProductName", filterable: { multi: true } }, |
| 153 | + { |
| 154 | + field: "UnitPrice", |
| 155 | + title: "Unit Price", |
| 156 | + format: "{0:c}", |
| 157 | + width: 120, |
| 158 | + filterable: { multi: true }, |
| 159 | + }, |
| 160 | + { |
| 161 | + field: "UnitsInStock", |
| 162 | + title: "Units In Stock", |
| 163 | + width: 120, |
| 164 | + filterable: { multi: true }, |
| 165 | + }, |
| 166 | + { |
| 167 | + field: "Discontinued", |
| 168 | + width: 120, |
| 169 | + filterable: { |
| 170 | + multi: true, |
| 171 | + dataSource: [{ Discontinued: true }, { Discontinued: false }], |
| 172 | + }, |
| 173 | + } |
| 174 | + ] |
| 175 | + }); |
| 176 | + }); |
| 177 | + </script> |
| 178 | +``` |
| 179 | + |
| 180 | +## See Also |
| 181 | + |
| 182 | +- [Kendo UI for jQuery Grid Documentation](https://docs.telerik.com/kendo-ui/controls/grid/overview) |
| 183 | +- [Grid API Reference](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid) |
| 184 | + |
0 commit comments