更新
我已经设法使用值和编辑器模板来呈现表单(见图)。
抱歉，标签涂黑了。保密协议(protocol)要求...
这现在适用于多行，因为我正在使用该行的 uid 为详细信息模板提供一个唯一的名称:
@(Html.Kendo().TabStrip()
.Name("Details_#=uid#")
我已将下面的源更新为最新版本，并包含了我仍然希望帮助解决的问题列表。
显着的问题:
原文贴文(源代码已更新)
我正在尝试创建一个批处理网格，其中每个项目都包含一个详细信息模板。
每个详细信息模板都包含一个标签条，我想在其中保存额外的表单数据。
现在，我有标准的批处理网格工作，但我似乎无法在屏幕上获取每个项目的信息并使其可编辑。此外，当存在多于一行时，详细信息模板会中断。模板仍然呈现，但按钮不起作用，因为两个模板具有相同的 id 可以理解地破坏用户的交互能力，但我不确定如何确保每个行模板的唯一标识符(可能以某种方式使用父 uid？)
完成第一步后，我也不确定如何序列化此表单数据，但如果证明有必要，我可以为此提出一个单独的问题。
网格
@(Html.Kendo().Grid(Model.ItemModelList)
.Name("ItemGrid")
.Columns(columns =>
{
//Other columns omitted for brevity
columns.Bound(i => i.Description).Width(100);
columns.Command(command =>
{
command.Destroy();
}).Width(60);
})
.ClientDetailTemplateId("ItemDetails")
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Pageable()
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events =>
{
events.Error("ItemGrid_ErrorHandler");
})
.Model(model =>
{
model.Id(i => i.ItemModelID);
model.Field(i => i.DimensionUOM).DefaultValue("in");
model.Field(i => i.WeightUOM).DefaultValue("lbs");
})
.Create(create => create.Action("CreateProducts", "ItemGrid"))
.Read(read => read.Action("GetProducts", "ItemGrid"))
.Update(update => update.Action("UpdateProducts", "ItemGrid"))
.Destroy(destroy => destroy.Action("DeleteProducts", "ItemGrid"))
)
)
详细模板
<script id="ItemDetails" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("Details_#=uid#")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("test").Content(@<div>
<table id="testForm">
<tr>
<td>TEST</td>
</tr>
<tr>
</tr>
</table>
</div>);
items.Add().Text("test2").Content(@<div>
<table id="test2Form">
<tr>
<td><label>A</label></td>
<td><label>B</label></td>
<td><label>C</label></td>
<td><label>D</label></td>
<td><label>E</label></td>
</tr>
<tr>
<td>
<input class="k-textbox" value="#=objectA#">
</td>
<td>
@(Html.Kendo().DropDownList()
.Name("objectB")
.Value("#=objectB#")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectBListing, "Value", "Value"))
.ToClientTemplate()
)
</td>
<td>
@(Html.Kendo().DropDownList()
.Name("objectC")
.Value("#=objectC#")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new SelectList((System.Collections.IEnumerable)ViewBag.objectCListing, "Value", "Value"))
.ToClientTemplate()
)
</td>
<td><input class="k-textbox" value="#=objectD#"></td>
<td><input class="k-textbox" value="#=objectE#"></td>
</tr>
</table>
</div>);
})
.ToClientTemplate()
)
最佳答案
public class BaseMode
{
public string UID { get; set; } // Create your own UID, distinguished from Telerik UID by casing.
}
public class ExtraInfoModel : BaseModel
{
[DisplayName("Object A")]
[Required] // For example
public string ObjectA { get; set; }
[DisplayName("Object B")]
[UIHint("DropDownList")]
public int? ObjectB { get; set; }
[DisplayName("Object C")]
public int? ObjectC { get; set; }
public ExtraInfoModel(string uid)
{
this.UID = uid;
}
}
public class ItemModelList : BaseModel
{
public ExtraInfoModel ExtraInfo { get; set; }
public ItemModelList()
{
this.UID = Guid.NewGuid().ToString(); // Not sure about syntax, please review.
this.ExtraInfo = new ExtraInfoModel(this.UID); // Guarantee ExtraInfo.UID is the same as parent UID when you get model from DB.
}
}
@model ExtraInfoModel
@(Html.Kendo().TabStrip()
.Name("Details_#=UID#")
.SelectedIndex(0)
.Items(items =>
{
items.Add().Text("test").Content(@<text>
<div>
<table id="testForm">
<tr>
<td>TEST</td>
</tr>
<tr></tr>
</table>
</div>
</text>);
items.Add().Text("test2").Content(@<text>
@(Html.Kendo().Grid<ExtraInfoModel>()
.Name("gvDetail_#=UID#")
.Columns(c =>
{
c.Bound(m => m.ObjectA).ClientTemplate(Html.Kendo().TextBox()
.Name("ObjectA")
.HtmlAttributes(new { id = "ObjectA_#=UID#" })
.Value(Model.AgencyCode)
.ToClientTemplate()
.ToHtmlString());
c.Bound(m => m.ObjectB).ClientTemplate(Html.Kendo().DropDownList()
.Name("ObjectB")
.HtmlAttributes(new { id = "ObjectB_#=UID#" })
.Value((Model != null && Model.ObjectB.HasValue) ? Model.ObjectB.ToString() : string.Empty)
.OptionLabel("Select B...")
.BindTo(ViewBag.Data)
.ToClientTemplate()
.ToHtmlString());
// Config ObjectC same as ObjectB.
})
.BindTo(new ExtraInfoModel[] { Model }) // Your detail grid has only one row.
)
</text>);
})
)
@Html.Kendo().Grid(Model.ItemModelList)
...
.DetailTemplate(@<text>
@Html.Partial("YourPartialName", item.ExtraInfo) // item stands for ItemModelList, which is the binding data item.
</text>)
c.Bound(m => m.ObjectB).ClientTemplate(Html.Kendo().DropDownList()
.Name("ObjectB")
.HtmlAttributes(new { id = "ObjectB_#=UID#" })
.Value((Model != null && Model.ObjectB.HasValue) ? Model.ObjectB.ToString() : string.Empty)
.OptionLabel("Select B...")
.BindTo(ViewBag.Data)
.Events(e => e.Change("onChangeObjectB")) // Added this line
.ToClientTemplate()
.ToHtmlString());
<script type="text/javascript">
function onChangeObjectB(e) {
var selectedValue = this.value();
var sender = e.sender;
if (sender != undefined && sender.length > 0) {
var detailRow = sender.closest(".k-detail-row");
var masterRow = detailRow.prev();
var mainGrid = $("#ItemGrid").data("kendoGrid");
if (mainGrid != null) {
var masterRowIndex = masterRow.parent().find(".k-master-row").index(masterRow);
var dataItem = mainGrid.dataSource._data[masterRowIndex];
dataItem.ObjectB = selectedValue;
dataItem._dirty = true;
}
}
}
</script>
保存操作将正常工作。
关于razor - 可编辑的详细信息模板 Kendo UI 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13404967/