DropDownList binding and selection in partial page

[Bryan]

I have a dropdownlist on a partial page. As it can obviously be shared by multiple pages, code to populate is on a separate shared page. I'm loading using the code below, and that works fine

 @(Html.Kendo().DropDownList() .Name("ModeOfTransport") .DataTextField("description") .DataValueField("modeOfTransportID") .HtmlAttributes(new { style = "width:100%;" })
                       .AutoBind(true) .DataSource(source => source.Custom() .Transport(transport => transport .Read(r => r .Url("/Shared/AjaxPartial?handler=ModesOfTransport").Data("dataFunction") ))
                       .ServerFiltering(true)
                         )
                       .Events(e=>e.DataBound("ModeOfTransportDataBound"))
                       )
   

function ModeOfTransportDataBound(e) {
        var currentModeOfTransport = $('#CurrentModeOfTransport').val();
        e.sender.value(currentModeOfTransport);
    }

ModeOfTransport maps to a bindingproperty, and when the page is saved, the correct selected value is stored in that value. However, when the DropDownList loads, the current value is not selected. The only way I can see to do this is to store the current value in a hidden field, then select on the databound event. This works, but I can't help feeling I'm taking the wrong approach. Any suggestions to improve this process?

We've been working with ASPX and Telerik for over 15 years, but new to Razor, so happy to accept I maybe doing this completely wrong.

 

[Aleksandar]

Hi Bryan,

I am unsure I understand you correctly. Is the issue related with binding the DropDownList to the Model? 

If this is the case refer to this article that showcases how to bind a Component to a Model by using [WidgetName]For:

@model ColorsModel

@(Html.Kendo().DropDownListFor(m => m.Color)

The definition of the ColorsModel:

 public class ColorsModel
    {
            public int Id { get; set; }
            public string Color { get; set; }
    }

If the above doesn't help resolve the issue, please provide additional details about the scenario at hand to allow me to investigate further.

[Bryan]

Hi Aleksander
The question relates to the binding for ModeOfTransport, which doesn't seem to select the correct default value, as the list is loaded via a server event, rather than initial binding.
What I'd expect to happen is that once the load is complete, the ModeOfTransport would be used to select the current value, but it doesn't appear to work.
As it happens it's not now an issue as we aren't using the Kendo UI controls, as they broke once we added a bootstrap theme...

[Aleksandar]

Bryan, if you are referring to the value of the widget not being set within the function:

function ModeOfTransportDataBound(e) {
        var currentModeOfTransport = $('#CurrentModeOfTransport').val();
        e.sender.value(currentModeOfTransport);
    }

than note that calling the value method of the DropDownList does not trigger the change event. If that is what you mean, you can try triggering the change event as demonstrated in the API.