This is a migrated thread and some comments may be shown as answers.

Cascading Combobox in grid popup fails to cascade

2 Answers 142 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 16 Jan 2013, 05:11 PM
Hi,
I'm  a newbie and trying to get a pair of cascading comboboxes to work from a grid custom editor popup.
The first combobox appears to work fine, but the second one does not appear to be getting the value of the selected item from the first combobox. Accordingly, the 2nd datasource is being called without a paramater

Here is my code. Thanks for assistance.


 
          $(document).ready(function() {
               var element = $("#qcgrid").kendoGrid({
                    dataSource: {
                          type: "json",transport: {
   
                                read: {url: "/backoffice/archiveitemlist"},
update: {url:  "/backoffice/qcupdate"},
destroy: {url: "/backoffice/qcdestroy"},

parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
}

                            },
                            pageSize: 6,
   batch: true,
                            schema: {
                                model: {
                                    id: "FileName",
                                    fields: {
                                        Description: {},
                                        catdescription: {},
                                        catsubdescription: {},
                                        StartDate: {},
                                        EndDate: {},
StartYear:{},
EndYear:{},
                                    }
                                }
                            }
                        },
                        height: 450,
                        //sortable: true,
                        //pageable: true,
                        detailTemplate: kendo.template($("#mytemplate").html()),
                        detailInit: detailInit,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
//    {
// field: "ArchiveItemId",
// title: "ArchiveItemId"                            
//    },
   {
field: "FileName",
   },
   
   {
field: "Description",  
   },
   {
field: 'catdescription',
title: "Category",
       editor: function(container, options) {
   // create first box of a KendoUI cascading combobox widget as column editor
    $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
placeholder: "Select category...",
dataTextField: "Category",
dataValueField: "CategoryId",
dataSource: {
   type: "JSON",
   serverFiltering: true,
   transport: {
   read: "/backoffice/categories.json"
   }
}
});
   
   }
   },
                                    {
field: 'catsubdescription',
title: "SubCategory",
editor: function(container, options) {
   // create second cascading combobox widget
    $('<input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
autoBind: false,
cascadeFrom: "catdescription",
placeholder: "Select subcategory...",
dataTextField: "SubCategory",
dataValueField: "SubCategoryId",
dataSource: {
   type: "JSON",
   serverFiltering: true,
   transport: {
   read: "/backoffice/subcategories.json?filter[filters][0][value]="      //No value is being appended here
   }
}

}).data("kendoComboBox");
}
   },

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 18 Jan 2013, 03:05 PM
Hi Peter,

I believe the issue is caused by the lack of ComboBox's id. Generally speaking, the cascadeFrom property is used to set the ID of the parent DropDownList, while in your editors' definitions such needed attribute is missing (for working example please check the Cascading ComboBox demo). 

Also, please note that the editor template updates the data behind the curtains so you should bind the value of the editor input to the options.field in order to monitor the changes (take a look at the source of this online demo). 

Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Peter
Top achievements
Rank 1
answered on 18 Jan 2013, 04:19 PM
Hi Iliana,
Thank you for your clear and comprehensive reply. That works beautifully!
Regards
Peter
Tags
Grid
Asked by
Peter
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Peter
Top achievements
Rank 1
Share this question
or