"ej-for" not honoring text/value field mapping during initialization

[Andy Gray]

I have declared a combo box with the ej-for attribute and separate text and value fields, like this:

      <ej-combo-box id="Categories" datasource="(IEnumerable<CategoryViewModel>)ViewBag.Categories" ej-for="CategoryId" allow-custom="false">

        <e-combo-box-fields text="Name" value="Id" />

      </ej-combo-box>

While the items in the dropdown correctly show the category names, the combo box initially displays the value field (i.e. the number 0) instead of the text field (i.e. "Foreclosure").

I have attached a stripped-down sample that illustrates the behavior. The sample viewmodel has a CategoryId property; the user can select a category name in the combo box to set the CategoryId accordingly. When the page is rendered, the combo box shows the category Id (0) instead of the category Name ("Foreclosure").

If you use the dropdown to change the category to "Easement" and click Save, the correct CategoryId (1) is posted back, so it appears that the issue is with the initial display, not the binding itself.

This is a fairly significant issue for data binding the combo boxes within our application, so hopefully it can be addressed expediently.

Thanks --

--Andy

Attachment: SyncfusionComboBox_818925a1.zip

[Keerthana Rajendran]

Hi Andy,  

 

Thank you for  contacting Syncfusion support. 

 

Currently we don’t have support for ej-for in our combobox control. We suggest you to use value property to set value for combobox initially  

 

<ej-combo-box id="Categories" datasource="(IEnumerable<CategoryViewModel>)ViewBag.Categories" create="oncreate" value="0" allow-custom="false"> 

        <e-combo-box-fields text="Name" value="Id" /> 

           

      </ej-combo-box> 

 

If the type of value field is integer, please pass this value through parseInt during create event of Combobox as shown below. 

 

 

<script> 

        function oncreate(e) 

        { 

           this.option("value", parseInt(this.model.value)); 

 

        } 

    </script> 

 

We have modified your sample based on this which can be downloaded from: 

 

http://www.syncfusion.com/downloads/support/forum/134965/ze/SyncfusionComboBox218714593 

 

Regards, 

Keerthana. 

 

[Andy Gray]

Thanks for the reply, Keerthana.

In that case, how should the selected value be bound back to the viewmodel when the form is submitted?

Thanks --

--Andy

[Keerthana Rajendran]

Hi Andy,  

 

You can receive the selected value on form submit through id of combo box as shown below 

 

 

         [HttpPost] 

        [ValidateAntiForgeryToken] 

        public IActionResult Edit(ParcelViewModel viewModel, string Categories) 

        { 

            if (ModelState.IsValid) 

            { 

            } 

 

            return RedirectToAction("Index"); 

        } 

 

The selected value will be returned as shown below 

 

 

We have attached modified sample for your reference which can be downloaded from: 

 

http://www.syncfusion.com/downloads/support/forum/134965/ze/ComboBox2079186712 

 

Regards, 

Keerthana. 

 

[Andy Gray]

Thanks. I was able to get pretty close to what I wanted, with two minor updates to the view in the code you sent back:

1) The value field should be initialized to the CategoryId in the view model, not hardcoded to zero: value="@Model.CategoryId"

2) If the id of the combo box is set to the corresponding view model property (e.g. id="CategoryId"), then it is mapped to the matching view model property on the post back, without requiring an additional parameter on the controller action.

So the combo box declaration ended up like this:

      <ej-combo-box id="CategoryId" datasource="(IEnumerable<CategoryViewModel>)ViewBag.Categories" value="@Model.CategoryId" create="oncreate" allow-custom="false">

        <e-combo-box-fields text="Name" value="Id" />

      </ej-combo-box>

I still hope that you will complete the implementation of the "ej-for" attribute for combo boxes, as that's far more convenient than adding custom JavaScript for each combo box in a view. But thanks for the workaround in the interim.

--Andy

[Keerthana Rajendran]

Hi Andy, 

 

Thanks for your update. 

 

Yes, you can use @Model.CategoryId for value attribute as well as you can set id to corresponding model property as mentioned in your update. We will implement “ej-for” attribute for combo box and include in our future release. 

 

 

Regards, 

Keerthana.