Dear Sirs ,
Under MVC architecture , I put a kendo grid on view(.chtml) , and it can show data from database already. Now , I put dropdownlist into editable cell on grid , and , it can show up on grid already. But the dropdownlist can not show data from database.
Please give a guide.
Thanks.
Keny
What I have tried:
.................
<div class="asrsPanelBody" style="margin-top: 5px; padding: 10px">
<div id="holidayShiftgrid"></div>
</div>
<div class="toolbar">
<button id="btnSave">Save</button>
</div>
<input id='#= BA_AIRPORT_CODE #_#= SPD_EMPLOYEE_TYPE_CODE #_01' data-bind='value:OFFICIAL_SHIFT_CODE' data-role='dropdownlist' data-source='options' data-text-field='Text' data-value-field='Value' />
<input id='#= BA_AIRPORT_CODE #_#= SPD_EMPLOYEE_TYPE_CODE #_02' data-bind='value:LEAVE_SHIFT_CODE' data-role='dropdownlist' data-source='options1' data-text-field='Text1' data-value-field='Value1' />
<input id='#= BA_AIRPORT_CODE #_#= SPD_EMPLOYEE_TYPE_CODE #_03' data-bind='value:NATIONAL_SHIFT_CODE' data-role='dropdownlist' data-source='options2' data-text-field='Text2' data-value-field='Value2' />
$(document).ready(function () {
var options = [{ Text: "OFFICIAL_SHIFT_DISPLAY", Value: "OFFICIAL_SHIFT_CODE" }]
var options1 = [{ Text1: "LEAVE_SHIFT_DISPLAY", Value1: "LEAVE_SHIFT_CODE" }]
var options2 = [{ Text2: "NATIONAL_SHIFT_DISPLAY", Value2: "NATIONAL_SHIFT_CODE" }]
$("#holidayShiftgrid").kendoGrid({
dataSource: {
transport: {
read: {
type: "POST",
url: '/Rule/getHolidayShift',
dataType: "json",
cache: false
}
},
schema: {
model: {
fields: {
BA_AIRPORT_CODE: { type: "string" },
SPD_EMPLOYEE_TYPE_CODE: { type: "number" },
SPD_EMPLOYEE_TYPE_NAME: { type: "string" },
OFFICIAL_SHIFT_DISPLAY: { type: "string" },
OFFICIAL_SHIFT_CODE: { type: "number" },
LEAVE_SHIFT_DISPLAY: { type: "string" },
LEAVE_SHIFT_CODE: { type: "number" },
NATIONAL_SHIFT_DISPLAY: { type: "string" },
NATIONAL_SHIFT_CODE: { type: "number" }
}
}
}
},
dataBound: function (e) {
var holidayShiftgrid = this;
this.tbody.find('tr').each(function () {
var item = holidayShiftgrid.dataItem(this);
kendo.bind(this, item);
})
},
toolbar: kendo.template($("#template").html()),
columns: [
{
field: "BA_AIRPORT_CODE",
title: "Airport",
editable: false
}, {
field: "SPD_EMPLOYEE_TYPE_NAME",
title: "Role",
editable: false
}, {
field: "OFFICIAL_SHIFT_DISPLAY",
title: "Official",
template: kendo.template($("#officalHolidayTemplate").html())
}, {
field: "LEAVE_SHIFT_DISPLAY",
title: "Leave",
template: kendo.template($("#leaveHolidayTemplate").html())
}, {
field: "NATIONAL_SHIFT_DISPLAY",
title: "National",
template: kendo.template($("#nationalHolidayTemplate").html())
}]
});
$("#btnSave").kendoButton();
});