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.
Unfortunately, activation email could not send to your email. Please try again.

Dropdown Cascade using WebAPI Data Adaptor

Thread ID:

Created:

Updated:

Platform:

Replies:

130360 May 8,2017 06:30 PM May 15,2017 08:39 AM ASP.NET Core 3
loading
Tags: DropDownList
Paddy McAllister
Asked On May 8, 2017 06:30 PM

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 09:06 AM

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 12:29 PM

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 08:39 AM

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.

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.

;