點擊Kendo Grid行並打開一個新的Grid窗口

我有一個可以正常使用所有CRUD功能的網格。我想要做的是點擊該網格的任意一行並打開一個新的網格窗口彈出，請記住彈出我們的網格必須具有單擊的行的ID。任何人都有任何想法。我搜索了telerik論壇，沒有任何東西。點擊Kendo Grid行並打開一個新的Grid窗口

來源

2015-10-07 Apollo

網格窗口彈出窗口，你是什麼意思？它是一個編輯窗口嗎？就像當你在這個網格中按下該行的編輯按鈕時一樣？ http://plnkr.co/edit/lPUzfu?p=preview – JFM

請嘗試使用下面的代碼片段。

<!DOCTYPE html> 
<html> 
<head> 
    <base href="http://demos.telerik.com/kendo-ui/treelist/local-data-binding"> 
    <style> 
     html { 
      font-size: 14px; 
      font-family: Arial, Helvetica, sans-serif; 
     } 
    </style> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" /> 

    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script> 
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div id="grid"></div> 
    <div id="window"></div> 
    <script> 
     $(document).ready(function() { 
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service", 
       dataSource = new kendo.data.DataSource({ 
        transport: { 
         read: { 
          url: crudServiceBaseUrl + "/Products", 
          dataType: "jsonp" 
         }, 
         update: { 
          url: crudServiceBaseUrl + "/Products/Update", 
          dataType: "jsonp" 
         }, 
         destroy: { 
          url: crudServiceBaseUrl + "/Products/Destroy", 
          dataType: "jsonp" 
         }, 
         create: { 
          url: crudServiceBaseUrl + "/Products/Create", 
          dataType: "jsonp" 
         }, 
         parameterMap: function (options, operation) { 
          if (operation !== "read" && options.models) { 
           return { models: kendo.stringify(options.models) }; 
          } 
         } 
        }, 

        pageSize: 20, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductID: { editable: false, nullable: true }, 
           ProductName: { validation: { required: true } }, 
           UnitPrice: { type: "number", validation: { required: true, min: 1 } }, 
           Discontinued: { type: "boolean" }, 
           UnitsInStock: { type: "number", validation: { min: 0, required: true } } 
          } 
         } 
        } 
       }); 

      $("#grid").kendoGrid({ 
       dataSource: dataSource, 
       pageable: true, 
       height: 550, 
       dataBound: onDataBound, 
       toolbar: ["create"], 
       columns: [ 
        //"ProductID", 
        "ProductName", 
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }, 
        { field: "UnitsInStock", title: "Units In Stock", width: "120px" }, 
        { field: "Discontinued", width: "120px" }, 
        { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }], 
       editable: "inline" 
      }); 

      $("#window").kendoWindow({ 
       modal: true, 
       width: "505px", 
       height: "315px", 
       title: "Rams's Ten Principles of Good Design", 
       actions: ["Pin", "Refresh", "Maximize", "Close"], 
       visible: false 
      }); 



     }); 
     function onDataBound(e) { 
      var grid = $("#grid").data("kendoGrid") 
      $(grid.tbody).off('click'); 
      $(grid.tbody).on("click", "tr", function (e) { 
       var row = $(this); 
       var grid = $("#grid").getKendoGrid(); 
       var dialog = $("#window").data("kendoWindow"); 
       dialog.open(); 
       dialog.center(); 
       dialog.content(grid.dataItem(row).ProductID) 

      }); 
     } 
    </script> 
</body> 
</html>

請檢查this鏈接在kendo-grid中添加「databound」事件。

讓我知道是否有任何問題。

來源

2015-10-07 07:15:01

點擊Kendo Grid行並打開一個新的Grid窗口

回答

相關問題