Cascading DropDownLists

5 posts, 1 answers
  1. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 05 Jan 2012 Link to this post

    I'm attempting to create a series of cascading dropdowns by populating the second one from the first, the third from the second and so on, by using the change function.  This works fine the first time a selection is made in each of the DropDownLists, but if I change a selection in the first one after the second DropDownList has been populated, the second DropDownList disappears to never return.  Is there a way to accomplish this?
    $("#algType").kendoDropDownList({
        change: function () {
            algType = $("#algType").data("kendoDropDownList").value();
            $("#substn").kendoDropDownList({
                dataTextField: "Substn",
                dataValueField: "SubstnID",
                dataSource: substnDataSource,
                change: function () {
                    algType = $("#algType").data("kendoDropDownList").value();
                    substn = $("#substn").data("kendoDropDownList").value();
                    $("#devtyp").kendoDropDownList({
                        dataTextField: "Devtyp",
                        dataValueField: "DevtypID",
                        dataSource: devtypDataSource
                    });
                }
            });
        }
    });
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 09 Jan 2012 Link to this post

    Hello,

     
    I will suggest you check this jsFiddle demo, which shows how to implement cascading dropdownlists.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 10 Jan 2012 Link to this post

    Thank you very much.  That helps a lot.
  4. Mangesh
    Mangesh avatar
    16 posts
    Member since:
    Sep 2011

    Posted 25 Jan 2012 Link to this post

    Hi,

    Filtering is not working after using cascading kendodropdownlist:

    Here is my code:-

        $(document).ready(function () {
            var StatedataSource = new kendo.data.DataSource({
                type: "json",
                transport: {
                    read: {
                        type: "POST",
                        url: "GetDocumentType.asmx/GetStateList",
                        contentType: 'application/json; charset=utf-8',
                        datatype: "json"
                    },
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    }
                },
                serverFiltering: true,
                schema: {
                    data: "d",
                    total: function (result) {
                        result = result.d || result;
                        return result.length;
                    }
                }
            });


            $("#states").kendoDropDownList({
                autoBind: false,
                dataTextField: "StateName",
                dataValueField: "StateID",
                dataSource: StatedataSource
            });

            $("#countries").kendoDropDownList({
                dataTextField: "CountryName",
                dataValueField: "CountryID",
                dataSource: {
                    type: "json",
                    serverFiltering: true,
                    transport: {
                        read: {
                            type: "POST",
                            url: "GetDocumentType.asmx/GetCountryList",
                            contentType: 'application/json; charset=utf-8',
                            datatype: "json"
                        },
                        parameterMap: function (options) {
                            return JSON.stringify(options);
                        }
                    },
                    schema: {
                        data: "d",
                        total: function (result) {
                            result = result.d || result;
                            return result.length;
                        }
                    }
                },
                change: function () {
                    StatedataSource.filter({
                        field: "CID",
                        operator: "equals",
                        value: parseInt(this.value())
                    });
                }
            });
        });

    What is the issue of it?

    Regards,
    Mangesh
  5. Mangesh
    Mangesh avatar
    16 posts
    Member since:
    Sep 2011

    Posted 27 Jan 2012 Link to this post

    Please help need to do this asap...
Back to Top