當點擊網格數據時彈出kendo窗口

Question

我在我的項目中爲10個產品創建了一個kendo網格。當我點擊劍道網格中顯示的產品名稱時，我希望包含產品細節的劍道窗口彈出。

我已經查看了劍道網格的演示，但我不想要選擇要編輯的產品的詳細信息，也不想使用單獨的列作爲詳細信息按鈕，如示例中所示，演示。

我也看着劍道UI的音樂商店的demo，但是我無法理解其作爲它的代碼jQuery中，我使用asp.net mvc的剃刀語法爲我的項目

注： 我希望窗口僅在我點擊產品名稱並顯示其詳細信息時纔會出現。

Answer 1

您可以使用：

$('#grid').on("click", "tr.k-state-selected", function (e) { 
    // open window here 
    // you have i.e. Id here $('#grid').dataItem($('#grid').select()).Id 
}); 

爲此，你必須設置網格配置選項selectable: "row"。 否則你可以用：

$('#grid').on("click", "tr", function (e) { ... } 

Answer 2

您可以使用detailTemplate的實現它。

<script> 
      var wnd, 
       detailsTemplate; 

      $(document).ready(function() { 
       var grid = $("#grid").kendoGrid({ 
        dataSource: { 
         pageSize: 20, 
         data: createRandomData(50) 
        }, 
        pageable: true, 
        height: 550, 
        columns: [ 
         { field: "FirstName", title: "First Name", width: "140px" }, 
         { field: "LastName", title: "Last Name", width: "140px" }, 
         { field: "Title" }, 
         { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }] 
       }).data("kendoGrid"); 

       wnd = $("#details") 
        .kendoWindow({ 
         title: "Customer Details", 
         modal: true, 
         visible: false, 
         resizable: false, 
         width: 300 
        }).data("kendoWindow"); 

       detailsTemplate = kendo.template($("#template").html()); 
      }); 

      function showDetails(e) { 
       e.preventDefault(); 

       var dataItem = this.dataItem($(e.currentTarget).closest("tr")); 
       wnd.content(detailsTemplate(dataItem)); 
       wnd.center().open(); 
      } 
     </script> 

     <script type="text/x-kendo-template" id="template"> 
      <div id="details-container"> 
       <h2>#= FirstName # #= LastName #</h2> 
       <em>#= Title #</em> 
       <dl> 
        <dt>City: #= City #</dt> 
        <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt> 
       </dl> 
      </div> 
     </script> 

到這個fiddle進行工作演示

[UPDATE] 下面的代碼片段實現了同時在產品名稱

<script> 
      var wnd, 
       detailsTemplate; 

      $(document).ready(function() { 
       var grid = $("#grid").kendoGrid({ 
        dataSource: { 
         pageSize: 20, 
         data: createRandomData(50) 
        }, 
        pageable: true, 
        height: 550, 
        columns: [ 
         { field: "FirstName", title: "First Name", width: "140px",attributes: { "class": "FirstName"} }, 
         { field: "LastName", title: "Last Name", width: "140px" }, 
         { field: "Title" }] 
       }).data("kendoGrid"); 

       wnd = $("#details") 
        .kendoWindow({ 
         title: "Customer Details", 
         modal: true, 
         visible: false, 
         resizable: false, 
         width: 300 
        }).data("kendoWindow"); 

       detailsTemplate = kendo.template($("#template").html()); 

       $('#grid').on("click", ".FirstName", function (e) { 

        e.preventDefault(); 

       var dataItem =    $("#grid").getKendoGrid().dataItem($(e.currentTarget).closest("tr")); 
       wnd.content(detailsTemplate(dataItem)); 
       wnd.center().open(); 


    }); 
      }); 


     </script> 

     <script type="text/x-kendo-template" id="template"> 
      <div id="details-container"> 
       <h2>#= FirstName # #= LastName #</h2> 
       <em>#= Title #</em> 
       <dl> 
        <dt>City: #= City #</dt> 
        <dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt> 
       </dl> 
      </div> 
     </script> 

Working demo is here