2017-03-27 72 views
0

我在論壇中搜索,找不到我缺少的一件事。網格行上的上下文菜單不會打開

我從你的例子,我想

它添加上下文菜單簡單的網格實現,但它只是沒有做的工作(我拿到常規瀏覽器上下文菜單)。

這裏是我的代碼(ASP.NET MVC)

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-18 col-md-12"> 

      <script type="text/x-kendo-template" id="rowTemplate"> 
       <div class="orderRow"> 
        <tr> 
         <td> 
          #:OrderID# 
         </td> 
         <td> 
          #:Freight# 
         </td> 
         <td> 
          #:OrderDate# 
         </td> 
         <td> 
          #:ShipName# 
         </td> 
         <td> 
          #:ShipCity# 
         </td> 
        </tr> 
       </div> 
      </script> 

      <script> 
       var rowTemplate = kendo.template($('#rowTemplate').html()); 
      </script> 

      @(Html.Kendo().Grid<APDashboard.Models.OrderViewModel>() 
       .Name("AgilePointDashboardGrid") 
       .Columns(columns => 
       { 
        columns.Bound(p => p.OrderID).Filterable(false); 
        columns.Bound(p => p.Freight); 
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}"); 
        columns.Bound(p => p.ShipName); 
        columns.Bound(p => p.ShipCity); 
       }) 
       .ClientRowTemplate("#=rowTemplate(data)#") 
       .Pageable() 
       .Sortable() 
       .Scrollable() 
       .Filterable() 
       .HtmlAttributes(new { style = "height:550px;" }) 
       .DataSource(dataSource => dataSource 
        .Ajax() 
        .PageSize(20) 
        .Read(read => read.Action("Orders_Read", "Grid")) 
       ) 
      ) 

      @(Html.Kendo().ContextMenu() 
       .Name("menu") 
       .Target("#AgilePointDashboardGrid") 
       .Filter(".orderRow") 
       .Orientation(ContextMenuOrientation.Horizontal) 
       .Items(items => 
       { 
        items.Add() 
         .Text("Forward"); 
       }) 
      ) 
     </div> 
    </div> 

    <script> 
    $(document).ready(function() { 
     var menu = $("#menu"); 
     var original = menu.clone(true); 
     original.find(".k-state-active").removeClass("k-state-active"); 

     var initMenu = function() { 

      menu = $("#menu").kendoContextMenu({ 
       target: "#AgilePointDashboardGrid", 
       filter: ".orderRow", 
       select: function(e) { 
        // Do something on select 
       } 
      }); 
     }; 
     initMenu(); 
    }); 
    </script> 
</div> 

我很想知道我在這裏缺少

感謝

回答

0

最後我 「解決」 用它的JavaScript的方式而不是MVC方式。如果我會找到它不能在上面工作的原因,我會更新這個答案以顯示兩種方式。

這是我如何解決它:

<ul id="context-menu"> 
     <li>Edit</li> 
     <li> 
      Delete 
      <ul> 
       <li>Logical deletion</li> 
       <li>Permanent deletion</li> 
      </ul> 
     </li> 
    </ul> 

    <script> 
    $("#context-menu").kendoContextMenu({ 
     target: "#grid", 
     filter: "tr[role='row']", 
     select: function(e) { 
      var grid = $("#grid").data("kendoGrid"); 
      var model = grid.dataItem(e.target); 
      console.log(model); 
     } 
    }); 
    </script> 
相關問題