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

问题描述:

我在我的MVC5页面中实现了剑道网格和上下文菜单。点击更新状态菜单,我打开一个窗口。我需要在弹出窗口中从选定行中检索requestid和其他几个字段。我还需要显示一个包含值的下拉控件。请告诉我这样做将剑道网格的值传递给弹出窗口

电网

的最佳途径
div class="requestgrid" id="requestGrid"> 
@(Html.Kendo().Grid<CC.GRP.MCRequest.ViewModels.RequestViewModel>() 
.Name("GridRequest") 
.Columns(columns => { 
    columns.Bound(o => o.RequestID).Width("100px"); 
    columns.Bound(o => o.CountryCode).Width("100px"); 
    columns.Bound(o => o.SalesOffice).Width("100px"); 
    columns.Bound(o => o.CustomerNumber).Width("120px"); 
    columns.Bound(o => o.ProjectName).Width("120px"); 
    columns.Bound(o => o.ProjectContent).Width("120px"); 
    columns.Bound(o => o.ContractStartDate).Width("140px"); 
    columns.Bound(o => o.Priority).Width("120px"); 
    columns.Bound(o => o.NameOfResponsiblePerson).Width("170px"); 
    columns.Bound(o => o.Status).Width("100px"); 
    columns.Bound(o => o.CreatedBy).Width("110px"); 
    columns.Bound(o => o.CreatedDate).Width("110px"); 
    columns.Bound(o => o.ModifiedBy).Width("110px"); 
}) 
//.ToolBar(toolbar => toolbar.Create()) 
//.Editable(editable => editable.Mode(GridEditMode.PopUp)) 
.Pageable() 
.Sortable() 
.Filterable() 
.Scrollable() 
.Groupable() 

.Selectable(selectable => selectable 
    .Mode(GridSelectionMode.Single) 
    .Type(GridSelectionType.Row)) 
    .Events(events => events 
    .Change("onChange") 
) 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .Model(model => model.Id(t => t.RequestID)) 
     //.Create(update => update.Action("Team_Create", "Admin")) 
     .Read(read => read.Action("Requests_Read", "Request")) 
    //.Update(update => update.Action("Team_Update", "Admin")) 
    ) 
) 

上下文菜单

@(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"); 

     }) 
    ) 

的Javascript

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(); 
     } 

几乎权,只有这样它两个细节:

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

  2. 恐怕e.currentTarget在该上下文中不存在或返回undefined。你应该使用e.target这将指向点击行,如果你做了我上面的建议。然后,你可以让你的DataItem如下:

    grid.dataItem(e.target); 
    

退房this demo与我的建议的工作。

+0

如果我添加.Target(“#GridRequest tbody tr”),我的上下文菜单停止工作 – Tom

+0

@Tom,好吧,那很奇怪。我认为它会像javascript api一样工作。 – DontVoteMeDown

+0

是的。很奇怪 – Tom