Hi,
I am trying to set up a kendo UI grid with cascading dropdown. I have attached the sample HTML file I am using.
I am able to bind the grid with the data. But the cascading drop down seem to fail. Is it required the grid to be in inline edit mode so that the cascading drop downs are visible?
<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script src="../../js/products.js"></script>
<script>
var catAreaListNames=[{ "AreaId": 188, "AreaName": "Construction", "CategoryId": 35 },
{ "AreaId": 193, "AreaName": "Process Equipment", "CategoryId": 35 },
{ "AreaId": 164, "AreaName": "All Standards", "CategoryId": 2 },
{ "AreaId": 24, "AreaName": "Asbestos", "CategoryId": 2 },
{ "AreaId": 119, "AreaName": "Behavior Based Safety", "CategoryId": 2 },
{ "AreaId": 165, "AreaName": "Housekeeping ", "CategoryId": 5 }];
var taskList = [{id:"1921273", TaskId:"1921273", CategoryId:35, sortCategoryId:"MOC", AreaId:"0", sortArea:"",Task:"Test Task ", RQD:"", sortRQD:"", DueDate:"", PPR:"", sortPPR:"", Comments:"", CompletedDate:"", LockCoreFields:"false", IsDeleted:"false", HasAssessment:"false", AllLocked:"false", lTaskOccurrenceId:"3249927",Category:{CategoryId:35,CategoryName:"MOC"},Area:{AreaId:0,AreaName:""}},{id:"-1", TaskId:"-1", CategoryId:0, sortCategoryId:"", AreaId:"0", sortArea:"",Task:"", RQD:"0", sortRQD:"", DueDate:"", PPR:"0", sortPPR:"0", Comments:"", CompletedDate:"", LockCoreFields:"false", IsDeleted:"false", HasAssessment:"false", AllLocked:"false", lTaskOccurrenceId:"0",Category:{CategoryId:0,CategoryName:""},Area:{AreaId:0,AreaName:" "}}];
var Category = [{CategoryId:0,CategoryName:""},{CategoryId:48,CategoryName:"BMP"},{CategoryId:3,CategoryName:"CPS"},{CategoryId:36,CategoryName:"Elec"},{CategoryId:37,CategoryName:"Engg"},{CategoryId:1,CategoryName:"Env"},{CategoryId:44,CategoryName:"General"},{CategoryId:38,CategoryName:"HR"},{CategoryId:45,CategoryName:"IFC"},{CategoryId:39,CategoryName:"Inst"},{CategoryId:50,CategoryName:"Inv"},{CategoryId:40,CategoryName:"Lab"},{CategoryId:41,CategoryName:"Maint"},{CategoryId:35,CategoryName:"MOC"},{CategoryId:5,CategoryName:"OTHER"},{CategoryId:42,CategoryName:"Prod"},{CategoryId:23,CategoryName:"Prod Stew"},{CategoryId:32,CategoryName:"PS"},{CategoryId:43,CategoryName:"Purch"},{CategoryId:12,CategoryName:"QUALI"},{CategoryId:2,CategoryName:"Safety"}];
var pprList = [{id:"123213", type:"1", name:"Rakesh ", email:""}];
var pprListString = '';
var requiredList = '0:;1:T;2:S;3:D;4:N';
var catArea=[{"AreaId":0,"AreaName":""}];
function predicatBy(prop) {
return function (a, b) {
if (a[prop] > b[prop]) {
return 1;
} else if (a[prop] < b[prop]) {
return -1;
}
return 0;
}
}
catAreaListNames = catAreaListNames.sort(predicatBy("AreaName"));
function categoryDropDownEditor(container, options) {
$('<input id="Category" name="Category" required data-text-field="CategoryName" data-value-field="CategoryId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: Category
})
};
function AreaDropDownEditor(container, options) {
$('<input id="catAreaListNames" name="catAreaListNames" required data-text-field="AreaName" data-value-field="AreaId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: catAreaListNames, cascadeFrom: "Category"
})
};
function dueDateEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({});
}
function compDateEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker({});
}
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: taskList,
schema: {
model: {
fields: {
lTaskOccurrenceId: { type: "number", editable: false },
Category: { defaultValue: { CategoryId: 0, CategoryName: "" } },
Area: { defaultValue: { AreaId: 0, AreaName: "" } },
}
}
},
pageSize: 10
},
navigatable: true,
sortable: true,
columns: [
{ field: "lTaskOccurrenceId", title: " ", width: 75, editable: false },
{ field: "CategoryId", title: "Cat", width: 120, editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
//{ field: "CategoryId", title: "Cat", width: 120,editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{
//The modelId column
title: "Area",
width: 150,
field: "AreaId", // bound to the modelId field
template: "#=catAreaListNames.AreaName#", //the template shows the name corresponding to the modelId field
editor: AreaDropDownEditor
},
//{ field: "Area",title: "Area", width: 150 },
{ field: "Task", title: "Task", width: 200 },
{ field: "RQD", title: "RQD", width: 100 },
{ field: "PPR", title: "PPR", width: 100 },
{ field: "DueDate", title: "Due Date", format: "{0:MM-dd-yyyy}", editor: dueDateEditor },
{ field: "CompletedDate", title: "Completed", width: 100, format: "{0:MM-dd-yyyy}", editor: compDateEditor },
{ field: "Comments", title: "Comments", width: 200 },
{ field: "IsDeleted", title: "IsDeleted", hidden: true },
{ command: "destroy", title: " ", width: 95 }],
editable: true
});
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
<script>
</script>
</body>
</html>
1 Answer, 1 is accepted
In order to implement the functionality you should follow the approach described in the following article. Note that the approach is only supported in inline and popup edit modes.
Regards,
Viktor Tachev
Telerik