Edit this page

Cascading ComboBoxes

The cascading ComboBox is a series of two or more ComboBoxes in which each ComboBox is filtered according to the selected options in the previous ComboBox.

Initialize the ComboBoxes

To initialize a cascading ComboBox, use the following example.

Example
<input id="parent" />
<input id="child" />

<script type="text/javascript">
     $(function() {
         $("#parent").kendoComboBox({
            dataTextField: "parentName",
            dataValueField: "parentID"
            //Define the combobox's settings
         });

         $("#child").kendoComboBox({
            cascadeFrom: "parent"
            //Define other settings
         });
     });
</script>

The child ComboBox cascades from the parent one if the cascadeFrom option is defined. The cascadeFrom option has to point to the parent ID.

Important

The cascading functionality works only when you define the cascadeFrom property and initialize the parent ComboBox.

The child ComboBox takes the following actions during initialization:

  • Checks if the cascadeFrom property is set. If not, cascading is disabled.
  • Tries to find the parent ComboBox object. If the result is null, then the functionality is omitted.
  • Listens to any changes of the parent value.
  • If the parent does not have a value, the child is disabled. If the parent has a value, the child is enabled and filters its data accordingly. The filter options are similar to the ones demonstrated in the following example.

    field: "parentID",  //the dataValueField of the parent
    operator: "eq",
    value: "" //parent's value
    

The following example demonstrates the parameters of this request.

    filter[logic]: and
    filter[filters][0][field]: parentID
    filter[filters][0][operator]: eq
    filter[filters][0][value]:

Important

The filter operator is always "eq". To filter the data, the child ComboBox uses the dataValueField option of the parent ComboBox.

MVVM Value Binding

The MVVM value binding updates the model when a UI element triggers a change event. When widgets cascade, however, they do not raise a change event and the model is not updated.

If you need a synced model, refer to this demo which shows how to implement a custom MVVM binding that will update the model accordingly.

For more information on why a widget does not trigger a change event, refer to this GitHub discussion.

FAQ

How can I preset the selected items when I use cascading ComboBoxes with autoBind: true?

Set the value of the ComboBoxes—define it before initialization as demonstrated in the following example. You also can use the value option.

Example
<input id="parent" value="1" />
<input id="child" value="36" />

<script>
   $("#parent").kendoComboBox();

   $("#child").kendoComboBox({
            cascadeFrom: "parent"
   });
</script>

How can I preset the selected items when I use cascading ComboBoxes with load on demand?

Set the value and text options.

Example
<input id="parent" value="1" />
<input id="child" value="36" />

<script>
   $(function() {
        $("#parent").kendoComboBox({
           value: "1",
           text: "Parent1",
           dataTextField: "parentName",
           dataValueField: "parentID",
           dataSource: {
              //dataSource settings
           },
           autoBind: false
        });

        $("#child").kendoComboBox({
           cascadeFrom: "parent",
           value: "36",
           text: "Child36",
           dataTextField: "childName",
           dataValueField: "childID",
           dataSource: {
              //dataSource settings
           },
           autoBind: false
        });
   });
</script>

Why server filtering is disabled and the child ComboBox does not work?

When serverFiltering is disabled, the ComboBox does not make any additional requests to the server. As a result, it filters the initial data by using the dataValueField property of the parent. If it does not find any items, the child ComboBox remains empty.

To use a child ComboBox with disabled server filtering, provide all the necessary data on the client.

What to do when I cannot get the request parameters on the server?

Check the format of the request parameters as displayed in the Initialize Cascading ComboBoxes section. To get them correctly, modify your server code.

Another way to handle the issue is to pass the ID of the parent ComboBox manually by using the data callback of the DataSource's Transport.Read object, as demonstrated in the following example.

Example
<input id="child" />

<script>
  $("#child").kendoComboBox({
    cascadeFrom: "parent",
    dataTextField: "childName",
    dataValueField: "childID",
    dataSource: {
      transport: {
        read: {
          url: "",
          data: function() {
            return { parentID: $("#parent").val() };
          }
        }
      }
    }
  });
</script>

See Also

Other articles on the Kendo UI ComboBox:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy