Skip to content

Commit bfa1d2d

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent e3fa0fa commit bfa1d2d

File tree

4 files changed

+526
-36
lines changed

4 files changed

+526
-36
lines changed

‎docs/knowledge-base/dropdown-tree-checkboxes-grid-filtering.md‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
---
2+
title: Using DropDownTree Checkboxes with CheckAll for Grid Filtering
3+
description: Learn how to use Kendo UI for jQuery DropDownTree checkboxes with CheckAll functionality for filtering a Kendo Grid.
4+
type: how-to
5+
page_title: Implementing DropDownTree Checkboxes for Grid Filtering
6+
meta_title: Implementing DropDownTree Checkboxes for Grid Filtering
7+
slug: dropdown-tree-checkboxes-grid-filtering
8+
tags: dropdown-tree,kendo-ui-for-jquery,grid,filtering,checkboxes,checkall
9+
res_type: kb
10+
ticketid: 1701162
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td> Product </td>
19+
<td>
20+
Kendo UI for jQuery DropDownTree, <br/>
21+
Kendo UI for jQuery Grid
22+
</td>
23+
</tr>
24+
<tr>
25+
<td> Version </td>
26+
<td> 2025.3.1002 </td>
27+
</tr>
28+
</tbody>
29+
</table>
30+
31+
## Description
32+
33+
I want to use the [DropDownTree](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdowntree) with checkboxes and CheckAll functionality to filter a Kendo UI for jQuery Grid. I need guidance on how to configure the DropDownTree as a custom filter and manually handle the filtering logic based on its selection.
34+
35+
This knowledge base article also answers the following questions:
36+
- How to use Kendo UI for jQuery DropDownTree as a Grid filter?
37+
- How to implement [checkAll](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/dropdowntree/configuration/checkall) functionality in DropDownTree for Grid filtering?
38+
- How to handle filtering a Grid manually based on DropDownTree value?
39+
40+
## Solution
41+
42+
To achieve this functionality, follow these steps:
43+
44+
1. Use the [`columns.filterable.ui`](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/configuration/columns.filterable.ui) option of the Kendo Grid to implement the DropDownTree as a filter popup.
45+
2. Replace the original filter input element with a DropDownTree container element.
46+
3. Configure the DropDownTree with [`checkboxes`](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/dropdowntree/configuration/checkboxes) and [`checkAll`](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/dropdowntree/configuration/checkall) enabled.
47+
4. Handle the [`change`](https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/dropdowntree/events/change) event of the DropDownTree to filter the Grid manually.
48+
49+
### Example Code
50+
51+
Below you will find a runnable example
52+
53+
```dojo
54+
<div class="container">
55+
<h1>Kendo Grid with DropDownTree Custom Filter</h1>
56+
<div id="grid"></div>
57+
</div>
58+
59+
<script>
60+
$(document).ready(function() {
61+
// Sample data for the grid
62+
const gridData = [
63+
{ id: 1, name: "John Doe", age: 30, department: "IT", category: "Development", subcategory: "Frontend" },
64+
{ id: 2, name: "Jane Smith", age: 25, department: "HR", category: "Management", subcategory: "Recruitment" },
65+
{ id: 3, name: "Bob Johnson", age: 35, department: "IT", category: "Development", subcategory: "Backend" },
66+
{ id: 4, name: "Alice Brown", age: 28, department: "Finance", category: "Accounting", subcategory: "Payroll" },
67+
{ id: 5, name: "Charlie Wilson", age: 32, department: "IT", category: "Support", subcategory: "Help Desk" },
68+
{ id: 6, name: "Diana Miller", age: 29, department: "Marketing", category: "Digital", subcategory: "Social Media" },
69+
{ id: 7, name: "Eve Davis", age: 31, department: "IT", category: "Development", subcategory: "Full Stack" },
70+
{ id: 8, name: "Frank Garcia", age: 27, department: "Sales", category: "B2B", subcategory: "Enterprise" },
71+
{ id: 9, name: "Grace Lee", age: 26, department: "HR", category: "Management", subcategory: "Training" },
72+
{ id: 10, name: "Henry Moore", age: 33, department: "Finance", category: "Accounting", subcategory: "Budgeting" },
73+
{ id: 11, name: "Isabel Chen", age: 29, department: "IT", category: "Support", subcategory: "System Admin" },
74+
{ id: 12, name: "Jack Thompson", age: 24, department: "Marketing", category: "Digital", subcategory: "SEO" },
75+
{ id: 13, name: "Kelly White", age: 37, department: "Sales", category: "B2B", subcategory: "Small Business" },
76+
{ id: 14, name: "Liam Foster", age: 28, department: "IT", category: "Development", subcategory: "Backend" },
77+
{ id: 15, name: "Maya Patel", age: 31, department: "Finance", category: "Accounting", subcategory: "Payroll" },
78+
{ id: 16, name: "Nathan Brooks", age: 26, department: "HR", category: "Management", subcategory: "Recruitment" },
79+
{ id: 17, name: "Olivia Rodriguez", age: 30, department: "Marketing", category: "Digital", subcategory: "Social Media" },
80+
{ id: 18, name: "Peter Kim", age: 34, department: "IT", category: "Development", subcategory: "Frontend" },
81+
{ id: 19, name: "Quinn Taylor", age: 25, department: "Sales", category: "B2B", subcategory: "Enterprise" },
82+
{ id: 20, name: "Rachel Green", age: 32, department: "IT", category: "Support", subcategory: "Help Desk" },
83+
{ id: 21, name: "Samuel Clark", age: 29, department: "Finance", category: "Accounting", subcategory: "Budgeting" },
84+
{ id: 22, name: "Tina Martinez", age: 27, department: "HR", category: "Management", subcategory: "Training" },
85+
{ id: 23, name: "Victor Singh", age: 35, department: "Marketing", category: "Digital", subcategory: "SEO" },
86+
{ id: 24, name: "Wendy Adams", age: 28, department: "IT", category: "Development", subcategory: "Full Stack" },
87+
{ id: 25, name: "Xavier Lopez", age: 33, department: "Sales", category: "B2B", subcategory: "Small Business" },
88+
{ id: 26, name: "Yvonne Hall", age: 26, department: "Finance", category: "Accounting", subcategory: "Payroll" },
89+
{ id: 27, name: "Zachary Turner", age: 31, department: "IT", category: "Support", subcategory: "System Admin" },
90+
{ id: 28, name: "Amanda Scott", age: 30, department: "HR", category: "Management", subcategory: "Recruitment" }
91+
];
92+
93+
// Hierarchical data for DropDownTree
94+
const categoryData = [
95+
{
96+
id: 1,
97+
text: "IT",
98+
expanded: true,
99+
items: [
100+
{ id: 2, text: "Development", items: [
101+
{ id: 3, text: "Frontend" },
102+
{ id: 4, text: "Backend" },
103+
{ id: 5, text: "Full Stack" }
104+
]},
105+
{ id: 6, text: "Support", items: [
106+
{ id: 7, text: "Help Desk" },
107+
{ id: 8, text: "System Admin" }
108+
]}
109+
]
110+
},
111+
{
112+
id: 9,
113+
text: "HR",
114+
expanded: true,
115+
items: [
116+
{ id: 10, text: "Management", items: [
117+
{ id: 11, text: "Recruitment" },
118+
{ id: 12, text: "Training" }
119+
]}
120+
]
121+
},
122+
{
123+
id: 13,
124+
text: "Finance",
125+
expanded: true,
126+
items: [
127+
{ id: 14, text: "Accounting", items: [
128+
{ id: 15, text: "Payroll" },
129+
{ id: 16, text: "Budgeting" }
130+
]}
131+
]
132+
},
133+
{
134+
id: 17,
135+
text: "Marketing",
136+
expanded: true,
137+
items: [
138+
{ id: 18, text: "Digital", items: [
139+
{ id: 19, text: "Social Media" },
140+
{ id: 20, text: "SEO" }
141+
]}
142+
]
143+
},
144+
{
145+
id: 21,
146+
text: "Sales",
147+
expanded: true,
148+
items: [
149+
{ id: 22, text: "B2B", items: [
150+
{ id: 23, text: "Enterprise" },
151+
{ id: 24, text: "Small Business" }
152+
]}
153+
]
154+
}
155+
];
156+
157+
// Initialize the Grid
158+
$("#grid").kendoGrid({
159+
dataSource: {
160+
data: gridData,
161+
pageSize: 10,
162+
schema: {
163+
model: {
164+
id: "id",
165+
fields: {
166+
id: { type: "number" },
167+
name: { type: "string" },
168+
age: { type: "number" },
169+
department: { type: "string" },
170+
category: { type: "string" },
171+
subcategory: { type: "string" }
172+
}
173+
}
174+
}
175+
},
176+
height: 600,
177+
filterable: {
178+
mode: "menu"
179+
},
180+
pageable: {
181+
pageSize: 10,
182+
pageSizes: [5, 10, 20, 50],
183+
buttonCount: 5
184+
},
185+
sortable: true,
186+
columns: [
187+
{
188+
field: "id",
189+
title: "ID",
190+
width: "80px",
191+
filterable: false
192+
},
193+
{
194+
field: "name",
195+
title: "Name",
196+
width: "150px"
197+
},
198+
{
199+
field: "age",
200+
title: "Age",
201+
width: "100px"
202+
},
203+
{
204+
field: "department",
205+
title: "Department",
206+
width: "120px",
207+
filterable: {
208+
// Custom DropDownTree filter
209+
extra: false,
210+
ui: function(element) {
211+
212+
const grid = $("#grid").data("kendoGrid");
213+
const dropDownTreeElement = $('<input />');
214+
215+
// Replace the original element with a container
216+
const container = $('<div></div>');
217+
container.append(dropDownTreeElement);
218+
element.replaceWith(container);
219+
220+
// Initialize DropDownTree
221+
dropDownTreeElement.kendoDropDownTree({
222+
placeholder: "Select department(s)...",
223+
dataSource: categoryData,
224+
dataTextField: "text",
225+
dataValueField: "text",
226+
loadOnDemand: false,
227+
checkboxes: {
228+
checkChildren: true
229+
},
230+
checkAll: true,
231+
autoClose: false,
232+
// Note: filter is disabled because it conflicts with checkChildren
233+
// filter: "contains",
234+
change: function(e) {
235+
// Get the selected values
236+
const selectedValues = this.value();
237+
238+
if (selectedValues && selectedValues.length > 0) {
239+
// Create filter expression for multiple values
240+
const filters = selectedValues.map(value => ({
241+
field: "department",
242+
operator: "eq",
243+
value: value
244+
}));
245+
246+
// Apply filter with OR logic for multiple selections
247+
const filterExpression = {
248+
logic: "or",
249+
filters: filters
250+
};
251+
252+
// Get current filters and update department filter
253+
let currentFilter = grid.dataSource.filter();
254+
if (!currentFilter) {
255+
currentFilter = { logic: "and", filters: [] };
256+
}
257+
258+
// Remove existing department filters
259+
currentFilter.filters = currentFilter.filters.filter(f =>
260+
!(f.field === "department" || (f.filters && f.filters.some(sf => sf.field === "department")))
261+
);
262+
263+
// Add new department filter
264+
if (filters.length === 1) {
265+
currentFilter.filters.push(filters[0]);
266+
} else {
267+
currentFilter.filters.push(filterExpression);
268+
}
269+
270+
// Apply the filter
271+
grid.dataSource.filter(currentFilter);
272+
} else {
273+
// Clear department filters
274+
let currentFilter = grid.dataSource.filter();
275+
if (currentFilter && currentFilter.filters) {
276+
currentFilter.filters = currentFilter.filters.filter(f =>
277+
!(f.field === "department" || (f.filters && f.filters.some(sf => sf.field === "department")))
278+
);
279+
280+
if (currentFilter.filters.length === 0) {
281+
grid.dataSource.filter({});
282+
} else {
283+
grid.dataSource.filter(currentFilter);
284+
}
285+
}
286+
}
287+
}
288+
});
289+
}
290+
}
291+
},
292+
{
293+
field: "category",
294+
title: "Category",
295+
width: "120px",
296+
filterable: {
297+
multi: true,
298+
checkAll: true
299+
}
300+
},
301+
{
302+
field: "subcategory",
303+
title: "Subcategory",
304+
width: "150px",
305+
filterable: {
306+
multi: true,
307+
checkAll: true
308+
}
309+
}
310+
]
311+
});
312+
});
313+
</script>
314+
```
315+
316+
## See Also
317+
318+
- [JavaScript API Reference of the DropDownTree](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdowntree)
319+
- [JavaScript API Reference of the Grid](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)
320+
- [Grid Filter Menu Customization (Demo)](https://demos.telerik.com/kendo-ui/grid/filter-menu-customization)

0 commit comments

Comments
 (0)