Kendo UI Grid with DropDownList field that stores DropDownList Text and Value in grid dataSource
Display the Text from the selected item in the DropDownList and also capture the Value. Store both in the grid.
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div class="demo-section"> <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>
<div id="listView"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class = "product-view k-widget" >
NAME: #= name#
<div class = "edit-buttons">
<a class = "k-button k-button-icontext k-edit-button" href = "\\#"><span class="k-icon k-edit"></span></a><a class = "k-button k-button-icontext k-delete-button"
href = "\\#" > <span class = "k-icon k-delete" > </span></a> </div>
<dl>
<dt>Type</dt > <dd> #: typeTitle# </dd>
</dl> </div>
</script>
<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view k-widget">
<div class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
</div>
<dl>
<dt>Key</dt>
<dd>
<select data-role="dropdownlist"
data-text-field="title"
data-value-field="id"
data-source="_typeDataSource"
data-bind="value: typeTitle"
name="InputType"
data-change="dropdownlist_change"
required="required"
validationmessage="required"></select>
<span data-for="InputType" class="k-invalid-msg"></span>
</dd>
<dt>Value</dt>
<dd>
<div...
JavaScript
_typeDataSource = new kendo.data.DataSource({
data: [{
id: 1,
title: "String"
}, {
id: 2,
title: "Number"
}, {
id: 3,
title: "DateTime"
}]
});
_peopleDataSource = new kendo.data.DataSource({
data: [{
id: 1,
name: "John",
typeId: 1,
typeTitle: "String"
}, {
id: 2,
name: "12345",
typeId: 2,
typeTitle: "Number"
}, {
id: 3,
name: "12/20/2013",
typeId: 3,
typeTitle: "DateTime"
}],
schema: {
model: {
id: "id",
fields: {
id: {
editable: false,
nullable: true
},
name: {
validation: {
required: true
}
},
typeTitle: "typeTitle"
}
}
}
});
listView = $("#listView").kendoListView({
dataSource: _peopleDataSource,
template: kendo.template($("#template").html()),
editTemplate: kendo.template($("#editTemplate").html())
}).delegate(".k-edit-button", "click", function (e) {
listView.edit($(this).closest(".product-view"));
debugger;
e.preventDefault();
}).delegate(".k-delete-button", "click", function (e) {
listView.remove($(this).closest(".product-view"));
e.preventDefault();
}).delegate(".k-update-button", "click", function (e) {
listView.save();
e.preventDefault();
}).delegate(".k-cancel-button", "click", function (e) {
listView.cancel();
e.preventDefault();
}).data("kendoListView");
$(".k-add-button").click(function (e) {
listView.add();
e.preventDefault();
});
function dropdownlist_change(e) {
var value = this.value();
// Use the value of the widget
console.log(value);
if (value == 3) {
// console.log('here');
debugger;
var...