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. Image for the cookie policy date
close icon

CascadeTo Example

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

2 Replies

JR James Rainey March 29, 2017 01:17 PM UTC

Anyone?

Bueller? Bueller?


AP Arun Palaniyandi Syncfusion Team 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. 

SIGN IN To post a reply.
Loader.
Live Chat Icon For mobile
Up arrow icon