Question

我使用带有custom.command的层次网格（父网格和子网格）的kendo网格;单击Child的查看按钮（在父网格运行正常的情况下），它应该调用java脚本函数，显示该行的详细信息，但发生的是它调用javascript两次，第一次有正确的行ID（即相同的行）然后第二次使用错误的id（即父网格的第一个id）。

代码如下。

父网格

@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>()
.Name("GridAudit")
.Columns(column =>
    {
        column.Bound(model => model.LogId).Visible(true);
        column.Bound(model => model.Date);
        column.Bound(model => model.Time);
        column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User"));
        column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150);
        column.Bound(model => model.Activity);
        column.Bound(model => model.Description).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200);
        column.Command(command =>
        {
            command.Custom("View").Text(" ").Click("onParentAuditHirarchy");
        }).Width("6em").Title("Actions");
    })
.Reorderable(reorder => reorder.Columns(true))
.Selectable(select => select.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.ClientDetailTemplateId("template1")
.Sortable()
.Scrollable(scroll => scroll.Enabled(false))
.Filterable()
.Pageable(page => page.ButtonCount(5))
.HtmlAttributes(new { style = "height:400px" })
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("Audit_Load", "AuditLog").Data("getSearchData")
)
.PageSize(11)
)
)

小孩子网格

<script id="template1" type="text/kendo-tmpl">
@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>()
    .Name("GridDetails" + "#=LogId#")
    .AutoBind(true)
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
     .Columns(column =>
    {
        column.Bound(model => model.LogId).Visible(true);
        column.Bound(model => model.Date);
        column.Bound(model => model.Time);
        column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User"));
        column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150);
        column.Bound(model => model.Activity);
        column.Bound(model => model.Description).Width(200);//.ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200);
        column.Command(command =>
        {
            command.Custom("View").Text(" ").Click("onGridAuditHirarchy");
        }).Width("6em").Title("Actions");
    })
    .Selectable()
    .ClientDetailTemplateId("template2")
    .Sortable()
    .HtmlAttributes(new { style = "height:300px;" })
    .Scrollable(scroll => scroll.Enabled(false))
    .Filterable()
    .Pageable(page => page.ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("LoadHirarchy", "AuditLog", new { auditId = "#=LogId#" }))
        .PageSize(3)
    )
    .ToClientTemplate()
 )
 </script>

的Javascript

<script type="text/javascript">

function GetAuditId() {
    return {
        auditId: $(hdnTempGridId).val()
    }
}

onParentAuditHirarchy = function (e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var id = dataItem.LogId;

        $(hdnTempGridId).val(id);

        var win = $("#window").data("kendoWindow");
        var grid = $("#GridDetails").data("kendoGrid");
        grid.dataSource.read();

        win.setOptions({
            width: 900,
            height: 400
        });

        win.open();
        win.center();


}

onGridAuditHirarchy = function (e) {
    e.preventDefault();
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var id = dataItem.LogId;

    if (e.delegateTarget.id != 'GridAudit') {
        $(hdnTempGridId).val(id);

        var win = $("#window").data("kendoWindow");
        var grid = $("#GridDetails").data("kendoGrid");
        grid.dataSource.read();

        win.setOptions({
            width: 900,
            height: 400
        });

        win.open();
        win.center();
    }

}

$(document).ready(function () {
    var win = $("#window").data("kendoWindow");
    win.close();

});
</script>

然后通过java脚本打开Kendo窗口。

@(Html.Kendo().Window()
  .Name("window") //The name of the window is mandatory. It specifies the "id" attribute of the widget.
  .Title("Audit Log Detail(s)") //set the title of the window
  .Content(@<text>
      @(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditDetailListModel>()
    .Name("GridDetails")
    .AutoBind(false)
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))
    .Selectable()
    .Sortable()
    .HtmlAttributes(new { style = "height:300px;" })
    .Scrollable(scroll => scroll.Enabled(false))
    .Filterable()
    .Pageable(page => page.ButtonCount(5))

    .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("LoadDetails", "AuditLog").Data("GetAuditId"))
                .PageSize(10)
            )
)
            </text>)
  .Visible(false)
  .Modal(true)
)

Answer 1

您可以通过检查第一个命令事件显示的元素是否可见来解决此问题：

function showDetailsLevel(e) {
    e.preventDefault();
    originatingId = this.dataItem($(e.currentTarget).closest("tr")).Id

    var wnd = $("#Details").data("kendoWindow");  

    if (!$("#Details").is(":visible")) { 
        wnd.center();
        wnd.open();
        var grid = $("#DetailGrid").data("kendoGrid");
        grid.dataSource.read();
    }   
}

Answer 2

我终于弄明白了（至少我的问题）

自定义操作的名称在父网格和子网格中不能相同

command.Custom("View")//parent
command.Custom("View")//child

所以做到这一点

command.Custom("View1")//parent
command.Custom("View2")//child

我希望这可以节省别人的时间。

网格自定义具有层次结构的命令是两次调用javascript函数。

2 个答案: