9 Answers, 1 is accepted
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
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();
}
});
}
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
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
var DowsSharedDataSource = new kendo.data.DataSource({
pageSize: 5,
transport: {
read: {
type: "POST",
dataType: "json",
url: readDowntimesURL,
data: { strWorkUnit: equipmentParentDesc }
}
}
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???????
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.
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
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