ComboBox Data Binding - Pre=select value

[Bob]

Hi,

I'm trying to understand the data binding for a combo box control.

 

Approach 1. - Using the bind-to attribute. I added "Selected=true" to one of item in the continents data source. This is okay the control pre-selects the item correctly.

Ref https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/combobox/getting-started#3-select-a-default-value

    @{
        var continents = new List<SelectListItem> {
            new SelectListItem() {Text = "Africa", Value = "1"},
            new SelectListItem() {Text = "Europe", Value = "2"},
            new SelectListItem() {Text = "Asia", Value = "3"},
            new SelectListItem() {Text = "North America", Value = "4", Selected=true},
            new SelectListItem() {Text = "South America", Value = "5"},
            new SelectListItem() {Text = "Antarctica", Value = "6"},
            new SelectListItem() {Text = "Australia", Value = "7"}
        };
    }

    <h4>ComboBox:</h4>
    <kendo-combobox name="combobox1"
                    datatextfield="Text"
                    datavaluefield="Value"
                    placeholder="Select a value"
                    bind-to="continents"
                    style="width: 250px;">
    </kendo-combobox>

 

Approach 2. - Ajax binding. I have the same datasource as Approach 1 to return in TestController.cs. I"m expecting "North America" should be pre-selected but it's not. Is this an expected behavior by design when using Ajax binding that "Selected=true" is not appliable? The reason why I'd like to use "Selected=true" with Ajax binding is because there are some logics in a controller action that set the default value for a combo box. I don't want to use the "value" attribute. I knew using the value attribute works for sure.

Ref https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/combobox/binding/ajax-binding

TestController.cs

    public IActionResult Getcontinents(string payload)
    {
        var continents = new List<SelectListItem> {
            new SelectListItem() {Text = "Africa", Value = "1"},
            new SelectListItem() {Text = "Europe", Value = "2"},
            new SelectListItem() {Text = "Asia", Value = "3"},
            new SelectListItem() {Text = "North America", Value = "4", Selected=true},
            new SelectListItem() {Text = "South America", Value = "5"},
            new SelectListItem() {Text = "Antarctica", Value = "6"},
            new SelectListItem() {Text = "Australia", Value = "7"}
        };

        return Json(continents);
    }

Index.cshtml

    <kendo-combobox name="combobox2"
                    datatextfield="Text"
                    datavaluefield="Value"
                    filter="FilterType.Contains">
        <datasource server-filtering="false">
            <transport>
                <read url="/Test/Getcontinents"/>
            </transport>
        </datasource>
    </kendo-combobox>

Any insights or thoughts?

Thanks,

Bob D

[Mihaela]

Hello Bob,

The behavior you are experiencing when the ComboBox binds to remote data using Ajax binding is expected. Initially, the component is rendered without data. Then, when the Read request retrieves the data, the component's DataSource uses internally the specified "datatextfield" and "datavaluefield" fields to map the options. The "Selected" property is just an additional property, which is not specified or used by the DataSource. The ComboBox does not provide a built-in option that specifies the name of the Model property, which stores the selected option.

When using server binding (the "bind-to" approach), the ComboBox uses the internally the SelectListItem during its initialization, so the respective option is pre-selected based on the "Selected" property.

That said, when the ComboBox binds to remote data, you can pre-select an option by using any of the following approaches:

• Use the "for" attribute to bind the component to a Model property, which value corresponds to the "Value" property of the SelectListItem collection:

// Controller
public IActionResult Index()
{
  return View(new UserViewModel() {  Continent = "4"});
}

//View
@model UserViewModel

<kendo-combobox for="Continent"
                    datatextfield="Text"
                    datavaluefield="Value"
                    filter="FilterType.Contains">
        <datasource server-filtering="false">
            <transport>
                <read url="/Test/Getcontinents"/>
            </transport>
        </datasource>
</kendo-combobox>

For more informaiton, refer to the Model binding documentation.

• Handle the DataBound event of the ComboBox that triggers when the data is already received from the server and use the client-side value() method to pre-select the option based on the "Selected" property.

<kendo-combobox name="combobox2" on-data-bound="onDataBound"
                datatextfield="Text"
                datavaluefield="Value"
                filter="FilterType.Contains">
    <datasource server-filtering="false">
        <transport>
            <read url="/Home/Getcontinents" />
        </transport>
    </datasource>
</kendo-combobox>

<script>
    function onDataBound(e) {
        var comboBox = e.sender;
        var selectedItem = comboBox.dataSource.data().find(x => x.Selected === true);
        if (selectedItem) {
            comboBox.value(selectedItem.Value);
        }
    }
</script>

I hope these examples will be useful to your scenario.

On a separate note, I would like to mention that you can instantiate a trial license, particularly for the Telerik UI for ASP.NET Core suite. This will enable you to receive timely support and open separate ticket threads that will be processed through our internal support system as well. 

Regards,
Mihaela
Progress Telerik