如何将数据库表数据绑定到kendo网格下拉列表而不使用服务。 [英] How to bind database table data to kendo grid drop down list with out using services.

问题描述

当天的问候，







这里我想将db数据绑定到kendo grid下拉列表，这里我正在分享我的代码。









$（document）.ready（function（）{

var personViewModel = kendo.observable（{

dataSource：new kendo.data.DataSource（{

运输：

{

阅读：{

url：/ Details / GetPDetails，

contentType：application / json; charset = utf-8，

dataType：json，

类型：GET

}，

参数地图：函数（数据，操作）{

if（operation！='read'）{

返回JSON.stringify（{personViewModel：data}）;

}

}

}，

架构： {

型号：

{

id：Id，

字段：

{

Id：{type：number}，

名称：{type：string，eiditable：true}，

年龄：{type：number，editable：true}，

StateName：{type：string，editable：true}

}



}，

解析：函数（数据）{

debug ger

if（data.success）{

$（＃grid）。data（kendoGrid）。dataSource.read（）;

返回data.getData;

}

else {

alert（data.message）;

返回[];

}

}

}

}），

personGridData：function（）{

调试器

$（'＃grid'）。kendoGrid（{

sortable：true，

filterable：true，

toolbar：[create]，

pageable：{

refresh：true，
pageSizes：true，

buttonCount：5

}，

refresh：true，

autosync：true，

可编辑：内联，

栏：[

{字段：名称，标题：名称，宽度：180}，

{field：Age，title：Age，width：180}，

{field：StateName，title：State Belongs to，width ：200，编辑：DropdownState}，

{命令：，标题： ，宽度：250px}

]



}）;

}

}）;



personViewModel.personGridData（）;

personViewModel.dataSource.fetc h（function（）{

调试器

kendo.bind（$（'＃grid'），personViewModel）

}）;



函数DropdownState（容器，选项）{

调试器

$（'< input id =dropdown- staterequired data-text-field =StateNamedata-value-field =StateNamedata-bind =value：'+ options.field +'/>'）

。 appendTo（容器）

.kendoDropDownList（{

dataTextField：'StateName'，

dataValueField：Id，

dataSource：{

运输：{

读取：{

url：'/ Details / GetSates'，

contentType：application / json; charset = utf-8，

dataType：JSON，

类型：GET

}

}，

dataBind：true，

}

}）;

}

}）;

< / script>

< / head>

< body>

< / body>







和控制器我的代码是< br $> b $ b

  public  JsonResult GetSates（）
 {
 尝试 
 {
  var  statelist =（来自状态  detailsContext.Statess  select  states.StateName）;  //  这里我从我的数据库中获取数据 
  return  Json（ new  {statelist}，JsonRequestBehavior.AllowGet）; 
} 
  catch （例外）
 {
  throw   new  ApplicationException（ 错误） ; 
} 
} 

谢谢在高级...

解决方案

（文件）.ready（function（）{

var personViewModel = kendo.observable（{

dataSource：new kendo.data.DataSource（{

transport：

{

阅读：{

url：/ Details / GetPDetails，

contentType：application / json; charset = utf-8，

dataType：json，

类型：GET

}，

参数地图：函数（数据，操作）{

if（operation） ！='read'）{

返回JSON.stringify（{personViewModel：data}）; < br $>
}

}

}，

架构：{

型号：

{

id：Id，

字段：

{

Id： {type：number}，

名称：{type：string，eiditable：true}，

年龄：{type：number，editable：true }，

StateName：{type：string，editable：true}

}



}，

解析：函数（数据）{

调试器

if（data.success）{

（＃grid）。data（kendoGrid）。dataSource.read（）;

返回data.getData;

}

else {

alert（data.message）;

return [];

}

}

}

}），

personGridData：function（）{

调试器

（'＃grid'）。kendoGrid（{

sortable：true，

可过滤：true，

toolbar：[create]，

pageable：{

refresh：true，

pageSizes：true，

buttonCount：5

}，

刷新：true，

autosync：true，

可编辑：内联 ，

栏：[

{字段：名称，标题：名称，宽度：180}，

{字段：年龄，标题：年龄，宽度：180}，

{字段：StateName，标题：State Belongs to，宽度：200，编辑：DropdownState}，

{命令：，标题： ，宽度：250px}

]



}）;

}

}）;



personViewModel.personGridData（）;

personViewModel.dataSource.fetch（function（）{

debugger

kendo.bind（

Greetings of the day,



Here i want to bind the db data into kendo grid dropdownlist, here i'm sharing my code.




$(document).ready(function () {
var personViewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
transport:
{
read: {
url: "/Details/GetPDetails",
contentType: "application/json;charset=utf-8",
dataType: "json",
type: "GET"
},
parameterMap: function (data, operation) {
if (operation != 'read') {
return JSON.stringify({ personViewModel: data });
}
}
},
schema: {
model:
{
id: "Id",
fields:
{
Id: { type: "number" },
Name: { type: "string", eiditable: true },
Age: { type: "number", editable: true },
StateName: { type: "string", editable: true }
}

},
parse: function (data) {
debugger
if (data.success) {
$("#grid").data("kendoGrid").dataSource.read();
return data.getData;
}
else {
alert(data.message);
return [];
}
}
}
}),
personGridData: function () {
debugger
$('#grid').kendoGrid({
sortable: true,
filterable: true,
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
refresh: true,
autosync: true,
editable: "inline",
columns: [
{ field: "Name", title: "Name", width: 180 },
{ field: "Age", title: "Age", width: 180 },
{ field: "StateName", title: "State Belongs to", width: 200, editor: DropdownState },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]

});
}
});

personViewModel.personGridData();
personViewModel.dataSource.fetch(function () {
debugger
kendo.bind($('#grid'), personViewModel)
});

function DropdownState(container, options) {
debugger
$('<input id="dropdown-states" required data-text-field="StateName" data-value-field="StateName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: 'StateName',
dataValueField: "Id",
dataSource: {
transport: {
read: {
url: '/Details/GetSates',
contentType: "application/json;charset=utf-8",
dataType: "JSON",
type: "GET"
}
},
dataBind: true,
}
});
}
});
</script>
</head>
<body>

</body>



and in controller my code is

public JsonResult GetSates()
       {
           try
           {
               var statelist = (from states in detailsContext.Statess select states.StateName);// here i'm getting data from my db
               return Json(new { statelist }, JsonRequestBehavior.AllowGet);
           }
           catch (Exception)
           {
               throw new ApplicationException("Error");
           }
       }

Thanks in Advanced...

解决方案

(document).ready(function () {
var personViewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
transport:
{
read: {
url: "/Details/GetPDetails",
contentType: "application/json;charset=utf-8",
dataType: "json",
type: "GET"
},
parameterMap: function (data, operation) {
if (operation != 'read') {
return JSON.stringify({ personViewModel: data });
}
}
},
schema: {
model:
{
id: "Id",
fields:
{
Id: { type: "number" },
Name: { type: "string", eiditable: true },
Age: { type: "number", editable: true },
StateName: { type: "string", editable: true }
}

},
parse: function (data) {
debugger
if (data.success) {

("#grid").data("kendoGrid").dataSource.read();
return data.getData;
}
else {
alert(data.message);
return [];
}
}
}
}),
personGridData: function () {
debugger

('#grid').kendoGrid({
sortable: true,
filterable: true,
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
refresh: true,
autosync: true,
editable: "inline",
columns: [
{ field: "Name", title: "Name", width: 180 },
{ field: "Age", title: "Age", width: 180 },
{ field: "StateName", title: "State Belongs to", width: 200, editor: DropdownState },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]

});
}
});

personViewModel.personGridData();
personViewModel.dataSource.fetch(function () {
debugger
kendo.bind(

这篇关于如何将数据库表数据绑定到kendo网格下拉列表而不使用服务。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！