当点击网格数据时弹出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