Cascading Kendo MultiSelect Dropdowns
In this example, we will demonstrate how to create cascading menus' with Kendo MultiSelects. We have covered cascading menus with the dropdown lists, but there are fundamental differences.
In this example, I will try my best to replicate the UI of James Moberg's 'North America Search Demo' found at https://www.sunstarmedia.com/demo/countrystate/. James is a frequent contributor to the ColdFusion community and his elegant demo is used in production environments. Jame's demo uses a different library, Select2 UI, but it uses the same concepts that we want to show here.
Like the rest of the posts in this series, we will be using ColdFusion on the server side, however, it should be easily understood if you use a different server-side language, and you should be able to follow along.
Table of Contents
- Cascading MultiSelects Demonstration
- Cascading MultiSelects Approach
- First Country Dropdown
- Second State MultiSelect Dropdown
- The Dependent City MultiSelect Dropdown
- Introduction to Grouping Using the Kendo DataSource
- Grouping the City MultiSelect Dropdown by the Selected State
- Server Side Logic using ColdFusion
- The City Kendo DataSource
- Initializing the City MultiSelect
- The City onChange Method
- Client Side HTML
- Further Reading
Cascading MultiSelects Demonstration
This entry was posted on October 13, 2022 at 12:29 AM and has received 570 views.