We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dropdown Cascade using WebAPI Data Adaptor

Thread ID:

Created:

Updated:

Platform:

Replies:

130360 May 8,2017 10:30 PM UTC May 15,2017 12:39 PM UTC ASP.NET Core 3
loading
Tags: DropDownList
Paddy McAllister
Asked On May 8, 2017 10:30 PM UTC

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 [Syncfusion]
Replied On May 9, 2017 01:06 PM UTC

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
Replied On May 12, 2017 04:29 PM UTC

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 [Syncfusion]
Replied On May 15, 2017 12:39 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;