What is failing on my kendo cascading dropdownlist.Only works first time

Question

So im currently using 2 dropdownlists where the second should get items from the server according to the selected item from the first one, the problem is that this only works the first timei click on the child droplist, which means if i change the parent list item the child one will still show the previous items.

Here's some code:

   kendofi=function (index){
    //kendofi select boxes
    $("#dynamicFormLinha"+index).kendoDropDownList({
        name:"formularios",
        optionLabel: "Formulario",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
            },
            schema: {
                model: {
                    fields: {
                        id: { type: "number" },
                        name: { type: "string" }
                    }
                }
            }
        }
    }).data("kendoDropDownList");

    $("#campoFormLinha"+index).kendoDropDownList({
        autoBind:false,
        name:"campos",
        optionLabel: "Campo",
        dataTextField: "name",
        dataValueField: "id",
        dataSource: {
            type: "json",
            serverFiltering:true,
            transport: {

                read:{
                    url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                    data:function(){

                        return {formId: $("#dynamicFormLinha"+index).val()
                        };
                    }
                }
            }
        },
        cascadeFrom: "dynamicFormLinha1",
        schema: {
            model: {
                fields: {
                    id: { type: "number" },
                    name: { type: "string" }
                }
            }
        }
    }).data("kendoDropDownList");

And here's the java spring controller class methods for each dropdownlist:

 @RequestMapping(method = RequestMethod.GET, value="/newlayout/mySearchesDynForms")
public @ResponseBody
DynamicFormTemplateDPO[] getForms(){
 return  dynamicFormService.getAllActiveFormTemplatesForPresentation();
}

@RequestMapping(method = RequestMethod.GET, value="/newlayout/mySearchesFormFieds")
public @ResponseBody
DynamicFieldTemplateDPO[] getFormFields(@RequestParam long formId){
    return dynamicFormService.getFormFields(formId);
}

These all return json data, the parent child returns this:

[{"id":1,"name":"drcie"},{"id":2,"name":"edp"},{"id":3,"name":"pt"}]

And the id selected is then used as the formId parameter in the getFormFields method, which returns something like this:

[{"id":1,"name":"Nome","type":"STRING"},{"id":2,"name":"Morada","type":"STRING"},{"id":3,"name":"Contribuinte","type":"STRING"},{"id":4,"name":"Multibanco","type":"STRING"}]

The kendofi method here is because these widgets are inside a table and you can add new table rows while maintaining the widgets functionality.

Answer 1

I had the same problem. We managed to solve this by putting the parent and children dropdownlists in one function. See buildLookupDropDownList() function below. Looks like in our situation the children dropdownlists were being called before the parent. Best of luck

var categories
function buildLookupDropDownList() {
    categories = $("#LOOKUP_OBJECT_ID").kendoDropDownList({
        optionLabel: "@Resources.Global.Builder_Parameter_SelLookup",
        dataTextField: "OBJECT_NAME",
        dataValueField: "OBJECT_ID",
        dataSource: lookupDS,
    }).data("kendoDropDownList");

    var products = $("#DISPLAY_FIELD").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "LOOKUP_OBJECT_ID",
        optionLabel: "@Resources.Global.Builder_Parameter_SelDisplay",
        dataTextField: "DISPLAY_LABEL",
        dataValueField: "FIELD_NAME",
        dataSource: {
            serverFiltering: true,
            transport: {
                read:
                    {
                        url: '@Url.Action("GetFields", "Object")',
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: function () {

                            var lookuplist = $("#LOOKUP_OBJECT_ID").data("kendoDropDownList");
                            return { OBJECT_ID: lookuplist.value() };
                        }
                    }
            },
            schema: {
                data: function (data) { //specify the array that contains the data
                    return data.data || data;
                }
            }

        }
    }).data("kendoDropDownList");

    var orders = $("#VALUE_FIELD").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "DISPLAY_FIELD",
        optionLabel: "@Resources.Global.Builder_Parameter_SelValue",
        dataTextField: "DISPLAY_LABEL",
        dataValueField: "FIELD_NAME",
        dataSource: {
            serverFiltering: true,
            transport: {
                read:
                    {
                        url: '@Url.Action("GetFields", "Object")',
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: function () {

                            var lookuplist = $("#LOOKUP_OBJECT_ID").data("kendoDropDownList");

                            return { OBJECT_ID: lookuplist.value() };
                        }
                    }
            },
            schema: {
                data: function (data) { //specify the array that contains the data
                    return data.data || data;
                }
            }

        }
    }).data("kendoDropDownList");
}