My controller
namespace TelerikMvcDropdownMunicipality.Controllers{ using System.Linq; using System.Web.Mvc; using TelerikMvcDropdownMunicipality.Models; using System.Data; using System.Data.Entity; public partial class MunicipalController : Controller { public ActionResult Index() { return View(); } public JsonResult GetCascadeDistricts() { var municipality = new MunicipalityEntities(); return Json(municipality.Districts.Select(d => new { DistrictId = d.DistrictId, DistrictName = d.DistrictName }), JsonRequestBehavior.AllowGet); } public JsonResult GetCascadeLocals(int? districts) { var municipality = new MunicipalityEntities(); var locals = municipality.Locals.AsQueryable(); if (districts != null) { locals = locals.Where(l => l.DistrictId == districts); } return Json(locals.Select(l => new { LocalId = l.LocalId, LocalMunName = l.LocalName }), JsonRequestBehavior.AllowGet); } public JsonResult GetCascadeTowns(int? locals) { var municipality = new MunicipalityEntities(); var towns = municipality.Towns.AsQueryable(); if (locals != null) { towns = towns.Where(t => t.LocalId == locals); } return Json(towns.Select(t => new { TownId = t.TownId, TownName = t.TownName }), JsonRequestBehavior.AllowGet); } }}
and my view is:
@{
ViewBag.Title = "Index";
}
<div class="demo-section" style="width: 250px;">
<h2>Municipalities</h2>
<p>
<label for="districts"> Districts</label>
@(Html.Kendo().DropDownList()
.Name("districts")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select district...")
.DataTextField("DistrictName")
.DataValueField("DistrictId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeDistricts", "ComboBox");
});
})
)
</p>
<p>
<label for="locals">Locals</label>
@(Html.Kendo().DropDownList()
.Name("locals")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select local...")
.DataTextField("LocalName")
.DataValueField("LocalId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeLocals", "ComboBox")
.Data("filterLocals");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("districts")
)
<script>
function filterLocals() {
return {
districts: $("#districts").val()
};
}
</script>
</p>
<p>
<label for="towns">Towns</label>
@(Html.Kendo().DropDownList()
.Name("towns")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select towns")
.DataTextField("TownName")
.DataValueField("TownId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCascadeTowns", "ComboBox")
.Data("filterTowns");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("towns")
)
<script>
function filterTowns() {
return {
towns: $("#filterTowns").val()
};
}
</script>
</p>
</div>
<script>
$(document).ready(function () {
var districts = $("#districts").data("kendoDropDownList"),
locals = $("#localMun").data("kendoDownList"),
towns = $("#towns").data("kendoDropDownList");
$("#get").click(function () {
var districtInfo = "\nDistricts: { id: " + districts.value() + ", name: " + districts.text() + " }",
localInfo = "\nLocal: { id: " + locals.value() + ", name: " + locals.text() + " }",
townInfo = "\nTown: { id: " + towns.value() + ", name: " + towns.text() + " }";
alert("Town details:\n" + districtInfo + localInfo + townInfo);
});
});
</script>
5 Answers, 1 is accepted
At first glance, the cascading functionality is implemented correctly. The first two widgets are defined properly. The third one, however, cascades from "towns", which I believe should be "locals". Also values send to the server are retrieved from "filterTowns". Is there a such element on the page?
If the problem still persists I will ask you to send us a runnable test project, which reproduces the problem. Thus we will be able to investigate the problematic page locally and advice you further.
Regards,
Georgi Krustev
Telerik
Rank 1
Thank you for the attached test project (as a side note the max size of the allowed file is 20MB). I was able to run it and observe that the first widget is not bound (stays empty). After further investigation, I noticed that the widgets point to ComboBox controller​, rather than to Municipal. Changing the configuration to this one should resolve the problem:
...source.Read(read =>{ read.Action("GetCascadeDistricts", "Municipal");});Regards,
Georgi Krustev
Telerik
Rank 1
Hi,
I am using cascade dropdownlist using OData anf filter options also using parameter map and I am having 3 dropdown.
All binding I did from html page and is working fine from binding side. Now cascade works only in first two dropdown but not with 3rd dropdown.
My unique case is that I am having only one datasource and using same datasource I am applying different filters for 3 dropdowns like first to second and second to third and using some column as from field.
I am not able to get why is working only for first two dropdown and seen that 3rd one is always enabled but when I change value in 2nd , the value is 3rd is populating.
Also while loading the page even if 3rd dropdown is using from field of 2nd then why query is being fired to get the filters and data.
Please help as I discussed in my team but no luck till date, even not able to find in telerik about using one datasource for casacading. FYI --> I tried cascade method from code also but same issue.
Code glimpse:
private initializeArea() { const requestUrl = this.modelServiceUrl + '/ObjectInstances()?$filter=TypeName eq \'Production Area\' and FullyQualifiedNames/any(z:startswith(z/Uri,\'' + this.baseFqn + '\'))', options = { url: requestUrl, model: { fields: { ShortDisplayName: { type: 'string' }, Id: { type: 'int' } } }, sorting: { field: 'ShortDisplayName', dir: 'asc' } }; this.set('areas', new kendo.data.DataSource(EmsConsole.Console.createODataDataSourceOptions(options))); } private initializeEquipmentType() { const requestUrl = this.modelServiceUrl + '/ObjectInstances()', options = { url: requestUrl, //parameterMap(data) { // const result = kendo.data.transports['odata-v4'].parameterMap(data); // if (result.$filter) { // result // .$filter = // '(substringof(\':FACILITY_ELEMENT:\',ObjectType/Uri) or ObjectType/Name eq \'FACILITY_ELEMENT\') and (TypeName ne null) and ' + result.$filter; // result.$filter = result.$filter // .replace(/Id/g, 'AncestorRelation/any(z:z/AncestorObjectInstanceId') + // ')'; // } // return result; //}, model: { fields: { ShortDisplayName: { type: 'string' }, Id: { type: 'int' }, TypeName: { type: 'string' } } }, sorting: { field: 'TypeName', dir: 'asc' }, parse(data) { data = EmsCommon.Common.insertDistinctValues(data, 'TypeName'); return data; } }; this.set('equipmentTypes', new kendo.data.DataSource(EmsConsole.Console.createODataDataSourceOptions(options))); } private initializeEquipmentName() { const that = this, requestUrl = this.modelServiceUrl + '/ObjectInstances()', options = { url: requestUrl, parameterMap(data) { const result = kendo.data.transports['odata-v4'].parameterMap(data); //if (data.filter.filters[0].value === ' ') // $.Callbacks().disable(); if (result.$filter) { result .$filter = '(substringof(\':FACILITY_ELEMENT:\',ObjectType/Uri) or ObjectType/Name eq \'FACILITY_ELEMENT\') ' + 'and (ShortDisplayName ne null) and AncestorRelation/any(z:z/AncestorObjectInstanceId eq ' + that.selectedArea + ' and ' + result.$filter + ')'; } return result; }, model: { fields: { ShortDisplayName: { type: 'string' }, Id: { type: 'int' }, TypeName: { type: 'string' } } }, sorting: { field: 'ShortDisplayName', dir: 'asc' }, parse(data) { data = EmsCommon.Common.insertDistinctValues(data, 'ShortDisplayName'); return data; } }; this.set('equipmentNames', new kendo.data.DataSource(EmsConsole.Console.createODataDataSourceOptions(options))); //that.set('isNameDisabled', true); }
Hello Manish,
The case you have is different from the one discussed in this forum thread. This is why it would be better to be examined in a fresh forum thread. Please open a new forum thread or support ticket and elaborate more on the case. If possible, provide a simple, locally runnable project that demonstrates the difficulties you have so that we can examine the case properly.
Regards,Ianko
Telerik by Progress