Question

我在子网格中有一个多选项，我想根据父级设置dataSource进行编辑。我无法获得对multiSelect的引用这是我的代码，gridDetailInit amenities变量的长度为0，这意味着无法找到它。

<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 =＆gt; m）

.Placeholder("Select/add amenities...")
.DataTextField("text")
.DataValueField("value")
.Filter(FilterType.Contains)
.Animation(false)
.BindTo((IEnumerable<BladeRez.Creator2.Models.AmenityItem>)ViewData["AmenityList"])

)

访问哪个是因为我在AmenityList的RoomModel属性上有UIHint

  [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">&nbsp;</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>

Answer 1

在详细信息模板中没有任何名为 AmenityList 的内容，为什么您希望在那里找到这样的元素？在详细信息模板中，您只有一个嵌套的网格。

另外还有一个注意事项 - 在层次结构中使用id选择器不是一个好主意，因为会有多个具有相同名称的元素。更好地坚持使用类属性和类选择器。

Kendo UI ASP.NET MVC Hierarcy Grid - DetailInit

1 个答案: