1
기능 GetDataSource() 메소드를 {내가 ASP.Net MVC4와 검도를 사용하고검도 그리드 드래그 앤 드롭 열
//PrjKy, PrcsDetKy, PrcsTypKy, AprPrtyKy, AprStsKy, OrginAdrKy, AprUsrKy, NxtActByAdrKy, FrmNxtActDt, ToNxtActDt, FrmInsertDt, ToInsertDt
var PrjKy = $("#cmbPrjNm").val();
if (PrjKy == "") { PrjKy = 1; }
var PrcsDetKy = 1;
if (PrcsDetKy == "") { PrcsDetKy = 1; }
var PrcsTypKy = 1;
if (PrcsTypKy == "") { PrcsTypKy = 1; }
var AprPrtyKy = 1;
if (AprPrtyKy == "") { AprPrtyKy = 1; }
var AprStsKy = 1;
if (AprStsKy == "") { AprStsKy = 1; }
var OrginAdrKy = 1;
if (OrginAdrKy == "") { OrginAdrKy = 1; }
var AprUsrKy = 1;
if (AprUsrKy == "") { AprUsrKy = 1; }
var NxtActByAdrKy = $("#cmbEmployee").val();
if (NxtActByAdrKy == "") { NxtActByAdrKy = 1; }
var FrmNxtActDt = $("#rcdDt").val();
var ToNxtActDt = $("#toDt").val();
var FrmInsertDt = "";
var ToInsertDt = "";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Content("~/User/GetAllToDo")',
data: {
'PrjKy': PrjKy,
'PrcsDetKy': PrcsDetKy,
'PrcsTypKy': PrcsTypKy,
'AprPrtyKy': AprPrtyKy,
'AprStsKy': AprStsKy,
'OrginAdrKy': OrginAdrKy,
'AprUsrKy': AprUsrKy,
'NxtActByAdrKy': NxtActByAdrKy,
'FrmNxtActDt': FrmNxtActDt,
'ToNxtActDt': ToNxtActDt,
'FrmInsertDt': FrmInsertDt,
'ToInsertDt': ToInsertDt
},
dataType: "json"
},
update: {
url: '@Url.Content("~/User/UpdateToDo")',
type: "POST",
success: function (data, status, xhr) {
alert("success");
},
error: function (xhr, status, error) {
alert("error");
}
},
create: {
url: '@Url.Content("~/User/InsertToDo")',
type: "POST",
success: function (data, status, xhr) {
alert("success");
},
error: function (xhr, status, error) {
alert("error");
}
},
destroy: {
url: '@Url.Content("~/User/DeleteToDo")',
type: "POST"
}
},
pageSize: 10
, schema:
{
model:
{
id: "PrcsDetKy", //Primary key to uniquely identify the row.
fields: //Relavent fields of the grid should be bind with following model items
{
ID: { editable: true, nullable: false },
AprDtm: { editable: true, nullable: false, validation: { required: true} },
AprPrty: { editable: true, nullable: false, validation: { required: true} },
AprUsr: { editable: true, nullable: true },
AprSts: { editable: true, nullable: true },
AprStsKy: { editable: true, nullable: true },
AprPrtyKy: { editable: true, nullable: true },
AprUsrKy: { editable: true, nullable: true },
AprResnKy: { editable: true, nullable: true },
PrjId: { editable: true, nullable: true },
TaskId: { editable: true, nullable: true },
TaskNm: { editable: true, nullable: false, validation: { required: true} },
PrcsDetKy: { editable: false, nullable: false },
TaskTyp: { editable: true, nullable: false, validation: { required: true} },
PrcsTypKy: { editable: true, nullable: true },
PrjKy: { editable: true, nullable: true },
PrcsDetAprKy: { editable: true, nullable: true },
PrjNm: { editable: true, nullable: false, validation: { required: true} },
Des: { editable: true, nullable: false, validation: { required: true} },
NxtActByAdr: { editable: true, nullable: false, validation: { required: true} },
NxtActByAdrKy: { editable: true, nullable: true },
NxtActDt: { editable: true, nullable: true },
Rem: { editable: true, nullable: true, type: "string" },
OriginBy: { editable: false, nullable: true },
Hyperlinks1: { editable: false, nullable: true },
Hyperlinks2: { editable: false, nullable: true },
Hyperlinks3: { editable: false, nullable: true },
Hyperlinks4: { editable: false, nullable: true },
OrginAdrKy: { editable: true, nullable: true },
WrkStnKy: { editable: true, nullable: true },
ObjKy: { editable: true, nullable: true },
ObjCd: { editable: true, nullable: true },
ObjNm: { editable: true, nullable: true },
ItmKy: { editable: true, nullable: true },
ItmCd: { editable: true, nullable: true },
IsAct: { editable: true, nullable: true },
IsApr: { editable: true, nullable: true }
}
}
}
});
return dataSource;
}
function LoadGridView() {
var dataSource = GetDataSource();
$("#grid").kendoGrid({
dataSource: dataSource,
editable: "inline",
selectable: "row",
toolbar: ["create"],
autobind: true,
reorderable: true,
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50, 100]
},
sortable: {
mode: "multiple"
},
sort: { field: "PrjNm", dir: "asc" },
groupable: {
messages: {
empty: "Drop columns here"
}
},
columnMenu: {
sortable: true,
filterable: true,
messages: {
columns: "Hide/Show Columns",
filter: "Apply filter",
sortAscending: "Sort (asc)",
sortDescending: "Sort (desc)"
}
},
resizable: true,
dataBinding: function() {
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
},
filterable: {
messages: {
and: "And",
or: "Or",
filter: "Apply filter",
clear: "Clear filter",
info: "Filter by"
},
extra: true, // show extra filters
operators: { // redefine the string operators
string: {
contains: "Contains",
doesnotcontain: "Doesn't contain",
startswith: "Starts With",
endswith: "Ends"
},
number: {
eq: "Is Equal To",
neq: "Not equal to",
gte: "Greater than or equal to",
lte: "Less than or equal to",
gt: "Greater than",
lt: "Less than"
}
}
},
navigatable: true,
columns: [
{ field: "ID", title: "Ref#", template: "#= ++record #", width: "50px" },
{
field: "AprDtm",
title: "Record Date",
editor: function (container, options) {
var model = options.model;
$('<input id="DtTxt" name="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>').appendTo(container).kendoDatePicker({
change: function (e) {
model.set("AprDtm", e.sender._oldText);
}
});
},
format: "{0: MM-dd-yyyy}"
},
{
field: "PrjNm",
title: "Project",
width: "150px",
editor: function (container, options) {
var model = options.model;
$('<input id="btntxt" name="' + options.field + '"/>').appendTo(container).kendoComboBox({
dataSource: {
type: "POST",
transport: {
read: '@Url.Content("~/User/GetProjectList")'
}
},
change: function (e) {
combo = e.sender;
selectedItm = combo.select();
dataItem = combo.dataItem(selectedItm);
model.set("PrjKy", dataItem.PrjKy);
model.set("PrjNm", dataItem.PrjNm);
},
dataValueField: "PrjKy",
dataTextField: "PrjNm"
});
}
},
{ field: "TaskNm", title: "Task Name", width: "150px" },
{
field: "Des",
title: "Description"
},
{
field: "TaskTyp",
title: "ToDo Type",
width: "110px",
editor: function (container, options) {
var model = options.model;
$('<input id="cmbPrsTyp" name="' + options.field + '"/>').appendTo(container).kendoComboBox
({
dataSource: {
type: "POST",
transport: {
read: '@Url.Content("~/User/GetProjectTypeList")'
}
},
change: function (e) {
combo = e.sender;
selectedItm = combo.select();
dataItem = combo.dataItem(selectedItm);
model.set("PrcsTypKy", dataItem.CdKy);
model.set("TaskTyp", dataItem.CdNm); // Once this model updated it will aper in the grid column too
return false;
},
dataValueField: "CdKy",
dataTextField: "CdNm"
});
}
},
{
field: "AprPrty",
title: "Piority",
width: "100px",
editor: function (container, options) {
var model = options.model;
$('<input id="cmbPrsTyp" name="' + options.field + '"/>').appendTo(container).kendoComboBox
({
dataSource: {
type: "POST",
transport: {
read: '@Url.Content("~/User/GetPiorityList")'
}
},
change: function (e) {
combo = e.sender;
selectedItm = combo.select();
dataItem = combo.dataItem(selectedItm);
model.set("AprPrty", dataItem.CdNm);
model.set("AprPrtyKy", dataItem.CdKy);
return false;
},
dataValueField: "CdKy", //value member of the combobox Eg: 8645
dataTextField: "CdNm"//display member of the combobox Eg: Hight
});
}
},
{
field: "NxtActByAdr",
title: "Act By",
editor: function (container, options) {
var model = options.model;
$('<input id="usr" name="' + options.field + '"/>').appendTo(container).kendoComboBox
({
dataSource: {
type: "POST",
transport: {
read: '@Url.Content("~/User/GetEmployeeList")'
}
},
change: function (e) {
combo = e.sender;
selectedItm = combo.select();
dataItem = combo.dataItem(selectedItm);
model.set("NxtActByAdr", dataItem.AdrNm);
model.set("NxtActByAdrKy", dataItem.AdrKy);
return false;
},
dataValueField: "AdrKy",
dataTextField: "AdrNm"
});
},
width: "150px"
},
{
field: "NxtActDt",
title: "Next Act Date",
editor: function (container, options) {
var model = options.model;
$('<input id="NxActDtTxt" name="' + options.field + '"/>').appendTo(container).kendoDatePicker({
change: function (e) {
model.set("NxtActDt", e.sender._oldText);
}
});
},
format: "{0: MM-dd-yyyy}",
width: "110px"
},
{ field: "Rem", title: "Remarks" },
{ command: ["edit", "destroy"], title: "", width: "180px" }
]
});
}
$("#btnLoadGrid").click(function() {
LoadGridView();
});
를 작동하지 않는 기능. 그리드 그룹화 기능에 문제가 있습니다. 처음으로 에로드되면 올바르게 작동합니다 (). 그러나 다음 번에로드 한 후에이 문제가 발생했습니다.
이 문제를 해결하는 데 도움주세요 ....................................... ... .............................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ...................
코드 예는 다음과 같습니다. kendo.destroy (document.getElementById ("divReport"))); –