Set Initial Value of ComboBox

[Dave Nixon]

I am using

 @Html.EJS().ComboBox("JobTypeCategoryId").Change("onJobTypeCategoryChange").Placeholder("Select Job Type Category").ShowClearButton().DataSource(dataManger => { dataManger.Url("/api/JobTypeCategory").Adaptor("WebApiAdaptor").CrossDomain(true); }).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Value = "Id", Text = "Description" }).Autofill(true).Render()

It doesn't load data or set the value?

[Keerthana Rajendran]

Hi Dave,   

   

Thank you for contacting Syncfusion Support.   

   

We have checked the reported issue by binding data to ComboBox through WebApiAdaptor. Sample works fine at our end. To set preselected value during initial rendering, we suggest you to use Value property as shown in the below code.   

   

@Html.EJS().ComboBox("customers").Placeholder("Select Job Type Category").ShowClearButton().DataSource(dataManger =>{dataManger.Url("/api/values").Adaptor("WebApiAdaptor").CrossDomain(true);}).Fields(newSyncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Value = "CustomerID", Text = "CustomerID"}).Value("HANAR").Width("300").Autofill(true).Render()   

   

Sample: http://www.syncfusion.com/downloads/support/forum/137812/ze/WebApplication1-1446537710   

   

UG Link: https://ej2.syncfusion.com/16.1.24/angular/documentation/combo-box/api-comboBoxComponent.html#value   

   

   

Please check the above sample and ensure whether the url provided for WebApi is correct in your sample (paste the url in a separate tab and check whether the WebApi method is hit). This issue may occur when the WebApi is not registered correctly. So kindly check whether the routing is mapped correctly in WebApiConfig.cs  file of App_Start folder in your end as done in the above sample.   

   

If the request is sent correctly, please check whether you receive the response in network tab as shown in the below image   

   

    

   

We have used all the properties mentioned in your update and when incorrect mapper fields (text and value) are bound,  the popup will be shown as below.   

   

    

Please confirm us whether you face this kind of issue.   

   

If issue persists, kindly modify the provided sample so that we can proceed further.   

   

Regards,   

Keerthana 

[Dave Nixon]

This is what I have in the code

@Html.EJS().ComboBox("customerList").Placeholder("Select Customer").ShowClearButton().Change("onCustomerChange").DataSource(dataManger => { dataManger.Url("/api/Customer").Adaptor("WebApiAdaptor").CrossDomain(true); }).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Value = "Id", Text = "Name" }).Autofill(true).AllowCustom(false).Value(Model.CustomerID.ToString()).Render()

If I change AllowCustom to true it shows the Value as the text of the combobox

. it should be showing the text for the value not the value?

[Keerthana Rajendran]

 

Hi Dave, 

 

Sorry for the inconvenience. 

 

We were able to reproduce the issue in our end. This issue occurs because the field mapped for value is integer type and the value mapped to Value property is string type. So this value is not matched with dataSource and it is considered as custom value. This will be resolved when int value is mapped for Value property. We will include “Support for mapping integer value with Value property for MVC” in upcoming Volume 2, 2018 release which will be rolled out by next week. As a workaround , we suggest you to use parseInt to parse the string value to select an item in actionComplete event as shown below 

 

@Html.EJS().ComboBox("customers").Placeholder("Select Job Type Category").ShowClearButton().DataSource(dataManger => { dataManger.Url("/api/values").Adaptor("WebApiAdaptor").CrossDomain(true); }).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Value = "OrderID", Text = "CustomerID" }).Value(10250).Width("300").Autofill(true).AllowCustom(true).ActionComplete("onComplete").Render() 

<script> 

    function onComplete(args) { 

        var ins = document.getElementById("customers").ej2_instances[0]; 

        ins.value = parseInt(ins.value); 

    } 

</script> 

 

We have modified our previous sample based on this which can be downloaded from the below link 

 

http://www.syncfusion.com/downloads/support/forum/137812/ze/WebApplication-958548264 

 

Regards, 

Keerthana. 

[Dave Nixon]

Has this been corrected?  It still seams to be an issue.

[Prince Oliver]

Hi Dave, 

Thank you for your update. 

Yes, the issue has been fixed and the fix is included since volume 2, 2018 release. We have attached a sample with latest assembly for reference below. 

Sample 

We suggest you to clear cache and clean your project once before running it. 

Regards, 

Prince