0
부모를 기반으로 편집 할 때 dataSource를 설정하려는 자식 그리드 내에 다중 선택을했습니다. multiSelect 에 대한 참조를 얻을 수 없습니다. 내 코드는 gridDetailInit 편의 변수의 길이가 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];
}
}
}
EDIT : territoriesTemplate EditorTemplate (AmenitiesEditor.chtml)에서 partialView (Html.Kendo(). MultiSelectFor (m => m @
@model IEnumerable<BladeRez.Creator2.Models.AmenityItem>
) 내 RoomModel 속성에 UIHint을 가지고 있기 때문에 액세스 할
.Placeholder("Select/add amenities...")
.DataTextField("text")
.DataValueField("value")
.Filter(FilterType.Contains)
.Animation(false)
.BindTo((IEnumerable<BladeRez.Creator2.Models.AmenityItem>)ViewData["AmenityList"])
)
로드 (LoadRooms 후) 등
[UIHint("AmenitiesEditor")]
public IEnumerable<AmenityItem> AmenityList
{
get;
set;
}
GENERATED HTML
<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"). 데이터 ("kendoGrid"); 그러나 지금은 세부 그리드 내부의 모든 multiselect를 찾을 필요가 있습니다. (데이터 소스는 LoadRooms 전에 detailInit이 실행되기 때문에 설정되지 않았습니다. 그래서 무엇을 사용합니까? 또는 모든 multiselects 목록을 얻는 방법은 아직 존재하지 않습니다.) – Zoinky
세부 그리드 내부에있는 다중 선택을 여러 번 언급하고 있는데, 그 다중 선택은 무엇입니까? 어디에도 선언 된 MultiSelect 위젯이 보이지 않습니다. 아마도 다른 것을 의미할까요? –
원본 포스트를 편집하면 multiselect가 telerik에서 제공하는 또 다른 위젯입니다. 제 사과입니다. 나는이 질문에 답하는 사람이 누구라도 tendik에 의한 검도 제어를 언급하고 있음을 알고 있다고 생각했습니다. – Zoinky