Kendo Grid Groupable Columns Example — (Kendo UI For Angular)
Without mutating your DOM, you can use Groupable Feature with a checkbox on headers from Kendo UI Library easily.
Published in
4 min readSep 5, 2021
Issue:
I see many developers are facing the issue with sorting out with Groupable feature of Kendo UI — Angular. When it comes to deal with a checkbox for headers and groupable columns, it is a real headache. I saw that my friends were mutating their DOM or HTML context using traditional javascript in their angular project, which doesn’t make sense to me. For example,
document.getElementById('some_id').addAttribute('checked', 'checked');
They are checking/unchecking the checkbox based on conditions. If you are doing the same, I am writing the article for you. Without mutating your DOM, can you achieve it?
Requirements:
- Groupable must group your columns and show appropriate views to the users.
- Put Checkboxes to the header grouped in the Kendo Grid and manage general operations with those checkboxes.
- Kendo Grid enables you to show up grouped table data in simple and easy-to-understand visualization, also it should return results with a new JSON structure once you…