Cascading ComboBox drops model binding after setting initial value empty

Question

My scenario:

Cascading dropdowns ending with ComboBox (partial view) used in master->details scenario with kendo grid

ddl->ddl->ddl->cb

Goal:

1. On page load DropDownLists are being initialized with data one by one with some default value, and the ComboBox should stay empty
2. On grid selecteditemchanged partial view is being filled with data and ComboBox should display appropriate element.

In my case it works as follows:

1. on page load ComboBox displays '0' (null I suppose?)
2. on selection change it blinks with selected value which is basically model.Id and it shows appropriate text

Or if I clear text/value propery of kendoComboBox when parent DropDownList data is loaded:

1. on page load ComboBox is empty
2. on selection change it blinks like above but its stays empty

If I change ComboBox control into 4th DropDownList it still "blinks" but all in all works fine. Selected item from model is preserved correctly in the DropDown.

I cannot provide a complete example because it's too heavy but I don't think it's necessary.

This is how the lists data is cascading. On parent's DataBound event .dataSource.read() method of child is called. Nothing fancy.

function ParentProductIdDataBound() {
    var dropdownlist = $("#ParentProductId").data("kendoDropDownList");

    if (dropdownlist.value()) {
        OnParentProductIdChange();
    }
}

function ParentProductIdChange() {
    OnParentProductIdChange();
}

function OnParentProductIdChange() {
    var productcombobox = $("#ProductId").data("kendoComboBox");
    productcombobox.text("");     <- empty until combo is populated
    productcombobox.value("");
    productcombobox.enable(true);  <- enable combo
    productcombobox.dataSource.read();  <- populate combo
}

and here is the code of combo itself

@(Html.Kendo().ComboBox()
              .Name("ProductId")
              .DataTextField("Text")
              .DataValueField("Value")
              .AutoBind(false)
              //.Text(Model.ProductId == 0 ? " " : Model.ProductName)
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetMeansOfProduction", "DemandForMeansOfProduction", new { level = 3 }).Data("onProductComboBoxAdditionalData");
                  })
                        .ServerFiltering(false);
              })
              .Events(e =>
              {
                  e.Change("ProductIdChange");
                  e.DataBound("ProductIdDataBound");
              })
        )

It looks like:

1. Whenever the ComboBox is not populated it displays directly model value which it is binded to (Id), even if the model is empty -> thats the '0' from first case - and I want it to wait for data
2. If I set the value and/or text of ComboBox empty it looses binding to model and after it is populated with data it doesn't know which item should be selected...

Ideas of solution?

Answer 1

The solution turned out to be so simple it's almost embarrassing...

I just had to switch from text/value (name/id) pair to text/text and there is no 'blinking' or disappearance issue any more.

Turn:

@(Html.Kendo().ComboBox()
              .Name("ProductId")
              .DataTextField("Text")
              .DataValueField("Value")

into:

@(Html.Kendo().ComboBox()
              .Name("ProductName")
              .DataTextField("Text")
              .DataValueField("Text")

It causes some additional work in the controller but at least works.

I hope it saves time to someone like it could have saved me some...