Cascading DropDownList not working in editor

2 posts, 0 answers
  1. Christopher
    Christopher avatar
    24 posts
    Member since:
    Mar 2016

    Posted 02 Jun Link to this post

    I am trying to set up a cascading drop down list using the resources of a scheduler.

    The drop down lists work fine, but when i try to declare the parent/child cascade using the 'cascadeFrom' the cascade does not work at all.

     

    Here is my code:

    <div id="resourcesContainer">
    </div>

    <script>
        jQuery(function () {
            var container = jQuery("#resourcesContainer");
            var resources = jQuery("#scheduler").data("kendoScheduler").resources;
            for (var resource = 0; resource < resources.length; resource++)
            {
                jQuery(kendo.format('<div class="k-edit-label"><label for="{0}">{1}</label></div>', resources[resource].name, resources[resource].title)).appendTo(container);
                var divID = resources[resource].name + "kdd";
                var labcont = jQuery(kendo.format('<div id="{0}" class="k-edit-field"></div>', divID)).appendTo(container);

                if (resources[resource].name !== "LocationRoom") {
                    jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field))
                            .appendTo(labcont)
                            .width(300)
                            .kendoDropDownList({
                                filter: "contains",
                                dataTextField: resources[resource].dataTextField,
                                dataValueField: resources[resource].dataValueField,
                                dataSource: resources[resource].dataSource,
                                valuePrimitive: resources[resource].valuePrimitive,
                                optionLabel: "Select...",
                                template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                            });
                }
                else if(resources[resource].name === "LocationRoom")
                {
                    jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field))
                           .appendTo(labcont)
                           .width(300)
                           .kendoDropDownList({
                               autoBind: false,
                               cascadeFrom: "Locationkdd",
                               optionLabel: "Select location first...",
                               dataTextField: resources[resource].dataTextField,
                               dataValueField: resources[resource].dataValueField,
                               dataSource: resources[resource].dataSource,
                               valuePrimitive: resources[resource].valuePrimitive,
                               template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                           });
                }
            }
        });
    </script>

     

    HOWEVER, if i change jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field)).appendTo(labcont).Width(300)..... to jQuery("#" + divID).Width(300).... it works, but obviously the MVVM binding is completely lost.

    Any ideas?

     

  2. Christopher
    Christopher avatar
    24 posts
    Member since:
    Mar 2016

    Posted 03 Jun in reply to Christopher Link to this post

    Nevermind. I changed it up to get the data using ajax calls instead of resources and that fixed it.
  3. Kendo UI is VS 2017 Ready
Back to Top