Saturday, October 15, 2016

how to use a DevExpress ComboBox to update a partial view

@Html.DevExpress().ComboBoxFor(m => m.BuyerId, settings =>
   {
      settings.Name = "BuyerSelection";
      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){
            UpdatePartials(s.lastSuccessValue) }";
   }
).BindList(ViewBag.PotentialMatches).GetHtml()

 
 

ViewBag.PotentialMatches above is a collection being handed in to the ComboBoxFor while s.lastSuccessValue is going to be handed into buyerId at the first line of code in some JavaScript (with some jQuery) here:

function UpdatePartials(buyerId){
   var route = '@Url.Action("Whatever", "Buyer", new { cacheKey="guidgoeshere",
         buyerId=0 });
   route = route.replace('0', buyerId);
   route = route.replace('guidgoeshere', '@ViewBag.CacheKey');
   route = route.replace('&', '&');
   $.ajax({
      url: route,
      type: "GET"
   }).done(function(partialViewResult) {
      $("#whateverWrapper").html(partialViewResult);
   });
}

 
 

DevExpress controls will behave rather sickly if there is not explicitly some callouts at the top of the view to loop in needed JavaScript and CSS like so:

@Html.DevExpress().GetStyleSheets(new Stylesheet
{
   ExtensionType = ExtensionType.CheckBox
})
@Html.DevExpress().GetScripts(new Script
{
   ExtensionType = ExtensionType.CheckBox
})

 
 

These bits of Razor markup are control-specific so, in our case, we will need to loop in the ComboBox:

@Html.DevExpress().GetStyleSheets(new Stylesheet
{
   ExtensionType = ExtensionType.GridView
}, new Stylesheet
{
   ExtensionType = ExtensionType.ComboBox
})
@Html.DevExpress().GetScripts(new Script
{
   ExtensionType = ExtensionType.GridView
}, new Script
{
   ExtensionType = ExtensionType.ComboBox
})

 
 

The style part needs to go in the head before other styles and stylesheets. The JavaScript part could be broken out for elsewhere. Indeed the DevExpress JS should come AFTER jQuery's script tag.

No comments:

Post a Comment