ArticlesBlog

Create a Cascading ComboBox Using Vue ComboBox

Create a Cascading ComboBox Using Vue ComboBox


Hi everyone, Welcome back. In this video, I will explain you, how to configure the cascading combo box using the Vue Combo Box of Syncfusion. Look at this online example, you can see here, the series of combobox components. You can
also notice that when I select the country name from countries combo box, the respective state combobox is enabled now. Similarly, after I choose any
state from the states combobox the city combobox gets enabled. So now let me show you the steps
to render such a series of combobox components and how to
configure the value of the single combo box that depends on
another combo box value using my existing getting started application. First, let me open
my existing getting started application where I have added the vue combobox with remote data. If you want to know how to create a simple vue combo box,  then you can listen to my getting started video the link for which is shown in the about YouTube card. Also, you can download this existing getting started example from the GitHub
Link, which I have shared in the description part below. Now to have better clarity, I’m replacing this remote data with JSON data collection which contains an array of objects with 2 fields namely CountryName and CountryId. Also I have mapped CountryName to field to text property and CountryId field to value property. I have assigned the country names to data source so let me change the placeholder property value as’ Select a country’. Also, ensure whether this dataItem and dataFields variables are assigned to the dataSource and fields property of the combo box. So here you can see the combo
box showing country names. Now let me show you the
steps to configure the cascading combo box. To create a cascading combo box, first I need to render a series of combobox components. So I will define one more combo
box inside the template section. Here, I’m going to assign state
names as data source for this newly defined combo box, therefore within the data function, let me define a variable state DataItem and assign JSON data source which contains an array of objects with 2 fields namely StateName and State Id. For this data source the
appropriate data source field should be mapped to the fields
property of the Combo Box component, so I need to define a variable stateDataFields and map these fields StateName to text property and StateId to value property. Now let me assign these variables state DataItem and stateDataFields to the dataSource and fields property of the combo box. Along with this, I have also
defined the placeholder property and set its value as ‘Select a state’, as the popup displays the selected country state names. And now you can see the combobox components rendered one after the other. You can also notice that the state combobox components is enabled and displaying the
state names even though the country combobox has no selected value. So to disable
the state combo box and to populate the state names only
based on the selected country value, I need to write logic for handling this scenario. First, to disable the state combo box component, I will set it’s enabled property to
false for that. I will define a variable enableCombobox and set its value as false within data function. Then I will assign this variable enable Combobox to the enabled property of the state combo box. I will also define a query property to state combo box and set its value as null at its initial load. For that let me
define another variable child DataQuery with null value and assign it to query property. And I will explain about the need of
this query property a bit later. Next I will populate state names to state combo box based on the selected country value, for that, I will map the appropriate state names, too relevant countries in the first combo box component. So let me define one more field country Id with appropriate values mapping to the state
combo box data source items. Then, within country combobox code,I’m going to define change event with relevant handler to load data on state combobox component based on the selected
value in the country combo box. Now I will start to define onCountry Change event handler, therefore let me add method section first and define this event handler within it. Here, if a country name is
selected then this change, even will be triggered so within this on CountryChange method, I need to enable the state combo box component, by passing the value true to this enable Combobox variable. Now I’m going to fetch state names based on the selected country value, so I will create a reference to country combo box by defining the ref attribute to access the country combo box selected
value. Also I need to form a query and assign it to a variable child DataQuery to fetch state names based on the country combobox selected value. To make use of this query, let me import query type from syncfusion/ej2-data repository. Look at the combo box components, the state ComboBox is disabled initially. And if I select any
country named from country combo box, only then, the state combobox gets enabled showing the relevant state names based
on the selected country value. Like this, you can render n number of combobox components and configure each of its value
depending on the other. Ok, let me summarize some of the important points now. We have seen how to add series of Vue Combo Box of Syncfusion to the Vue application. Also, we have seen how to configure cascading combo box. If you’d like to see the working of this example, you can download it from the GitHub link, which is shared in the description part below. If you find this video as useful don’t forget to click the like button and subscribe to a channel. Thanks for
watching this video.

Comment here