Kendo网格用数据添加下拉列表 [英] Kendo grid to add dropdownlist with data
本文介绍了Kendo网格用数据添加下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
亲爱的先生们，
在MVC架构下，我在视图（.chtml）上放置了一个kendo网格，它可以显示来自数据库的数据。现在，我将dropdownlist放入网格中的可编辑单元格中，并且它已经可以显示在网格上。但是下拉列表无法显示数据库中的数据。
请给出指导。
谢谢。
肯尼
我尝试了什么：
.................
< div class = asrsPanelBody style = margin -top：5px;填充：10px >
< < span class =code-leadattribute> div id = holidayShiftgrid > < / div >
< / div >
< div class = 工具栏 >
< 按钮 id = btnSave > 保存< / button >
< / div >
< 输入 id =' ＃= BA_AIRPORT_CODE＃_＃= SPD_EMPLOYEE_TYPE_CODE＃_01' data-bind =' value：OFFICIAL_SHIFT_CODE' data-role =' dropdownlist' data-source =' options' data-text-field =' 文字' data-value-field =' 值' / >
< 输入 < span class =code-attribute> 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' / >
< span class =code-keyword>< input id =' ＃= BA_AIRPORT_CODE＃_＃= SPD_EMPLOYEE_TYPE_CODE＃_03' data-bind =' 值：NATIONAL_SHIFT_CODE' data-role =' dropdownlist' data-source =' options2' data-text-field =' Text2' data-value -field =' Value2' / >
$（凭证）。 ready（function（）{
var options = [{Text：OFFICIAL_SHIFT_DISPLAY，Value：OFFICIAL_SHIFT_CODE}]
var options1 = [{Text1：LEAVE_SHIFT_DISPLAY，Value1：LEAVE_SHIFT_CODE}]
var optio ns2 = [{Text2：NATIONAL_SHIFT_DISPLAY，Value2：NATIONAL_SHIFT_CODE}]
$（＃holidayShiftgrid）。kendoGrid（{
dataSource：{
transport：{
阅读：{
类型：POST，
url：'/ Rule / getHolidayShift'，
dataType：json，
cache：false
}
}，
架构：{
型号：{
字段：{
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.tbody.find（'tr'）。each（function（）{
var item = holidayShiftgrid.dataItem（this）;
kendo.bind（this，item）;
}）
}，
toolbar：kendo.template（$（＃template）。html（）），
列：[
{
字段：BA_AIRPORT_CODE，
标题：机场，
可编辑：false
}，{
字段：SPD_EMPLOYEE_TYPE_NAME，
标题：角色，
可编辑：false
}，{
字段：OFFICIAL_SHIFT_DISPLAY，
标题：官方，
模板：kendo.template（$（#officalHolidayTemplate） .html（））
}，{
字段：LEAVE_SHIFT_DISPLAY，
标题：Lea ve，
模板：kendo.template（$（＃leaveHolidayTemplate）。html（））
}，{
字段：NATIONAL_SHIFT_DISPLAY，
标题：National ，
模板：kendo.template（$（＃nationalHolidayTemplate）。html（））
}]
}）;
$（＃btnSave）。kendoButton（）;
}）;
解决方案
（document）.ready（function（）{
var options = [{文字：OFFICIAL_SHIFT_DISPLAY，价值：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：{
类型：POST，
url：'/ Rule / getHolidayShift'，
dataType：json，
cache：false
}
}，
架构：{
型号：{
字段：{
BA_AIRPO RT_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（）），
列：[
{
字段：BA_AIRPORT_CODE，
标题：机场，
可编辑：false
}，{
字段：SPD_EMPLOYEE_TYPE_NAME，
title：Role，
editable：false
}，{
field：OFFICIAL_SHIFT_DISPLAY，
title：Official，
template：kendo .template（
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();
}); 解决方案
(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(
这篇关于Kendo网格用数据添加下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
