Cascading ComboBox

[Corazon Cruz Sanchez]

Hi,

I need your help

I have a form of 3 combobox and I want to load them in cascade on your page, but when loading a lot of information in the combobox, the page is encouraged

There is some way to do the first load of the combobox and then with the onchange event do the second load of the second combobox and so on, so that the load is only used when needed and not load the 3 combobox from the start

Regards!

[Karthikeyan Viswanathan]

Hi Corazon, 

Thanks for contacting Syncfusion support. 

Based on your scenario, you can assign the dataSource in change event by using dataSource property. 

Please refer the below code example: 

<code> 

<ejs-combobox id="state" enabled="false" placeholder="Select a state" allowCustom="false" change="statechange"> 

                <e-combobox-fields text="stateName" value="stateId"></e-combobox-fields> 

            </ejs-combobox> 

 

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

state.dataSource = @Html.Raw(Json.Serialize(ViewBag.state)); 

state.dataBind(); 

</code> 

For your convenience, we have prepared a sample for your requirement. 

Sample link: http://www.syncfusion.com/downloads/support/forum/139456/ze/CASCAD~1-1282903042.zip  

Regards, 

Karthikeyan V. 

[Corazon Cruz Sanchez]

Hi Karthikeyan,

Thanks for the reply.

You can at the beginning only send the list of the ViewBag = state and the other ViewBag when clicking on the first combobox and so on.

I wish that only the action stayed like this:

      public IActionResult Index()

        {

            ViewBag.state = new State().StateList();

            return View();

        }

Regards!

[Karthikeyan Viswanathan]

Hi Corazon,    

   

Yes, you can bind the data to first combobox at initial and other controls can be assigned in change event.   

   

• Initially, you can render the component without any data or viewbag datasource.

<code>   

<ejs-combobox id="city" placeholder="Select a city" enabled="false" allowCustom="false"popupHeight="@ViewBag.popupHeight" >   

                <e-combobox-fields text="cityName" value="cityId"></e-combobox-fields>   

            </ejs-combobox>   

   

   

</code>   

   

   

• In change event, you can assign the data in any of the way or even ajax success function you can bind the data to combobox by using dataSource property.

<code>   

   

var city = document.getElementById('city').ej2_instances[0]; // Control instance   

   

// for an example   

   

$.ajax({   

   

 Success: function(args) {   

   city.dataSource = args.result;   

   

        city.enabled = true;   

   

}   

})   

   

           

   

</code>   

   

   

   

Regards,    

Karthikeyan V.