KendoUI: cascading ComboBox (tips and tricks)


Cascading ComboBox (a.k.a. DropDown) is a nice and powerful widget provided by KendoUI: once you select a value on the first, the second gets populated: Neat!… but in order to follow the documentation, you need some good knowledge about their framework.

In this post I will show you how I use it and hopefully it will helps you on your own developments…

KendoUI: cascading ComboBox

For illustrating this tutorial, I will define two ComboBoxes: states of United States and cities of those states (I got the data from the Wikipedia, sorry if I miss your city / state since in the list are only the largest). And will end-up looking something like this:

KendoUI cascading comboboxes
KendoUI cascading comboboxes

Building the list of states and cities

For this tutorial, I will use in-memory arrays that will be used for storing:

  1. The states.
  2. The cities organized by states.

But since I get the data from the wikipedia I have the cities and the state on which the city is. So I use:

var array = [
	{ "city":"Birmingham", state:"Alabama" },
	{ "city":"Huntsville", state:"Alabama" },
	{ "city":"Mobile", state:"Alabama" },
	{ "city":"Montgomery", state:"Alabama" },
	...
	{ "city":"Green Bay", state:"Wisconsin" },
	{ "city":"Madison", state:"Wisconsin" },
	{ "city":"Milwaukee", state:"Wisconsin" }
];
var states = [];
var cities = {};
// Iterate on array and fill "states" and "cities"
$.each(array, function (idx, value) {
    if ($.inArray(value.state, states) !== -1) {
        // It is not the first time that I have a city for this state.
        cities[value.state].push(value.city);
    } else {
        // First time that I get a city for this state,
        // store the state
		states.push(value.state);
        // and the city
		cities[value.state] = [ value.city ];
	}
});

Defining cascading comboboxes

Define two input fields:

<input id="state"/>
<input class="ob-field-wide" id="city"/>

The remaining configuration is done from JavaScript. The combobox for states is:

$("#state").kendoComboBox({
    dataSource    :states
}).data("kendoComboBox");

Wow! This has been easy! The tricky part is the second: displaying the cities for the state…

What I need to do is defining the dataSource as cities[$(“#state”).val()] but we need to do it following as:

$("#city").kendoComboBox({
    autoBind      :false,
    dataSource    :{
        serverFiltering:true,
        transport :{
            read:function (operation) {
                return operation.success(cities[$("#state").val()]);
            }
        }
    }
}).data("kendoComboBox");

Here the tricky questions are:

  1. Setting cascadeFrom to “state”: identifying the sequence (cascade order) of the combo-boxes.
  2. Setting autoBind to false which means that do not initialize this when loaded the page (since not having selected the state, we cannot correctly set cities for that state).
  3. Setting serverFiltering to true. If we do not do this, the first time that a state is selected the cities combobox is configured but if we change the state, the cities is not re-populated with the new cities.
  4. Invoke from read function success indicating that read correctly retrieved the data and which data is it.

So, when the data is in already in your page, it is not that difficult.

Decorating it

Some useful options in kendoComboBox are:

  1. ignoreCase false or true: allows you to control wether you want to allow typing the value with exact case (values stored in the DataBase / array) or ignoring the case.
  2. delay  100: Controls the delay (100 milliseconds) since you type until the available values are shown in the drop down list.
  3. placeholder State, Displays State as message in the ComboBox that helps user to know what to type in (this uses to be used instead or in conjunction with HTML tag label).
  4. suggest true: the ComboBox automatically types the rest of the value.
Advertisements

2 thoughts on “KendoUI: cascading ComboBox (tips and tricks)

    • You need to provide more details on what do you mean by one single function. What is that function, the DataSource.transport.read function, a function that creates the DataSources, a function that invoke read on two already created DataSources?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s