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.