Hi All,
I has been awhile since I used kendo and I have no idea why my values are not observable. What I am missing when I'm calling a popup html template and no data are showing in the textbox or data are not updated after I modified them. Any suggestions or an example is much appreciated.
TIA
.js
var rEditor= rEditor || {};var rEditor = (function () {
var kendoViewModel;
function createViewModel() {
kendoViewModel = kendo.observable({
selectedCategoryId: null,
selectedCategoryDesc: "test description",
selectedCategoryCode: null,
kendoViewModel.Codes
});
}
function loadData() {
jsonCall({
url: "/sample/LoadCode",
type: "GET",
async: true,
success: function (result) {
}
});
jsonCall({
url: "/sample/Loadother",
type: "GET",
async: true,
success: function (result) {
}
}
});
}
function setupResourceDropDown() {
$('#ResourceCode_DropDownMenu')
.kendoDropDownList({
dataTextField: "Description",
dataSource: kendoViewModel.Codes,
change: function () {
..filter the data and call
setGrid();
}
});
}
function setGrid() {
$('#resourceCategoryGrid').empty().kendoGrid({
dataSource: {
data: filterCategory,
schema: {
model: {
fields: {
Id: { type: "string", editable: false },
Code: { type: "string", editable: true },
Description: { type: "string", editable: true }
}
}
},
},
selectable: "row",
editable: true,
columns: [
{
hidden: true,
field: "Id",
title: "Id",
width: 200
},
{
title: "Code",
field: "Code",
width: 100
},
{
title: "Description",
field: "Description",
width: 300,
},
{
title: "test",
field: "Code",
template: "#=Code#",
editor: editCategory,
}],
dataBound: function (e) {
telerikFilterIndicator(e, this);
}
}).data("kendoGrid");
}
function editCategory(container, options) {
//var model = options.model;
//kendoViewModel.set("selectedCategoryId", model.Id);
//kendoViewModel.set("selectedCategoryDesc", model.Description);
//kendoViewModel.set("selectedCategoryCode", model.Code);
var editWindow = $("#editResource-dialog").kendoWindow({
resizable: false,
title: "Edit",
modal: true,
width: "575px",
height: "185px",
visible: false
});
editWindow.data("kendoWindow")
.content($("#editResource-dialog").html())
.center().open();
$("#confirmUpdateButton").click(function () {
editWindow.data("kendoWindow").close();
});
$("#confirmCancelButton").click(function () {
editWindow.data("kendoWindow").close();
});
}
function init() {
createViewModel();
loadData();
setupResourceDropDown();
kendo.bind($("#MainWrapper"), kendoViewModel);
}
return {
Init: init
};
}(jQuery));
-----------------cshtml----------------------
<div id="MainWrapper" class="MainWrapperCls">
<div id="Main" class="row">
<div class="row">
<div class="col-lg-1">
<label>Code:</label>
</div>
<div class="col-lg-2">
<select id="ResourceCode_DropDownMenu" class="form-control"></select>
</div>
</div>
</div>
<div id="editResource-dialog" title="Resource Editor" type="text/x-kendo-template" style="display: none">
<div class="modal-body" id="editorWindow">
<div class="input-group" style="padding-bottom: 5px">
<span class="input-group-addon" style="padding-right: 3.5em">Code:</span>
<input type="text" class="form-control" id="resourceCode" name="resourceCode" aria-describedby="resourceCode" data-bind="value: selectedCategoryCode">
</div>
<div class="input-group">
<span class="input-group-addon">Description:</span>
<input type="text" class="form-control" id="resourceDescription" name="resourceDescription" data-bind="value: selectedCategoryDesc">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" id="confirmUpdateButton">Update</button>
<button class="btn btn-default" type="button" id="confirmCancelButton">Cancel</button>
</div>
</div>
</div>