Combobox in modal window

[Bernard Jurlina]

I try to render combobox in modal window.

Here is the controller:

Here is the view:

@using Syncfusion.EJ2

@using Syncfusion.EJ2.DropDowns

@model ZgradaWeb.Models.Stan

@Html.EJS().ComboBox("cboxPartner").Placeholder("Izabrati stanara").Autofill(false).PopupHeight("230px").DataSource((IEnumerable<Object>)ViewBag.dsPartner).Fields(new ComboBoxFieldSettings { Text = "PrezimeIme", Value = "PartnerID" }).Render()

But the dropdown with values won't open.

Thanks.

[Bernard Jurlina]

I forgot to mention that I have scriptmanager after combobox.

@using Syncfusion.EJ2

@using Syncfusion.EJ2.DropDowns

@model ZgradaWeb.Models.Stan

@Html.EJS().ComboBox("cboxPartner").Placeholder("Izabrati stanara").Autofill(false).PopupHeight("230px").DataSource((IEnumerable<Object>)ViewBag.dsPartner).Fields(new ComboBoxFieldSettings { Text = "PrezimeIme", Value = "PartnerID" }).Render()

@Html.EJS().ScriptManager()

[Tommy Mailhot]

Try to add zindex = 10000 on your combobox 

[Bernard Jurlina]

Excellent, it's working with zindex.

Thanks!

But, just one more question. Is there some example about binding a combobox on Model data in the view?

For EJ combobox i used a hidden field 

@Html.HiddenFor(model => model.PredstavnikID) and in $(document).ready function I read 

var uid = $("#PredstavnikID").val(); and set the value for the combobox like 

$('#cboxUgo').ejComboBox({ value: parseInt(uid) });

When I try this for the EJ2 combobox like this

$(document).ready(function () {

     var pid = $("#PredstavnikID").val();

     var c_pid = document.getElementById('cboxPartner').ej2_instances[0];

     c_pid.value = pid;

}

it's not working.

Thanks.

[Prince Oliver]

Hi Bernard, 

Thank you for your update. 

After setting the value property in the EJ2 Combo box control, you call the dataBind method to update the changes in the controls. Kindly refer to the following code snippet. 

<script> 

$(document).ready(function () { 

     var pid = $("#PredstavnikID").val(); 

     var c_pid = document.getElementById('cboxPartner').ej2_instances[0]; 

     c_pid.value = pid; 

     c_pid.dataBind(); // Call databind method to update the value in the control 

} 

</script> 

Regards, 

Prince 

[Bernard Jurlina]

Great, thanks Prince!

I have one more situation.

My combo:

JS:

But there is an error:

 

Regards,

Bernard.

[Bernard Jurlina]

Sorry, I type wrong name of the function. Now, the function in JS is partnerchange().

But still:

[Bernard Jurlina]

Hi Bernard, 

Thank you for your update. 

After setting the value property in the EJ2 Combo box control, you call the dataBind method to update the changes in the controls. Kindly refer to the following code snippet. 

<script> 

$(document).ready(function () { 

     var pid = $("#PredstavnikID").val(); 

     var c_pid = document.getElementById('cboxPartner').ej2_instances[0]; 

     c_pid.value = pid; 

     c_pid.dataBind(); // Call databind method to update the value in the control 

} 

</script> 

Regards, 

Prince 

Prince,

you told me like this:

<script> 

$(document).ready(function () { 

     var pid = $("#PredstavnikID").val(); 

     var c_pid = document.getElementById('cboxPartner').ej2_instances[0]; 

     c_pid.value = pid; 

     c_pid.dataBind(); // Call databind method to update the value in the control 

} 

</script> 

And this is my function for that.

But when page loads, I got this:

The value in the combo is 1, but it not shows the text for that value:

Am I missing something?

Thank you!

Bernard.

[Prince Oliver]

Hi Bernard,  

 

Thank you for your update.  

 

By default, allowCustom property is true for Combo box. This allows you to insert custom values in the control. So when you set value is 1, even if the value field in the dataSource doesn’t contain 1, it will be added as a custom value and will be set to text and value. So we suggest you to either use the exact value present in the dataSource value field in the value property or you need to set allowCustom to false. Kindly refer to the following code. 

 

<script>  

    var c_pid = document.getElementById('cboxPartner').ej2_instances[0];  

    c_pid.allowCustom = false; 

</script> 

   

Please let us know if you require any further assistance on this. 

 

Regards,  

Prince  

[Bernard Jurlina]

Excellent, thanks Prince!

Now I know one thing more about combobox. But that was not the case, when I want to set the value from JS.

I need to use parseInt, because the datasource for the combo is <int, string>, and now it's working great.

var pid = $("#PartnerID").val();

var c_pid = document.getElementById('cboxPartner').ej2_instances[0];

c_pid.value = parseInt(pid);

c_pid.dataBind();

Regards,

Bernard.

[Keerthana Rajendran]

Hi Bernard,  

  

Most Welcome. We are glad that the issue has been resolved in your end. Please get back to us if you need further assistance on this. We will be happy to assist you. 

  

Regards, 

Keerthana.