How to set the selected item in Combo box.

[kalum]

Hi,

I need to set the selected item of a combo box using a value came from my database. My code is bellow. In that if i provide the Id then it should display the text itself when i press an external button. How can i do it. Please help.

  @{
                        Html.EJ()
                        .ComboBox("AccTypesList")
                        .AllowFiltering(true)
                        .ComboBoxFields(h => h.Text("Name").Value("Id"))
                        .Query("new ej.Query().select(['Value','Text']).take(50)")
                        .ClientSideEvents(h => h.Filtering("filtering"))
                        .Datasource((IEnumerable<Object>)ViewBag.AccTypes)
                        .Placeholder("Select an Account Type")
                        .Width("215")
                        .Render();
                    }

Thank you,

Kalum

[Shanmugaraja K]

Hi Kalum, 

 

Thank you for using Syncfusion products. 

 

We can set the selected item for the combobox using the value from the database, by assigning it to the control’s Value property. Kindly refer to the following code example. 

 

[View] 

@{ 

    Html.EJ() 

    .ComboBox("AccTypesList") 

    .AllowFiltering(true) 

    .ComboBoxFields(h => h.Text("Name").Value("Id")) 

    .Query("new ej.Query().select(['Value','Text']).take(50)") 

    .ClientSideEvents(h => h.Filtering("filtering")) 

    .Datasource((IEnumerable<Object>)ViewBag.AccTypes) 

    .Placeholder("Select an Account Type") 

    .Width("215") 

    .Value(Model.value) // value from the database assigned using model 

    .Render(); 

} 

 

 

[Controller] 

            ComboboxModel model = new ComboboxModel(): 

            model.value = "12547";  //Value retrieved from the dataBase 

            return View(model); 

 

 

In case you need to set the value on user interaction like button click, then you can use the click handler function to set the values, refer to the following code. 

 

<script> 

    $("#btn1").on("click", function () { 

        var comboObj = $("#AccTypesList").data("ejComboBox"); // accessing controls instance 

        comboObj.setModel({ value: "12547" }); 

    }); 

</script> 

 

 

Regards, 

Shanmugaraja K