0
我有一個多選內部子網格，我想設置基於父級的編輯的數據源。我無法獲得多選的參考 這裏是我的代碼，gridDetailInit amenities變量的長度爲0，這意味着無法找到它。Kendo UI ASP.NET MVC Hierarcy Grid - DetailInit
<script type="text/kendo" id="territoriesTemplate">
<ul>
#for(var i = 0; i< data.length; i++){#
<li>#:data[i].text#</li>
#}#
</ul>
</script>
<script type="text/javascript">
var territoriesTemplate = kendo.template($("#territoriesTemplate").html(), { useWithBlock: false });
</script>
@(Html.Kendo().Grid<RoomTypeModel>()
.Name("gridRoomTypes")
.Columns(columns =>
{
columns.Bound(e => e.Description).Width(250);
columns.Bound(e => e.Rate).Width(120);
columns.Bound(e => e.WeekendRate).Width(120);
columns.Bound(e => e.AmenityList).ClientTemplate("#=territoriesTemplate(AmenityList)#");
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(185);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("LoadRoomTypes", "Property"))
.Update(update => update.Action("UpdateRoomType", "Property").Data("serialize"))
.Destroy(destroy => destroy.Action("DeleteRoomType", "Property"))
.Create(create => create.Action("AddRoomType", "Property", new { uniqueID = "=#UniqueID#" }).Data("serialize"))
.Model(model =>
{
model.Id(m => m.RoomTypeID);
model.Field(e => e.AmenityList).DefaultValue(new List<AmenityItem>());
})
)
.Events(events =>
{
events.DetailInit("gridDetailInit");
events.DataBound("gridDataBound");
})
.ToolBar(commands =>
{
commands.Create().Text("Add new room type");
})
.Sortable()
.ClientDetailTemplateId("template")
)
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<RoomModel>()
.Name("gridRooms#=RoomTypeID#")
.Columns(columns =>
{
columns.Bound(e => e.Description).Width(250);
columns.Bound(e => e.Rate).Width(120);
columns.Bound(e => e.WeekendRate).Width(120);
columns.Bound(e => e.AmenityList).ClientTemplate("\\#=territoriesTemplate(AmenityList)\\#");
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(185);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("LoadRooms", "Property", new { roomTypeID = "#=RoomTypeID#" }))
.Update(update => update.Action("UpdateRoom", "Property").Data("serialize"))
.Destroy(destroy => destroy.Action("DeleteRoom", "Property"))
.Create(create => create.Action("AddRoom", "Property", new { roomTypeID = "#=RoomTypeID#" }).Data("serialize"))
.Model(model =>
{
model.Id(m => m.RoomID);
model.Field(e => e.AmenityList).DefaultValue(new List<AmenityItem>());
})
)
.ToolBar(commands =>
{
commands.Create().Text("Add new room");
})
.Events(events =>
{
events.Edit("gridEdit");
})
.Sortable()
.ToClientTemplate()
)
<script>
function gridDetailInit(e)
{
debugger;
var amenities = e.detailRow.find("#AmenityList").kendoMultiSelect();
}
function gridEdit(e) {
if (e.model.isNew()) {
var parentGrid = $("#gridRoomTypes").kendoGrid();
debugger;
var parentItem = parentGrid.dataSource.get(e.model.RoomTypeID);
e.model.set("Rate", parentItem.Rate);
}
}
function gridDataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
function serialize(data) {
// debugger;
for (var property in data) {
if ($.isArray(data[property])) {
serializeArray(property, data[property], data);
}
}
}
function serializeArray(prefix, array, result) {
for (var i = 0; i < array.length; i++) {
if ($.isPlainObject(array[i])) {
for (var property in array[i]) {
result[prefix + "[" + i + "]." + property] = array[i][property];
}
}
else {
result[prefix + "[" + i + "]"] = array[i];
}
}
}
編輯： 的territoriesTemplate裝載來自EditorTemplate（AmenitiesEditor.chtml）一partialView
@model IEnumerable<BladeRez.Creator2.Models.AmenityItem>
@（Html.Kendo（）。MultiSelectFor（M => M）
.Placeholder("Select/add amenities...")
.DataTextField("text")
.DataValueField("value")
.Filter(FilterType.Contains)
.Animation(false)
.BindTo((IEnumerable<BladeRez.Creator2.Models.AmenityItem>)ViewData["AmenityList"])
)
這是訪問，因爲我有UIHint我RoomModel財產對於AmenityList作爲這樣
[UIHint("AmenitiesEditor")]
public IEnumerable<AmenityItem> AmenityList
{
get;
set;
}
生成的HTML（LoadRooms後）
<div class="k-widget k-grid" id="gridRoomTypes"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Property/LoadRoomTypes?gridRoomTypes-mode=insert"><span class="k-icon k-add"></span>Add new room type</a></div><table><colgroup><col style="width:250px" /><col style="width:120px" /><col style="width:120px" /><col /><col style="width:185px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="Description" data-title="Description" scope="col"><a class="k-link" href="/Property/LoadRoomTypes?gridRoomTypes-sort=Description-asc">Description</a></th><th class="k-header" data-field="Rate" data-title="Rate" scope="col"><a class="k-link" href="/Property/LoadRoomTypes?gridRoomTypes-sort=Rate-asc">Rate</a></th><th class="k-header" data-field="WeekendRate" data-title="Weekend Rate" scope="col"><a class="k-link" href="/Property/LoadRoomTypes?gridRoomTypes-sort=WeekendRate-asc">Weekend Rate</a></th><th class="k-header" data-field="AmenityList" data-title="Amenity List" scope="col"><a class="k-link" href="/Property/LoadRoomTypes?gridRoomTypes-sort=AmenityList-asc">Amenity List</a></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="5"></td></tr></tbody></table></div>
<script>
jQuery(function(){jQuery("#gridRoomTypes").kendoGrid({"detailInit":gridDetailInit,"dataBound":gridDataBound,"columns":[{"title":"Description","width":"250px","field":"Description","filterable":{},"encoded":true,"editor":"\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Description field is required.\" id=\"Description\" name=\"Description\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Description\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Rate","width":"120px","field":"Rate","format":"{0:C}","filterable":{},"encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field Rate must be a number.\" data-val-range=\"The field Rate must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The Rate field is required.\" id=\"Rate\" max=\"2147483647\" min=\"0\" name=\"Rate\" style=\"width:100%\" type=\"number\" value=\"0\" /\u003e\u003cscript\u003e\r\n\tjQuery(function(){jQuery(\"#Rate\").kendoNumericTextBox({\"format\":\"c\"});});\r\n\u003c/script\u003e\r\n\r\n\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Rate\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Weekend Rate","width":"120px","field":"WeekendRate","format":"{0:C}","filterable":{},"encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field WeekendRate must be a number.\" data-val-range=\"The field WeekendRate must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The WeekendRate field is required.\" id=\"WeekendRate\" max=\"2147483647\" min=\"0\" name=\"WeekendRate\" style=\"width:100%\" type=\"number\" /\u003e\u003cscript\u003e\r\n\tjQuery(function(){jQuery(\"#WeekendRate\").kendoNumericTextBox({\"format\":\"c\"});});\r\n\u003c/script\u003e\r\n\r\n\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"WeekendRate\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Amenity List","template":"#=territoriesTemplate(AmenityList)#","field":"AmenityList","filterable":{},"encoded":true,"editor":"\r\n\u003cselect id=\"AmenityList\" multiple=\"multiple\" name=\"AmenityList\"\u003e\u003c/select\u003e\u003cscript\u003e\r\n\tjQuery(function(){jQuery(\"#AmenityList\").kendoMultiSelect({\"dataSource\":[{\"text\":\"Air Conditioner\",\"value\":\"Air Conditioner\"},{\"text\":\"Monkies\",\"value\":\"Monkies\"},{\"text\":\"Room Service\",\"value\":\"Room Service\"}],\"animation\":false,\"dataTextField\":\"text\",\"dataValueField\":\"value\",\"filter\":\"contains\",\"placeholder\":\"Select/add amenities...\",\"value\":[]});});\r\n\u003c/script\u003e\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"AmenityList\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"185px","command":[{"name":"edit","buttonType":"ImageAndText","text":"Edit"},{"name":"destroy","buttonType":"ImageAndText","text":"Delete"}]}],"sortable":true,"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add new room type"}]},"dataSource":{"transport":{"prefix":"","read":{"url":"/Property/LoadRoomTypes"},"update":{"url":"/Property/UpdateRoomType","data":serialize},"create":{"url":"/Property/AddRoomType?uniqueID=%3D#UniqueID#","data":serialize},"destroy":{"url":"/Property/DeleteRoomType"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"RoomTypeID","fields":{"RoomTypeID":{"type":"number"},"UniqueID":{"type":"string"},"Description":{"type":"string"},"Rate":{"type":"number"},"WeekendRate":{"type":"number","defaultValue":null},"AmenityList":{"type":"object","defaultValue":[]},"AmenityListToString":{"editable":false,"type":"string"}}}}},"detailTemplate":kendo.template($('#template').html())});});
</script>
<script id="template" type="text/kendo-tmpl">
<div class="k-widget k-grid" id="gridRooms#=RoomTypeID#"><div class="k-toolbar k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Property/LoadRooms?roomTypeID=%23%3DRoomTypeID%23&gridRooms%23%3DRoomTypeID%23-mode=insert"><span class="k-icon k-add"></span>Add new room</a></div><table><colgroup><col style="width:250px" /><col style="width:120px" /><col style="width:120px" /><col /><col style="width:185px" /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="Description" data-title="Description" scope="col"><a class="k-link" href="/Property/LoadRooms?roomTypeID=%23%3DRoomTypeID%23&gridRooms%23%3DRoomTypeID%23-sort=Description-asc">Description</a></th><th class="k-header" data-field="Rate" data-title="Rate" scope="col"><a class="k-link" href="/Property/LoadRooms?roomTypeID=%23%3DRoomTypeID%23&gridRooms%23%3DRoomTypeID%23-sort=Rate-asc">Rate</a></th><th class="k-header" data-field="WeekendRate" data-title="Weekend Rate" scope="col"><a class="k-link" href="/Property/LoadRooms?roomTypeID=%23%3DRoomTypeID%23&gridRooms%23%3DRoomTypeID%23-sort=WeekendRate-asc">Weekend Rate</a></th><th class="k-header" data-field="AmenityList" data-title="Amenity List" scope="col"><a class="k-link" href="/Property/LoadRooms?roomTypeID=%23%3DRoomTypeID%23&gridRooms%23%3DRoomTypeID%23-sort=AmenityList-asc">Amenity List</a></th><th class="k-header" scope="col"><span class="k-link"> </span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="5"></td></tr></tbody></table></div>
<script>
jQuery(function(){jQuery("\#gridRooms#=RoomTypeID#").kendoGrid({"edit":gridEdit,"columns":[{"title":"Description","width":"250px","field":"Description","filterable":{},"encoded":true,"editor":"\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Description field is required.\" id=\"Description\" name=\"Description\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Description\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Rate","width":"120px","field":"Rate","format":"{0:C}","filterable":{},"encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field Rate must be a number.\" data-val-range=\"The field Rate must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The Rate field is required.\" id=\"Rate\" max=\"2147483647\" min=\"0\" name=\"Rate\" style=\"width:100%\" type=\"number\" value=\"0\" /\u003e\u003cscript\u003e\tjQuery(function(){jQuery(\"\\#Rate\").kendoNumericTextBox({\"format\":\"c\"});});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Rate\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Weekend Rate","width":"120px","field":"WeekendRate","format":"{0:C}","filterable":{},"encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field WeekendRate must be a number.\" data-val-range=\"The field WeekendRate must be between 0 and 2147483647.\" data-val-range-max=\"2147483647\" data-val-range-min=\"0\" data-val-required=\"The WeekendRate field is required.\" id=\"WeekendRate\" max=\"2147483647\" min=\"0\" name=\"WeekendRate\" style=\"width:100%\" type=\"number\" /\u003e\u003cscript\u003e\tjQuery(function(){jQuery(\"\\#WeekendRate\").kendoNumericTextBox({\"format\":\"c\"});});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"WeekendRate\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Amenity List","template":"\\#=territoriesTemplate(AmenityList)\\#","field":"AmenityList","filterable":{},"encoded":true,"editor":"\u003cselect id=\"AmenityList\" multiple=\"multiple\" name=\"AmenityList\"\u003e\u003c/select\u003e\u003cscript\u003e\tjQuery(function(){jQuery(\"\\#AmenityList\").kendoMultiSelect({\"dataSource\":[{\"text\":\"Air Conditioner\",\"value\":\"Air Conditioner\"},{\"text\":\"Monkies\",\"value\":\"Monkies\"},{\"text\":\"Room Service\",\"value\":\"Room Service\"}],\"animation\":false,\"dataTextField\":\"text\",\"dataValueField\":\"value\",\"filter\":\"contains\",\"placeholder\":\"Select/add amenities...\",\"value\":[]});});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"AmenityList\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"width":"185px","command":[{"name":"edit","buttonType":"ImageAndText","text":"Edit"},{"name":"destroy","buttonType":"ImageAndText","text":"Delete"}]}],"sortable":true,"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add new room"}]},"dataSource":{"transport":{"prefix":"","read":{"url":"/Property/LoadRooms?roomTypeID=#=RoomTypeID#"},"update":{"url":"/Property/UpdateRoom","data":serialize},"create":{"url":"/Property/AddRoom?roomTypeID=#=RoomTypeID#","data":serialize},"destroy":{"url":"/Property/DeleteRoom"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"RoomID","fields":{"RoomID":{"type":"number"},"Description":{"type":"string"},"Rate":{"type":"number"},"WeekendRate":{"type":"number","defaultValue":null},"AmenityList":{"type":"object","defaultValue":[]},"AmenityListToString":{"editable":false,"type":"string"}}}}}});});
<\/script>
</script>
你是正確的，我是問的東西，是不存在的，所以這裏是我到目前爲止 VAR parentAmenities = e.sender.dataItem（e.masterRow）.AmenityList; var detailGrid = e.detailRow.find（「.k-grid」）。data（「kendoGrid」）; 但是現在我需要找到細節網格中的所有多重選擇（數據源尚未設置，因爲detailInit在LoadRooms之前觸發，所以我使用什麼或者如何獲取所有多選的列表還沒有存在） – Zoinky
你多次提到細節網格中的多重選擇，那麼多重選擇是什麼？我沒有看到任何地方聲明瞭任何MultiSelect小部件，可能你的意思是別的嗎？ –
編輯了原始文章，multiselect是telerik提供的另一個小工具，我的道歉，我認爲任何人回答這個問題都會知道我指的是telerik的kendo ui控件。 – Zoinky