Cascading Dropdownlist

6 posts, 0 answers
  1. Otsile
    Otsile avatar
    2 posts
    Member since:
    Apr 2011

    Posted 14 Aug 2014 Link to this post

    Please help, I am trying to implement a cascading dropdownlist on my app, but it does not work. Please help me what is it that I am not doing right here:

    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>

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 18 Aug 2014 Link to this post

    Hello Otsile,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Otsile
    Otsile avatar
    2 posts
    Member since:
    Apr 2011

    Posted 18 Aug 2014 in reply to Georgi Krustev Link to this post

    I have  tried to attached test project but it seems as if the file cannot be attached, I have saved them on my dropbox here is the link to download it from ~~> https://www.dropbox.com/s/hfp9i2uceq1g64o/CascadingMvcDropdownMunicipality.zip
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 19 Aug 2014 Link to this post

    Hello Otsile,

    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");
    });
    Please note that I was not able to display the items, because the project was pointing to a data base that is not available in the archive.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Manish
    Manish avatar
    2 posts
    Member since:
    Jun 2016

    Posted 06 May 2017 Link to this post

    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);    }

  6. Ianko
    Admin
    Ianko avatar
    1897 posts

    Posted 09 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top