1
무료 검도 웹 컨트롤을 사용하고 있습니다. 이전에 여러 장소에서 그리드보기를 사용했고 현재 프로젝트에 대한 팝업 스타일 편집을 사용하기로 결정했습니다.Kendo.Web 그리드 팝업 ComboBox로 생성
나는 대부분 작동하고 있습니다. 범주, 은행 계좌 및 수취인에 대한 세 개의 콤보 상자가 있으며 기존 항목을 편집 할 때 MVC 작업으로 전달 된 모델 개체에 올바른 값이 있습니다. 그러나 만들기 단추를 클릭하면 세 개의 콤보 상자 값이 null로 컨트롤러에 반환됩니다. 그렇지 않으면 편집뿐만 아니라, 실패,
@using System
@using System.Linq
@{
ViewBag.Title = "Transactions";
}
@section Head
{
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/kendo.web.min.js"> </script>
}
@section featured
{
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title</h1>
</hgroup>
</div>
</section>
}
<div id="grid"></div>
<script>
$(function() {
$("#grid").kendoGrid({
height: 350,
toolbar: [{ name: "create", text: "Create New Transaction" }],
columns:
[
{ field: "Date", width: "100px", template: '#= kendo.toString(Date,"MM/dd/yyyy") #' },
{ field: "Amount", format: "{0:c}", width: "100px" },
{ field: "Category", width: "80px", editor: categoryDropDownEditor, template: "#=Category.Name#" },
{ field: "BankAccount", title: "Account", width: "80px", editor: bankAccountDropDownEditor, template: "#=BankAccount.Name#" },
{ field: "Payee", width: "80px", editor: payeeDropDownEditor, template: "#=Payee.Name#" },
{ command: ["edit", "destroy"], title: " ", width: "160px" }
],
editable: { mode: "popup", confirmation: "Are you sure you want to delete this transaction?" },
pageable:
{
refresh: true,
pageSizes: true
},
sortable: true,
filterable: false,
dataSource:
{
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 7,
schema:
{
data: "Data",
total: "Total",
model:
{
id: "Id",
fields:
{
Id: { editable: false, nullable: true },
Date: { type: "Date" },
Amount: { type: "number", validation: { required: true, min: 0 } },
Category: { validation: { required: true } },
BankAccount: { validation: { required: true } },
Payee: { validation: { required: true } },
Note: { validation: { required: false } }
}
}
},
batch: false,
transport:
{
create:
{
url: "@Url.Action("Create", "Transaction")",
contentType: "application/json",
type: "POST"
},
read:
{
url: "@Url.Action("Read", "Transaction")",
contentType: "application/json",
type: "POST"
},
update:
{
url: "@Url.Action("Update", "Transaction")",
contentType: "application/json",
type: "POST"
},
destroy:
{
url: "@Url.Action("Delete", "Transaction")",
contentType: "application/json",
type: "POST"
},
parameterMap: function(data)
{
return JSON.stringify(data);
}
}
}
});
function categoryDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "@Url.Action("GetCategories", "Transaction")" }
}
});
}
function bankAccountDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "@Url.Action("GetBankAccounts", "Transaction")" }
}
});
}
function payeeDropDownEditor(container, options)
{
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
{
autoBind: true,
dataValueFileld: "Id",
dataTextField: "Name",
dataSource:
{
type: "json",
transport: { read: "@Url.Action("GetPayees", "Transaction")" }
}
});
}
});
</script>
실무해야 검도 콤보 상자에 바인딩 : 여기
이보기에 대한 CSHTML 코드입니다. 내가 생각할 수있는 것은 그 물체가 정확하게 만들어지지 않는다는 것이다. 또한 기본적으로 콤보 상자의 첫 번째 항목을 선택하지만 값을 바인딩하지는 않습니다.[HttpPost]
public ActionResult Create(TransactionModel transactionModel)
{
var transaction = _moneyBO.CreateTransaction();
Mapper.Map(transactionModel, transaction);
_moneyBO.UpdateTransaction(transaction);
return Json(Mapper.Map<TransactionModel>(transaction));
}
public ActionResult Update(TransactionModel transactionModel)
{
var transaction = _moneyBO.Transactions.SingleOrDefault(x => x.Id == transactionModel.Id);
if (transaction == null)
return View("NotFound");
Mapper.Map(transactionModel, transaction);
_moneyBO.UpdateTransaction(transaction);
return Json(Mapper.Map<TransactionModel>(transaction));
}
나는 팝업 사용자 정의 편집을 사용하여 좋은 예를 발견하지 않았습니다 : 다음
는내 생성 및 업데이트 작업에 대한 코드입니다. Kendo 사이트의 예는 인라인으로 작동하지만 예제를 팝업으로 변경하면 작동하지 않습니다.
알 수 없습니다. 고마워, 오늘 밤 나도 그 차이가 있는지 알아볼거야. 편집은 동일한 연결로 작동하기 때문에 내 추측은 아닐 것입니다. 그러나 누가 알 수 있습니다. –
나는 지난 주 다른 프로젝트에 바빴다. 이번 주말에 이걸 보길 바랍니다. –