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

Cascading DropDownList in Grid

9 Answers 431 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Juan
Top achievements
Rank 1
Juan asked on 09 Apr 2012, 08:29 PM
Hi, somebody would have some example a Grid with 2 o 3 DropDownList in cascading???

Thanks you.

9 Answers, 1 is accepted

Sort by
0
Vadivel
Top achievements
Rank 1
answered on 19 Apr 2012, 12:28 PM
sir

I want Grid with 2 to 3 DropDownList in cascading in kendo, please give some example url or website
0
Juan
Top achievements
Rank 1
answered on 19 Apr 2012, 02:30 PM
Hi, this grid with DDL is working for me.

            var grid = $("#grid").kendoGrid({
                dataSource: DowsSharedDataSource,
                autoSync: true,
                autoBind: true,
                pageable: false,
                scrollable: false,
                navigatable: false,
                selectable: "row",
                sortable: false,
                change: onChangeGrid,
                editable: "inline",
                columns: [
                    {field: "CMFault_Desc", title: "Fault Desc", width: "75px" },
                    { field: "DTStart_Time", title: "Start Time", width: "75px" },
                    { field: "DTEnd_Time", title: "End Time", width: "75px" },
                    { field: "Duration", title: "Duration", width: "75px" },
                    { field: "Uptime", title: "Uptime", width: "75px" },
                    {field: "Reason_Desc1", title: "Reason 1", editor: reasonComboEditor0, width: "100px" },
                    {field: "Reason_Desc2", title: "Reason 2", editor: reasonComboEditor1, width: "100px" },
                    {field: "Reason_Desc3", title: "Reason 3", editor: reasonComboEditor2, width: "100px" },
                    { field: "Log_Comment", title: "Comment", width: "200px" },
                    { command: ["edit"], title: " ", width: "100px" }
                ]
            });


            function reasonComboEditor0(container, options) {
                $('<input id="DDL1" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                    autoBind: false,
                    dataSource: ReasonTreeSharedDataSource0,
                    dataTextField: "Descr",
                    dataValueField: "Descr",
                    change: function() {
                        // Setting values
                        RT_Id1 = this.value();
                        this.value(RT_Id1);
                        // Reaload Data
                        ReasonTreeSharedDataSource1.read();
                        ReasonTreeSharedDataSource2.read();
                        // Refresh Reaason Tree 2
                        var ddl2 = $("#DDL2").data("kendoDropDownList");
                        ddl2.refresh();
                        ddl2.value(RT_Id2);
                        // Refresh Reaason Tree 3
                        var ddl3 = $("#DDL3").data("kendoDropDownList");
                        ddl3.refresh();
                        ddl3.value(RT_Id3);
                    }
                });
            }


            function reasonComboEditor1(container, options) {
                $('<input id="DDL2" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                    autoBind: false,
                    dataSource: ReasonTreeSharedDataSource1,
                    dataTextField: "Descr",
                    dataValueField: "Descr",
                    change: function() {
                        // Setting values
                        RT_Id2 = this.value();
                        // Reaload Data
                        ReasonTreeSharedDataSource2.read();
                        // Refresh Reaason Tree 3
                        var ddl3 = $("#DDL3").data("kendoDropDownList");
                        ddl3.refresh();
                        ddl3.value(RT_Id3);
                        //                                alert("Change RT_Id2 " + RT_Id2);
                    }
                });
            }


            function reasonComboEditor2(container, options) {
                $('<input id="DDL3" name="' + options.field + '"/>').appendTo(container).kendoDropDownList({
                    autoBind: false,
                    dataSource: ReasonTreeSharedDataSource2,
                    dataTextField: "Descr",
                    dataValueField: "Descr",
                    change: function() {
                        // Setting values
                        RT_Id3 = this.value();
                    }
                });
            }

0
Loganathan
Top achievements
Rank 1
answered on 19 Apr 2012, 04:33 PM

Thanks Jaun,
Am also looking for this only...

How to define the

dataSource: DowsSharedDataSource,

dataSource: ReasonTreeSharedDataSource0,
dataSource: ReasonTreeSharedDataSource1,
dataSource: ReasonTreeSharedDataSource2,


I need the local datas.

Thanks
Logesh
0
Vadivel
Top achievements
Rank 1
answered on 19 Apr 2012, 04:34 PM
hi Juan,

how to achive local data with html file
0
Juan
Top achievements
Rank 1
answered on 19 Apr 2012, 04:52 PM
Hi, my data using a webservice returning data in json:

            var DowsSharedDataSource = new kendo.data.DataSource({
                pageSize: 5,
                transport: {
                    read: {
                        type: "POST",
                        dataType: "json",
                        url: readDowntimesURL,
                        data: { strWorkUnit: equipmentParentDesc }
                    }
                }

I don't know like using data in html, maybe you can see some examples in Kendo web page.
http://demos.kendoui.com/web/datasource/index.html 


0
Loganathan
Top achievements
Rank 1
answered on 20 Apr 2012, 05:05 AM
And one more thing,

what is the RT_Id1, RT_Id2, RT_Id3???????
0
Loganathan
Top achievements
Rank 1
answered on 20 Apr 2012, 05:26 AM
Please send me a demo link which is you done!
0
Juan
Top achievements
Rank 1
answered on 20 Apr 2012, 01:22 PM
Hi, RT_Id1, RT_Id2, RT_Id3 are globals variables used like parameters for retriteve data from Datasources.
I set this variables when DDL changes, and I use this varaiables like parameters.


0
srinivas
Top achievements
Rank 1
answered on 14 Aug 2012, 06:01 AM
Hi everyone,


In that code you guys are using a function and you are appending the container to the dropdown list.Its all working fine.
I am able to display the dropdown list with that code.
But my question is can i able to give name to dropdownlist such that it is useful to use methods of the dropdown list.
i.e i want to give a name to dropdownlist, then i can use the methods like dropdownlist.open();
dropdownlist.close();
dropdownlist.select(); etc is it possible to give name to dropdownlist in that case or any other methods in the grid to 
display the dropdown list
Please provide me an example or an sample 


Thanks and Regards,
Srinivas
Tags
Grid
Asked by
Juan
Top achievements
Rank 1
Answers by
Vadivel
Top achievements
Rank 1
Juan
Top achievements
Rank 1
Loganathan
Top achievements
Rank 1
srinivas
Top achievements
Rank 1
Share this question
or