将kendo网格的值传递给弹出窗口

时间:2017-04-19 14:43:34

标签: kendo-ui asp.net-mvc-5 kendo-grid

我在MVC5页面中实现了一个kendo网格和上下文菜单。我点击“更新状态”菜单打开一个窗口。我需要在弹出窗口中检索所选行中的请求和其他几个字段。我还需要显示带有值的下拉控件。什么是最好的方式

网格

  @(Html.Kendo().ContextMenu()
        .Name("RequestMenu")
        .Target("#GridRequest")
        .Filter("tr")
        .Orientation(ContextMenuOrientation.Vertical)
        .Animation(animation =>
        {
            animation.Open(open =>
            {
                open.Fade(FadeDirection.In);
                open.Duration(500);
            });
        })
         .Items(items =>
         {
             items.Add()
                 .Text("Edit");

             items.Add()
                .Text("Update Status");

         })

         .Events(e =>
         {
             e.Select("onSelect");

         })
    )

上下文菜单

 function onSelect(e) {
        var grid = $("#GridTeam").data("kendoGrid");
        var requestId;

        switch ($(e.item).children(".k-link").text()) {

            case "Edit":

                var grid = $("#GridRequest").data("kendoGrid");
                var column = grid.columns[0];
                var selectedBackup = grid.dataItem(grid.select());
                requestId = selectedBackup.id;
                window.location.href = '@Url.Action("EditRequest", "Request", new { id = "_id_", status="Edit" })'.replace('_id_', requestId);
                break;
            case "Update Status":
                //alert("Work in progress");
                //$('#window1').data('kendoWindow').center().open();

                var myWindow = $("#window");

                //e.preventDefault();
                //var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

                //kendo.bind($("#window"), dataItem);



                   myWindow.kendoWindow({
                    width: "400px",
                    height: "180px",
                    title: "Update Request Status",
                    modal: true,
                    visible: false,
                    actions: ["Minimize", "Maximize", "Close"],

                }).data("kendoWindow");
                   myWindow.data("kendoWindow").center().open();
        }

的Javascript

<element data-status="true">Content</element>
<element data-status="false">Content</element>

[data-status="true"] {
    color: green;
}
[data-status="false"] {
    color: red;
}

1 个答案:

答案 0 :(得分:0)

你正在做几乎,只有两个细节:

  1. 如果将contextMenu的目标绑定到网格的容器,您将永远无法确定单击哪个行用户。我建议您绑定到网格的行(TR),例如#GridRequest tbody tr;

  2. 我担心e.currentTarget不存在或在该上下文中返回undefined。您应该使用e.target,如果您执行了我上面建议的操作,它将指向所单击的行。然后,您可以按如下方式获取 dataItem

    grid.dataItem(e.target);
    
  3. 在我的建议有效的情况下查看this demo