Dropdown Cascade using WebAPI Data Adaptor

[Paddy McAllister]

Hi,

Is it possible to cascade 2 dropdown lists when using WebAPI Data?

I have 2 Web Api methods :

1. Get Car Makes
2. Get Car Models By Make Id

I'm fairly new to Synchfusion and looked through the documentation but can't see any material on Cascading when using Web Api data.

The first dropdown selects the car makes and I need to pass the selected value to the Web Api method in the second dropdown

Is this possible? if so, anyone throw me some pointers? Thanks

So far I have

<ej-drop-down-list id="makeList" cascade-to="modelsList,MakeId">

<e-datamanager url="/Data/GetTuningBoxMakes" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>

<e-drop-down-list-fields text="Text" value="Id" />

</ej-drop-down-list>

<ej-drop-down-list id="modelsList">

<e-datamanager url="/Data/GetTuningBoxModels?MakeId=BMW" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>

<e-drop-down-list-fields text="Text" value="Id" />

</ej-drop-down-list>

[Karthikeyan Viswanathan]

Hi Paddy, 

 

Thanks for contacting Syncfusion support.       

   

In Web Api databinding, data request will be raised to server based on the query it will return the complete data. So Web Api databinding, you should execute the query based on the parent dropdown list selection.    

  

Please refer to the code snippet:   

<code> 

<ej-drop-down-list id="makeList" cascade-to="modelsList,MakeId" cascade="dropcascade"> 

 

<e-datamanager url="/Data/GetTuningBoxMakes" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager> 

 

<e-drop-down-list-fields text="Text" value="Id" /> 

 

</ej-drop-down-list> 

 

    <ej-drop-down-list id="modelsList"> 

 

<e-datamanager url="/Data/GetTuningBoxModels?MakeId=BMW" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager> 

 

<e-drop-down-list-fields text="Text" value="Id" /> 

 

</ej-drop-down-list> 

</code> 

<code> 

<script type="text/javascript"> 

        function dropcascade(args) { 

            args.cascadeQuery = ej.Query().where(args.model.fields.value, "==", args.cascadeValue); 

        } 

    </script> 

</code> 

Regards, 

Karthikeyan V. 

[Paddy McAllister]

Thanks for the reply Karthikeyan ...

I can understand your view but its not going to be the solution I need.
Is it possible to have cascading dropdowns using the synchfusion dropdown control that loads data on demand? Either by using WebAPI or Controller Actions? I don’t want to use the complete data.
e.g.

• I have a WebApi method that returns a list of Makes - GetTuningBoxMakes
• I have a WebApi method that returns Models based on the Id of the Make - GetTuningBoxModels(MakeId)

Would this be done using javescript? 

[Karthikeyan Viswanathan]

Hi Paddy,  

 

 By default, Dropdownlist cascading not be support virtual scrolling. You can achieve this requirement using change event. Please refer to the code snippet: 

 

<code>  

<ej-drop-down-list id="makeList" allow-virtual-scrolling="true" virtual-scroll-mode=@VirtualScrollMode.Normal items-count=10 change="dropcascade" >  

  

<e-datamanager url="/Data/GetTuningBoxMakes" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>  

  

<e-drop-down-list-fields text="Text" value="Id" />  

  

</ej-drop-down-list>  

  

    <ej-drop-down-list id="modelsList" allow-virtual-scrolling="true" virtual-scroll-mode=@VirtualScrollMode.Normal items-count=10>  

  

<e-datamanager url="/Data/GetTuningBoxModels?MakeId=BMW"adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>  

  

<e-drop-down-list-fields text="Text" value="Id" />  

  

</ej-drop-down-list>  

 

</code>  

 

<code>  

<script type="text/javascript">  

        function dropcascade(args) {  

 

            if (this.getSelectedValue()) {  

 

                var Orders = $('#modelsList’).data('ejDropDownList');  

                var dataManager = new ej.DataManager({  

                    url: "/Data/GetTuningBoxModels?MakeId=" + $('#makeList').data('ejDropDownList').getSelectedValue() +"&vendorId=" + this.getSelectedValue(),  

                    adaptor: "UrlAdaptor"  

            });  

                Orders.element.val("");  

                Orders.option({ dataSource: null });  

            Orders.option({ dataSource: dataManager });  

        }  

        }  

    </script>  

 

</code>  

Regards, 

Karthikeyan V. 

[Sanaj M Shaji]

<ejs-dropdownlist id="countries" change="OnCountryChange" ejs-for="@Model.Country">
 <e-data-manager url="/api/globalstore/countries" adaptor="WebApiAdaptor" offline="false"></e-data-manager>
<e-dropdownlist-fields text="country_name" value="country_code"></e-dropdownlist-fields>
</ejs-dropdownlist>

<ejs-dropdownlist id="cities" enabled="false" ejs-for="@Model.City">
<e-data-manager url="/api/globalstore/cities?country=A" adaptor="WebApiAdaptor" offline="false"></e-data-manager>
 <e-dropdownlist-fields text="city_name" value="city_name"></e-dropdownlist-fields>
</ejs-dropdownlist>

<script type="text/javascript">
    function OnCountryChange() {
        var country = document.getElementById('countries').ej2_instances[0];
        var city = document.getElementById('cities').ej2_instances[0];
        city.enabled = true;
        var dataManager = new ejs.data.DataManager({
            url: "/api/globalstore/cities?country=" + country.value,
            adaptor: new ejs.data.WebApiAdaptor(),
            offline: false
        });
        city.itemData = null;
        city.dataSource = null;
        city.dataSource = dataManager;
    }
</script>

[Indhumathy Loganathan]

Hi Sanaj,

We are glad that you have resolved the query with a workaround. Please get back to us if you need any further assistance.

Regards,

Indhumathy L