Following is the code i used, Once i select dropdownlist value in popup editing then [Object][Object] in the column of the grid
<script>
var datavalue = [];
datavalue.push({TypeValue: "---" });
datavalue.push({ TypeValue: "New" });
datavalue.push({ TypeValue: "Important" });
datavalue.push({ TypeValue: "Remark" });
datavalue.push({ TypeValue: "Complaint" });
var dropDownDataSource = new kendo.data.DataSource({
data: datavalue,
schema: {
model: {
fields: {
TypeValue: { type: "string" }
}
}
}
});
</script>
<script id="popup_editor" type="text/x-kendo-template">
<p>Custom editor template</p>
<div class="k-edit-label">
<label for="Date">Date</label>
</div>
<!-- datepicker editor for field: "Date" -->
<input type="text"
name="Date"
data-type="date"
data-bind="value:BirthDate"
data-role="datepicker" />
<div class="k-edit-label">
<label for="Type">Type</label>
</div>
<!-- drop down list editor for field: "Type" -->
<input name="TypeValue"
data-bind="value:TypeValue"
data-value-field="TypeValue"
data-text-field="TypeValue"
data-source="dropDownDataSource"
data-role="dropdownlist" />
<div class="k-edit-label">
<label for="NoteBy" style="color: red;">NoteBy</label>
</div>
<!-- textbox editor for field: "NoteBy" -->
<input type="text" class="k-input k-textbox" name="NoteBy" data-bind="value:NoteBy"/>
<div class="k-edit-label">
<label for="Description">Description</label>
</div>
<input type="text" class="k-input k-textbox" name="Description" data-bind="value:Description"/>
</script>
<div id="NoteGrid" style="height: 380px"></div>
<script>
$(document).ready(function() {
$("#NoteGrid").kendoGrid({ // create Grid from div HTML element Kendo
dataSource: {
data: [],
schema: {
model: {
fields: {
Date: { type: "date" },
Type: { type: "string"},
NoteBy: { type: "string" },
Description: { type: "string" }
}
}
}
},
selectable: "row",
scrollable: true,
navigatable: true,
sortable: true,
resizable: true,
groupable: false,
filterable: true,
columnMenu: true,
columns: [
{
field: "Date",
title: "Date",
width: 80
},
{
field: "TypeValue",
title: "Type",
width: 60
},
{
field: "NoteBy",
title: "Note By",
width: 80
},
{
field: "Description",
title: "Description",
width: 100
},
{
command: [
{ name: "edit",
text: { update: "Save" }
}],
hidden: true
}
],
toolbar: ["create"],
edit: function (e) {
// $("#editor").kendoEditor();
e.container.data("kendoWindow").title("Add Note");
e.container.find('.k-grid-update').css('float', 'right');
e.container.find('.k-grid-cancel').css('display', 'none');
},
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
save: function (e) {
var grid = $("#NoteGrid").data("kendoGrid");
grid.refresh();
},
detailInit: function (e) {
var grid = $("#NoteGrid").data("kendoGrid");
grid.element.find('tbody tr:first').addClass('k-state-selected')
}
});
});
</script>
<script>
var datavalue = [];
datavalue.push({TypeValue: "---" });
datavalue.push({ TypeValue: "New" });
datavalue.push({ TypeValue: "Important" });
datavalue.push({ TypeValue: "Remark" });
datavalue.push({ TypeValue: "Complaint" });
var dropDownDataSource = new kendo.data.DataSource({
data: datavalue,
schema: {
model: {
fields: {
TypeValue: { type: "string" }
}
}
}
});
</script>
<script id="popup_editor" type="text/x-kendo-template">
<p>Custom editor template</p>
<div class="k-edit-label">
<label for="Date">Date</label>
</div>
<!-- datepicker editor for field: "Date" -->
<input type="text"
name="Date"
data-type="date"
data-bind="value:BirthDate"
data-role="datepicker" />
<div class="k-edit-label">
<label for="Type">Type</label>
</div>
<!-- drop down list editor for field: "Type" -->
<input name="TypeValue"
data-bind="value:TypeValue"
data-value-field="TypeValue"
data-text-field="TypeValue"
data-source="dropDownDataSource"
data-role="dropdownlist" />
<div class="k-edit-label">
<label for="NoteBy" style="color: red;">NoteBy</label>
</div>
<!-- textbox editor for field: "NoteBy" -->
<input type="text" class="k-input k-textbox" name="NoteBy" data-bind="value:NoteBy"/>
<div class="k-edit-label">
<label for="Description">Description</label>
</div>
<input type="text" class="k-input k-textbox" name="Description" data-bind="value:Description"/>
</script>
<div id="NoteGrid" style="height: 380px"></div>
<script>
$(document).ready(function() {
$("#NoteGrid").kendoGrid({ // create Grid from div HTML element Kendo
dataSource: {
data: [],
schema: {
model: {
fields: {
Date: { type: "date" },
Type: { type: "string"},
NoteBy: { type: "string" },
Description: { type: "string" }
}
}
}
},
selectable: "row",
scrollable: true,
navigatable: true,
sortable: true,
resizable: true,
groupable: false,
filterable: true,
columnMenu: true,
columns: [
{
field: "Date",
title: "Date",
width: 80
},
{
field: "TypeValue",
title: "Type",
width: 60
},
{
field: "NoteBy",
title: "Note By",
width: 80
},
{
field: "Description",
title: "Description",
width: 100
},
{
command: [
{ name: "edit",
text: { update: "Save" }
}],
hidden: true
}
],
toolbar: ["create"],
edit: function (e) {
// $("#editor").kendoEditor();
e.container.data("kendoWindow").title("Add Note");
e.container.find('.k-grid-update').css('float', 'right');
e.container.find('.k-grid-cancel').css('display', 'none');
},
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
save: function (e) {
var grid = $("#NoteGrid").data("kendoGrid");
grid.refresh();
},
detailInit: function (e) {
var grid = $("#NoteGrid").data("kendoGrid");
grid.element.find('tbody tr:first').addClass('k-state-selected')
}
});
});
</script>