title: Cascading Telerik combo boxes remember selected value after client side databinding
body: <p>I have two combo boxes and a grid in my MVC View:</p>
  
  <pre><code>&lt;div id="Products" class="products maintField"&gt;
      @Html.Label("something", "Product:")
      @(Html.Telerik().ComboBox().Name("productList")
                                 .AutoFill(true)
                                 .DataBinding(c =&gt; c.Ajax().Select("GetProducts", "Maintenance").Enabled(true).Cache(true))
                                 .Filterable(c =&gt; c.FilterMode(AutoCompleteFilterMode.StartsWith).Enabled(true))
                                 .HighlightFirstMatch(true)
                                 .ClientEvents(eb =&gt;
                                 {
                                     eb.OnChange("productChanged");
                                 })
      )
  &lt;/div&gt;
  &lt;div id="Layouts" class="layout maintField"&gt;
      @Html.Label("something", "Layout:")
      @(Html.Telerik().ComboBox().Name("layoutList")
                                 .ClientEvents(eb =&gt;
                                 {
                                     eb.OnChange("layoutChanged");
                                 })
      )
  &lt;/div&gt;
  &lt;div style="clear: both;"/&gt;
  &lt;div class="fields"&gt;
      @(Html.Telerik().Grid&lt;MaintenanceModel&gt;().Name("fieldList")
          .DataBinding(bc =&gt;
          {
              bc.Ajax().Select("GetProductFields", "Maintenance", new { prodID = 0, layoutID = 0 }).Enabled(true);
          })
          .ClientEvents(c =&gt;
          {
              c.OnDataBound("fieldGridBound");  
          })
          .Columns(c =&gt;
          {
              c.Bound(mm =&gt; mm.Field_ID).ClientTemplate("&lt;input id='Field_ID_&lt;#= Field_ID #&gt;' type='checkbox' name='checkedRecords' class=\"checkBoxGroup\" value='&lt;#= Field_ID #&gt;' /&gt;")
                                        .Title("&lt;input id='mastercheckbox' type='checkbox' style='display:none;' /&gt;")
                                        .HeaderHtmlAttributes(new { style = "text-align: center;" })
                                        .Width(36)
                                        .HtmlAttributes(new { style = "text-align:center" });
              c.Bound(fld =&gt; fld.Field_Name).Title("Field Name").Width(225);
              c.Bound(fld =&gt; fld.Field_Description).Title("Field Description");
          }).Scrollable(c =&gt;
          {
              c.Enabled(true);
              c.Height(700);
          }).Footer(false).Sortable(c =&gt;
          {
              c.Enabled(false);
              c.OrderBy(oc =&gt;
              {
                  oc.Add(fld =&gt; fld.SeqNbr);
              });
          })
      )
  &lt;/div&gt;
  </code></pre>
  
  <p>And with some less than beautiful JS the comboboxes cascade and eventually populate the grid:</p>
  
  <pre><code>function productChanged(e) {
      clearLayout();
      var layoutCombo = $("#layoutList").data('tComboBox');
  
      if (layoutCombo == null) {
          alert("Can't find layoutList");
          return;
      }
  
      if (e.value == "" || e.value == null) {
          clearLayout();
          return;
      }
  
      layoutCombo.loader.showBusy();
      $.get('@Url.Action("GetProductLayouts", "Maintenance")', { prodID: e.value }, function (result) {
          layoutCombo.dataBind(result);
          layoutCombo.loader.hideBusy();
      });
  }
  function layoutChanged(e) {
      var prodCombo = $("#productList").data('tComboBox');
      var fieldGrid = $("#fieldList").data('tGrid');
  
      if (fieldGrid == null) {
          alert("Can't find fieldList");
      }
      if (prodCombo == null) {
          alert("Can't find prodCombo");
      }
  
      if (e.value == "" || e.value == null) {
          clearGrid();
          return;
      }
  
      fieldGrid.rebind({ prodID: prodCombo.value(), layoutID: e.value });
      $("#mastercheckbox").css("display", "block");
  }
  function fieldGridBound(e) {
      var prodCombo = $("#productList").data('tComboBox');
      var layoutCombo = $("#layoutList").data('tComboBox');
  
      $.get('@Url.Action("GetLayoutFields", "Maintenance")', { prodID: prodCombo.value(), layoutID: layoutCombo.value() }, function (result) {
          var cbGroup = $(".checkBoxGroup");
  
          $(cbGroup).each(function (i, e) {
              if (result.indexOf(e.value) &gt;= 0) {
                  $(e).attr('checked', 'checked');
              } else {
                  $(e).removeAttr('checked');
              }
          });
      });
  }
  </code></pre>
  
  <p>This works beautifully except in the situation where the two combo boxes are filled, the grid is bound, and the user goes to select a different value from the first combo box. The second combo box rebinds as expected, but if the values bound to the combobox didn't change (in position or display value) and the user selects the same item again, the change event doesn't get fired.</p>
  
  <p><strong>Specific example</strong></p>
  
  <p>In the database I have a hierarchy of Products and Layouts:</p>
  
  <pre><code> Product A
       Platinum Layout
       Gold Layout
       Silver Layout
   Product B
       Platinum Layout
       Gold Layout
       Silver Layout
   Product C
       Platinum Layout
       Silver Layout
  </code></pre>
  
  <p><em>Scenario 1</em></p>
  
  <ol>
  <li>User selects 'Product A' from the first drop down causing the second drop down to be populated with Platinum, Gold, and Silver Layouts.</li>
  <li>User selects 'Platinum Layout' from the second drop down causing related information to show in the grid. </li>
  <li>User selects 'Product B' from the first drop down causing the second drop down to again be populated with Platinum, Gold, and Silver Layouts.</li>
  <li>User selects 'Platinum Layout' from the second drop down again, however the changed event doesn't fire because the combo box didn't forget what was selected from before being rebound.</li>
  </ol>
  
  <p><em>Scenario 2</em></p>
  
  <ol>
  <li>User selects 'Product A' from the first drop down causing the second drop down to be populated with Platinum, Gold, and Silver Layouts.</li>
  <li>User selects 'Platinum Layout' from the second drop down causing related information to show in the grid.</li>
  <li>User selects 'Product C' from the first drop down causing the second drop down to again be populated with Platinum, Gold, and Silver Layouts.</li>
  <li>User selects 'Platinum Layout' from the second drop down, causing the same erroneous behavior described in step 4 of Scenario 1.</li>
  </ol>
  
  <p><em>Scenario 3</em></p>
  
  <ol>
  <li>User selects 'Product A' from the first drop down causing the second drop down to be populated with Platinum, Gold, and Silver Layouts.</li>
  <li>User selects 'Silver Layout' from the second drop down causing related information to show in the grid.</li>
  <li>User selects 'Product C' from the first drop down causing the second drop down to be populated with Platinum and Silver Layouts.</li>
  <li>User selects 'Silver Layout' from the second drop down causing related information to show in the grid (as should have happened in the other 2 scenarios).</li>
  </ol>
  
  <p>In order to try to force the combo box to forget which item was selected prior to being rebound, I've tried manually setting the selected item to -1 (nothing) before binding using:</p>
  
  <blockquote>
    <p>layoutCombo.select(-1);</p>
  </blockquote>
  
  <p>and I've also tried reloading the combo box after the bind using</p>
  
  <blockquote>
    <p>layoutCombo.reload();</p>
  </blockquote>
  
  <p>However neither of them worked for me.</p>
  
  <p>Has anyone else seen this behavior under similar circumstances? Is there any way to clear the combo box's last selected item variable manually from within my page (<em>without</em> digging around in the Telerik source)?</p>