DropDownList binding and selection in partial page

0 Answers 155 Views
DropDownList
Bryan
Top achievements
Rank 1
Bryan asked on 17 May 2021, 02:31 PM

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
Telerik team
commented on 20 May 2021, 02:05 PM

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
Top achievements
Rank 1
commented on 29 May 2021, 09:03 AM

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
Telerik team
commented on 02 Jun 2021, 01:50 PM

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.

No answers yet. Maybe you can help?

Tags
DropDownList
Asked by
Bryan
Top achievements
Rank 1
Share this question
or