与Kendo Ui Child Grid交互

时间:2012-12-19 15:37:06

标签: asp.net-mvc kendo-ui

我目前正在使用带有层次结构视图的MVC Kendo Grid来显示子帐户。 这是我的主网格(下面的子项)对于这个网格我已经设置了更改事件(也在下面)。我的问题是,如何在子网格中设置相同的更改功能?每个都有不同的ID,所以我目前无法正确选择它。 编辑:我只需要从选定的孩子行中获取帐户的ID

 @(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Acct_FName).Width(80);
        columns.Bound(p => p.Acct_LName).Width(80);
        columns.Bound(p => p.Acct_Type).Width(90);
        columns.Bound(p => p.Acct_LastContact).Width(140);
        columns.Bound(p => p.Acct_Zip).Hidden();
        columns.Bound(p => p.ID).Hidden();

    })
       .ClientDetailTemplateId("ChildAccounts")
       .DataSource(dataSource => dataSource
        .Ajax() // Specify that the data source is of ajax type
        .Model(model => model.Id(a => a.ID))
        .Events(events => events.Error("error"))
        .Read(read => read.Action("ReadAccounts", "Accounts")) // Specify the action method and controller name
        .Destroy(destroy => destroy.Action("DeleteAccount", "Accounts"))
        .PageSize(50)
    )
    .Pageable()
    .Filterable()
    .Selectable()
    .Scrollable()
    .Sortable()
    .Events(events => events.Change("gridChange"))
    .Events(events => events.DataBound("dataBound"))
    .ToolBar(toolbar => toolbar.Template(
    @<text>
<div class="toolbar">
    <select id="FilterCategory"></select>
    <input type="search" id="Search" style="width: 230px" />
</div>
</text>
    ))
)

儿童网格:

 <script id="ChildAccounts" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
        .Name("SubAccounts_#=ID#")
        .Columns(columns =>
        {
        columns.Bound(p => p.Acct_FName).Width(80);
        columns.Bound(p => p.Acct_LName).Width(80);
        columns.Bound(p => p.Acct_Type).Width(90);
        columns.Bound(p => p.Acct_LastContact).Width(140);
        columns.Bound(p => p.Acct_Zip).Hidden();
        columns.Bound(p => p.ID).Hidden();
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
        )
        .Pageable()
        .Sortable()
        .Selectable()
        .ToClientTemplate()
)
</script>

 function dataBound() {
   // this.expandRow(this.tbody.find("tr.k-master-row").first());
}

这是GridChange函数(为简洁起见缩短)

function gridChange(e) {
    //Enable all button -Prakash Date-07/27/2012
    accountsButtons.button({ disabled: false });
    $("#nodeList").html('');
    $("#updateMessage").html('');
    $("#noteMessage").html('');
    $("#Note_Description").val('');
    kdata = this;

1 个答案:

答案 0 :(得分:1)

将相同的事件声明到子网格中绝对没有问题。

@(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
        .Name("SubAccounts_#=ID#")
        .Columns(columns =>
        {
             columns.Bound(p => p.Acct_FName).Width(80);
        columns.Bound(p => p.Acct_LName).Width(80);
        columns.Bound(p => p.Acct_Type).Width(90);
        columns.Bound(p => p.Acct_LastContact).Width(140);
        columns.Bound(p => p.Acct_Zip).Hidden();
        columns.Bound(p => p.ID).Hidden();
        })
        .Events(ev=>ev.Change("detailGridChange"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
        )
        .Pageable()
        .Sortable()
        .Selectable()
        .ToClientTemplate()
)

<script>
    function detailGridChange(e){
          var parentDataItem = $('#Grid').data().kendoGrid.dataItem($(this.element).closest('.k-detail-row').prev('.k-master-row'));
          alert(parentDataItem.ID);
    }
</script>