1. 首頁
  2. 問答
  3. 單擊上下文菜單中的選項需要打開kendo UI模式窗口

單擊上下文菜單中的選項需要打開kendo UI模式窗口

2017-03-07 38 views
0

我在我的MVC視圖上爲kendo ui網格創建上下文菜單。上下文菜單將包含添加，編輯，刪除li項目。點擊添加選項將打開mvc剃刀視圖爲模態。編輯和刪除的情況也是如此。我知道劍道提供kendo.window作爲模態打開。我如何從上下文菜單中調用它。我是否需要在局部視圖中創建模態窗口或kendo.Window。有人可以分享一個相關的例子，以便我找到一些方向。我看到的最接近的例子是使用Kendo MVC控件。我正在尋找使用kendoui jquery的例子。單擊上下文菜單中的選項需要打開kendo UI模式窗口

查看

@Html.Partial("~/Views/Admin/_AdminMenu.cshtml"); 


<div id="grid" class="grids"></div> 

<div id="accessDiv" style=" width 100%; height 100%; background-color #fff;"> 
    <label>Enter access key</label> 
    <input type="text" /> 
    <input type="button" title="Enter" value="Enter" /> 
</div> 

<ul id="contextMenu"> 
    <li>Add</li> 
    <li class="k-separator"></li> 
    <li>Edit</li> 
    <li class="k-separator"></li> 
    <li>Delete</li> 
</ul> 

@section scripts{ 

<script> 

    $(document).ready(function() { 


     var requests = [ 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
       { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" } 
     ]; 

     var requestDataSource = new kendo.data.DataSource({ data: requests, pageSize: 20, sort: { field: "requestId", dir: "asc" } }); 
     requestDataSource.read(); 

     $("#grid").kendoGrid({ 
      dataSource: requestDataSource, 
      columns: [ 
       { field: "requestId", title: "Request", width:"110px" }, 
       { field: "activity", title: "Activity", width: "110px" }, 
       { field: "team", title: "Team", width: "110px" }, 
       { field: "priority", title: "Priority", width: "110px" }, 
       { field: "customer", title: "Customer", width: "130px" }, 
       { field: "custId", title: "Cust ID", width: "120px" }, 
       { field: "primeBL", title: "Prim BL", width: "120px" }, 
       { field: "salesOffice", title: "Sales Office", width: "140px" }, 
       { field: "createdDate",title: "Created", width: "120px" }, 
       { field: "requiredBy", title: "Required By", width: "140px" }, 
       { field: "createdBy", title: "Created By", width: "140px" }, 
       { field: "withName", title: "With", width: "110px" }, 
       { field: "status", title: "Status", width: "100px" } 
       //{ command: ["edit", "destroy"], width: "250px" } 
      ], 

      scrollabe:false, 
      pageable: true, 
      sortable:true, 
      //groupable: true, 
      filterable: true, 
      editable: "inline", 
      reorderable: true 

     }); 


     $("#contextMenu").kendoContextMenu({ 
      target: "#grid", 
      alignToAnchor: false 
     }); 


     var accessWindow = $("#accessDiv").kendoWindow({ 
      actions: {}, /*from Vlad's answer*/ 
      draggable: true, 
      height: "300px", 
      modal: true, 
      resizable: false, 
      title: "Access", 
      width: "500px", 
      visible: false /*don't show it yet*/ 
     }).data("kendoWindow").center().open(); 

     accessWindow.data("kendoWindow").center(); 
     accessWindow.data("kendoWindow").open(); 


    }); 

</script> 




}

來源

2017-03-07 Tom

+0

而你張貼問題，請添加一些你想代碼。這對社區瞭解您的問題將會非常有幫助。 –

+0

我已更新帖子，代碼爲 – Tom

+0

當前窗口在窗體加載時打開。我只需要在用戶從上下文菜單中選擇添加或編輯選項時才能打開 – Tom

回答

1 

$(document).ready(function() { 
 

 

 
     var requests = [ 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
       { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ranjit Ravindranath Menon", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" }, 
 
      { requestId: "337", activity: "Set Up Billing", team: "Charge Maint", priority: "x", customer: "Audi", custId: "25897895", primeBL: "WP", salesOffice: "3100", createdDate: "14/02/2017", requiredBy: "18/02/2017", createdBy: "Ralf Klein", withName: "Ingri Schmidt", status: "Complete" } 
 
     ]; 
 

 
     var requestDataSource = new kendo.data.DataSource({ data: requests, pageSize: 20, sort: { field: "requestId", dir: "asc" } }); 
 
     requestDataSource.read(); 
 

 
     $("#grid").kendoGrid({ 
 
      dataSource: requestDataSource, 
 
      columns: [ 
 
       { field: "requestId", title: "Request", width:"110px" }, 
 
       { field: "activity", title: "Activity", width: "110px" }, 
 
       { field: "team", title: "Team", width: "110px" }, 
 
       { field: "priority", title: "Priority", width: "110px" }, 
 
       { field: "customer", title: "Customer", width: "130px" }, 
 
       { field: "custId", title: "Cust ID", width: "120px" }, 
 
       { field: "primeBL", title: "Prim BL", width: "120px" }, 
 
       { field: "salesOffice", title: "Sales Office", width: "140px" }, 
 
       { field: "createdDate",title: "Created", width: "120px" }, 
 
       { field: "requiredBy", title: "Required By", width: "140px" }, 
 
       { field: "createdBy", title: "Created By", width: "140px" }, 
 
       { field: "withName", title: "With", width: "110px" }, 
 
       { field: "status", title: "Status", width: "100px" } 
 
       //{ command: ["edit", "destroy"], width: "250px" } 
 
      ], 
 

 
      scrollabe:false, 
 
      pageable: true, 
 
      sortable:true, 
 
      //groupable: true, 
 
      filterable: true, 
 
      editable: "inline", 
 
      reorderable: true 
 

 
     }); 
 

 

 
     $("#contextMenu").kendoContextMenu({ 
 
      target: "#grid", 
 
      alignToAnchor: false, 
 
      select : function(e){ 
 
       var selected = e.item; 
 
      if($(selected).text() == 'Add' || $(selected).text() == 'Edit'){ 
 
       var accessWindow = $("#accessDiv").kendoWindow({ 
 
         actions: {}, /*from Vlad's answer*/ 
 
         draggable: true, 
 
         height: "300px", 
 
         modal: true, 
 
         resizable: false, 
 
         title: "Access", 
 
         width: "500px", 
 
         visible: false /*don't show it yet*/ 
 
        }).data("kendoWindow").center().open(); 
 

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

 

 
     
 

 

 
    });
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
 
    
 
    <div id="grid" class="grids"></div> 
 

 
<div id="accessDiv" style=" width 100%; height 100%; background-color #fff;"> 
 
    <label>Enter access key</label> 
 
    <input type="text" /> 
 
    <input type="button" title="Enter" value="Enter" /> 
 
</div> 
 

 
<ul id="contextMenu"> 
 
    <li>Add</li> 
 
    <li class="k-separator"></li> 
 
    <li>Edit</li> 
 
    <li class="k-separator"></li> 
 
    <li>Delete</li> 
 
</ul>

試試這個。

這裏是文檔鏈接：http://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu#events-select

$("#contextMenu").kendoContextMenu({ 
       target: "#grid", 
       alignToAnchor: false, 
       select: function(e) { 
        var selectedItem = e.item; // check this item is add or edit and then open the kendo window 
       if($(selectedItem).text() == 'Add' || $(selectedItem).text() == 'Edit'){ 
        var accessWindow = $("#accessDiv").kendoWindow({ 
        actions: {}, /*from Vlad's answer*/ 
        draggable: true, 
        height: "300px", 
        modal: true, 
        resizable: false, 
        title: "Access", 
        width: "500px", 
        visible: false /*don't show it yet*/ 
        }).data("kendoWindow").center().open(); 

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

對於裝載在劍道窗口中的內容。您可以在kenod窗口

這裏使用content選項爲演示：http://demos.telerik.com/kendo-ui/window/ajax

來源

2017-03-07 12:12:59

+0

對不起，您是否也可以包含對所選項目的檢查 – Tom

+0

我做了這個if（selectedItem ==「Add」）{ – Tom

+0

並根據我正在尋找在單獨的視圖中創建這個div元素的問題..可能是局部視圖。我如何從我的上下文菜單中調用這個局部視圖。我將在幾個網格上使用彈出窗口。每個彈出窗口都會調用一個單獨的視圖。需要關於最佳實施的建議 – Tom

相關問題

 相關問題