Dynamically Populating Kendo MultiSelects
Oct 21
by Gregory Alexander ColdFusion and Kendo UI., JSON
As we previously mentioned, the Kendo MultiSelect widget offers significant enhancements to a traditional dropdown menu and can be used to replace a long list of checkboxes. In this article, we will take a deep dive into the Kendo MultiSelect, show how it can be prepopulated with existing values, and how to dynamically populate it using cascading dropdowns.
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
Visual Demonstration of Kendo's MultiSelect vs HTML MultiSelect
A picture is worth a thousand words. I am going to contrast the Kendo MultiSelect against traditional HTML checkboxes to visually convey the benefits of using the Kendo MultiSelect.
In the following interfaces, we are prepopulating the form with the US states on the Pacific seaboard selected.
Kendo MultiSelect
As you can see here, with the Kendo MultiSelect the selected values are front and center allowing the user to quickly see what is selected without forcing them to scroll down a long list of items. The Kendo MultiSelect also has search functionality to allow the user to quickly select additional values. The Kendo MultiSelect is also much more elegant and it takes up less space on the screen.
The Kendo MultiSelect's ability to put information front and center makes it a perfect tool to conceptualize related groups of information, however, in order to convey this we need to be able to dynamically populate this list.
Traditional HTML Multi-Select
The traditional multi-select requires you to scroll way down to see Oregon and Washington that are selected, and you better make sure not to accidentally click on one of the items while scrolling or the selection will be gone!
Dynamically Removing the Selected Kendo MultiSelect Options
To remove all of the selected values in the Kendo MultiSelect, simply pass an empty array to the MultiSelect value method like so:
$("#stateDropdown").kendoMultiSelect({
placeholder: "Select...",
autoBind: false,
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: stateDs,
value: []
}).data("kendoMultiSelect");Populating a Kendo MultiSelect With Initial Values
Use the MultiSelect value method to populate the values of a Kendo MultiSelect.
You can either use an array with comma-separated values or an array of structures for the value. This value must have the same value and datatype as the data element that is used to populate the dataValueField. If the value and the data type do not match a data element used to populate the dataValueField, the value will be ignored. We will illustrate this below.
All of these examples are valid:
// Displays United States
value: [{ name: "United States", id: 233 }] // Note: the name will be ignored.
value: [{ id: 233}]
value: [233]
// Displays United States, United States Minor Outlining Areas
value: [233,234]
value: [{id:233},{id:234}]
However, these examples do not work. See comments in code:
[{ name: "United States" }] // United States does not match a data element in the dataValueField and will be ignored
"233,234,235"// Missing array (the square brackets)Dynamically Populating a Kendo MultiSelect
Overview
To dynamically populate a Kendo MultiSelect, we need to inspect data using either AJAX or using the Kendo DataSource and prepare the data for the MultiSelect value method.
If you're using jQuery AJAX, and the data from the server is already a comma-separated string or an array of structures, you may be able to dump the data into the Kendo MultiSelects value method. Otherwise, you will have to prepare the string or array by looping through the data.
If you're inspecting data from a Kendo Datasource, we will use a similar approach that we would use to interrogate the data using jQuery Ajax- we will loop through the data triggered by a parent Kendo widget and populate the values array using the JavaScript push method and use the new array in the Kendo MultiSelect value method.
In this article, we will focus on interrogating data from the Kendo DataSource.
Potential Use Cases
Unlike the traditional HTML MultiSelect, a Kendo MultiSelect can be prepopulated with values to allow the user to easily visualize and interact with related groups of data. I often populate the MultiSelect widget to allow the users to conceptualize related data with a predefined starting point.
There are many other reasons to dynamically populate the MultiSelect. For example, we can clean up the selected values in a MultiSelect if the child values don't relate to other parent data. For example, in our previous Cascading MultiSelect article, we dynamically removed states from a child MultiSelect when the state's country was removed in the parent country MultiSelect menu.
MultiSelect Dynamic Population Demonstration
The following example allows the user to select a world region that they are interested in exploring. Once the user selects a world region, the region states will be dynamically populated in the child state multi-select.
We will go over the details of this code later in this article.
| Countries by subregion | |
Extracting Data from a Kendo DataSource
To extract the data from a Kendo DataSource, we need to use Kendo's data method on the Kendo DataSource. Unfortunately, we can't use this data to directly populate the MultiSelect's value method as the JSON extracted from the Kendo DataSource has been transformed into a specialized Kendo Observable Array JavaScript object. Instead, we need to loop through the data and create a string of values separated by commas using the JavaScript push method.
The populateCountry function below performs all of the necessary steps to extract the data from the countryDs data source and populates the country MultiSelect with values. This function is invoked using the change method on the parent subregion dropdown when the user selects a country. The full code is provided at the end of this article.
This function will use the data method on the countryDs Kendo DataSource that was consumed via the change function invoked when the user selects a subregion. Here, we don't need to use the Kendo fetch or read method as the data source already consumed the service endpoint when a region was selected. We will cover the fetch and read methods in future articles, but they don't apply here.
After using the Kendo DataSource's data method, we will create an empty countryIdList array to hold the list of values that we will later use in the MultiSelect's value method and loop through the data, which is a specialized JavaScript array.
Our loop will be a simple JavaScript for loop, and we will continue to loop through the records until there are no more records in the Kendo Observable array.
Inside this loop, we will extract the items that we need to populate the Kendo MultiSelect. In this example, we are getting the id, which is the primary key of the country table. Once the id has been extracted, we will use the JavaScript push method to push the value into the new countryIdList array that we just created.
After the loop has been completed and all of the ids have been saved to our new array, we will use this countryIdList to populate the MultiSelect using the widgets value method.
Here is the function:
The populateCountry function
// Populate the selected MultiSelect values from the datasource
function populateCountries(e){
// Get the data from the datasource
var data = countryDs.data();
// Create an array that we will use to populate the dropdown
var countryIdList = [];
// Loop through the data to create an array to send to the multi-select
for (var i = 0; i < data.length; i++) {
// Get the countryId
var countryId = data[i].id;
// Populate our new array with the value surrounded by qoutes
countryIdList.push(countryId);
}//..for (var i = 0; i < capabilityDsData.length; i++) {
// At the end of the loop, opulate the multiSelect with the array that we just built
countryDropdown.value(countryIdList);
}//..function...
This entry was posted on October 21, 2022 at 12:45 AM and has received 568 views.
