Make one DevExpress control update another in MVCland.

If you are more or less just refreshing HTML this trick for updating an MVC partial with AJAX will work, however if the partial to be updated contains another DevExpress control, lookout! You’re in trouble and things are about to get interesting. The AJAX refresh approach will paint to the screen a DevExpress control which behaves sickly with its JavaScript mechanics jacked up. For example, you might be able to display a GridView but not sort the grid. Awesome! So, what to do about that? Let's say we want one DevExpress ComboBox to update another when it's changed. Perhaps there is some sort of hierarchal relationship and the second ComboBox is subordinate to and dependent on the first with regards to what its own contents are. Alright, the actor DOING the affecting looks like so:

@Html.DevExpress().ComboBoxFor(m => m.Id, settings =>
   {
      settings.Name = "MerchantSelection";
      settings.Properties.DropDownStyle = DropDownStyle.DropDownList;
      settings.Properties.ValueField = "Key";
      settings.Properties.ValueType = typeof(int);
      settings.Properties.TextField = "Value";
      settings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s,e){
            BuyerSelection.PerformCallback(); }";
   }
).BindList(ViewBag.MerchantMatches.GetHtml()

 
 

Well, OK. It's not doing that much really, huh? It's just calling the callback on another control, the subordinate ComboBox. Both ComboBoxes need to be in MVC partials all by themselves. The second actor looks like this:

@Html.DevExpress().ComboBoxFor(m => m.BuyerId, settings =>
   {
      settings.Name = "BuyerSelection";
      settings.Properties.DropDownStyle = DropDownStyle.DropDownList;
      settings.ValueField = "Key";
      settings.ValueType = typeof(int);
      settings.Properties.TextField = "Value";
      settings.CallbackRouteValues = new { Controller="Buyer", Action="ProfileBuyers" };
      settings.CLientSideEvents.BeginCallback = "function(s,e){
            e.customArgs['merchantId'] = MerchantSelection.GetValue(); }";
   }
).BindList(ViewBag.BuyerMatches).GetHtml();

 
 

In the example at the link above (at the beginning of this blog posting) s.lastSuccessValue is handed into buyerId at a JavaScript function signature, and immediately above merchantId, sniffed off of the other ComboBox which just got set to something new, is going to be handed into the ProfileBuyers action at BuyerController, hydrating a variable there. The action will then do its thing and resurface a partial view, and it is the partial view holding the control immediately above. Get it?