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.
Syncfusion Feedback

CascadeTo Example

Thread ID:

Created:

Updated:

Platform:

Replies:

129680 Mar 28,2017 02:25 PM UTC Mar 29,2017 02:21 PM UTC JavaScript 2
loading
Tags: ejListBox
James Rainey
Asked On March 28, 2017 02:25 PM UTC

I have a page with two ListBoxes.  I would like a selection in ListBox1 to cascade to the second ListBox and a DataManager using a UrlAdapter to pass values to the server and load the data that way using a WebMethod.  There are, however, a dearth of examples of this kind of behavior, though.

Help me Obi Wan Kenobi, you are my only hope...

James Rainey
Replied On March 29, 2017 01:17 PM UTC

Anyone?

Bueller? Bueller?

Arun Palaniyandi [Syncfusion]
Replied On March 29, 2017 02:21 PM UTC

Hi James, 

 

Thanks for contacting Syncfusion support. 

 

We have your analyzed scenario of ListBox Cascading with UrlAdaptor and have come up with a solution.  To filter the data based on parentID, we suggest you to use headers option of dataManager. If you have passed querystring with dataManager Url, first item is selected and filtered correctly. But while selecting next item in listbox, this args.value is appended to previous url. So that unsupported url type error throws. To overcome this behavior, you need to pass the cascade value to controller using headers option in ej.Datamanager and bind the filtered data to next Listbox.  

Please refer to the below code snippet to achieve this.  

 
 
<div class="contents"> 
                <span class="txt">Select Group :</span> 
                <ul id="groupsList"></ul> 
            </div> 
            <div class="contents col-sm-offset-2"> 
                <span class="txt">Select Country:</span> 
             
                <ul id="countryList"></ul> 
            </div> 
 
<script type="text/javascript"> 
 
 
    $(function () { 
 
    var dataManager = ej.DataManager({ 
        url: "/ListBox/GetGroupsJson", 
        crossDomain: true, 
        adaptor: "UrlAdaptor", 
    }); 
    var query = new ej.Query(); 
 
 
        $('#countryList').ejListBox({ 
 
        }); 
        $('#groupsList').ejListBox({ 
            dataSource: dataManager, 
            query:query,       
            fields: { value: "parentId",text:"text" }, 
            select: "onselect" 
        }); 
    });    
 
 function onselect(args) { 
         var parentId = args.value; 
         var dataManager = ej.DataManager({ 
             url: "/ListBox/GetCountriesJson", 
             crossDomain: true, 
             adaptor: "UrlAdaptor", 
             headers: [{parentId : parentId}] 
         }); 
         var query = new ej.Query(); 
         var promise = dataManager.executeQuery(query); 
         promise.done(function (e) { 
             data = e.result.result; 
             $("#countryList").ejListBox({ 
                 dataSource: data, 
                 fields: { value: "parentId", text: "text" }, 
             }); 
         }); 
     } 
</script> 
 
 

 

Please find the below sample for your reference: 

http://www.syncfusion.com/downloads/support/directtrac/129680/ze/ListBoxCascadingURLJS-1541036848 

 

 

If the above sample and details do not meet your requirement, please give us more information that will help us provide the solution.  

       

Regards, 

Arun P. 

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

;