kendo ui Grid Detail template

Posted on Edited on In Views: Disqus:

 

kendo ui Grid  Detail template 範例

 

範例一、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [
                { field: "name" }
            ],
            dataSource: [
                {
                    name: "Beverages",
                    products: [
                        { name: "Tea" },
                        { name: "Coffee" }
                    ]
                },
                {
                    name: "Food",
                    products: [
                        { name: "Ham" },
                        { name: "Bread" }
                    ]
                }
            ],
            detailTemplate: 'Products: <div class="grid"></div>',
            detailInit: function (e) {
                e.detailRow.find(".grid").kendoGrid({
                    dataSource: e.data.products
                });
            }
        });
    </script>
</body>
</html>

 

範例二、

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/detailtemplate">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.mobile.min.css" />

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

    <div id="example">
        <div id="grid"></div>

        <!--detail template 段-->
        <script type="text/x-kendo-template" id="template">
            <div class="tabstrip">
                <ul>
                    <li class="k-state-active">
                        Orders
                    </li>
                    <li>
                        Contact Information
                    </li>
                </ul>
                <div>
                    <div class="orders">
                        <!--detail 資料 insert 點-->
                    </div>
                </div>
                <div>
                    <div class='employee-details'>
                        <ul>
                            <li><label>Country:</label>#= Country #</li> <!--資料來源對應到Employees?-->
                            <li><label>City:</label>#= City #</li>
                            <li><label>Address:</label>#= Address #</li>
                            <li><label>Home Phone:</label>#= HomePhone #</li>
                        </ul>
                    </div>
                </div>
            </div>
        </script>

        <script>
            // header function
            $(document).ready(function () {
                // 製作 kendoGrid object
                var element = $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
                        pageSize: 20,
                        serverPaging: true,
                        serverSorting: true
                    },
                    height: 550,
                    sortable: true,
                    pageable: false,
                    detailTemplate: kendo.template($("#template").html()), // 指定 detail template 段
                    detailInit: detailInit, //detail function 初始化 (對Detail部份加上 js handler)
                    dataBound: function () {
                        // 當 datasource 第一次被 bind 的時候
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
                    columns: [
                        {
                            // 對應到Employees.FirstName欄位
                            field: "FirstName",
                            title: "First Name",
                            width: "120px"
                        },
                        {
                            field: "LastName",
                            title: "Last Name",
                            width: "120px"
                        },
                        {
                            field: "Country",
                            width: "120px"
                        },
                        {
                            field: "City",
                            width: "120px"
                        },
                        {
                            field: "Title"
                        }
                    ]
                });
            });

            // detail function
            function detailInit(e) {
                var detailRow = e.detailRow; //取 detailRow jQuery object

                detailRow.find(".tabstrip").kendoTabStrip({
                    // 設定 detail tab strip 樣式表現
                    // https://docs.telerik.com/kendo-ui/controls/navigation/tabstrip/overview
                    animation: {
                        open: { effects: "fadeIn" }
                    }
                });

                // 製作 kendoGrid object
                detailRow.find(".orders").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        },
                        serverPaging: true,
                        serverSorting: true,
                        serverFiltering: true,
                        pageSize: 7,
                        // Orders.EmployeeID "eq" e.data.EmployeeID(Employees.EmployeeID)?
                        filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
                    },
                    scrollable: false,
                    sortable: true,
                    pageable: true,
                    columns: [
                        { field: "OrderID", title: "ID", width: "70px" },
                        { field: "ShipCountry", title: "Ship Country", width: "110px" },
                        { field: "ShipAddress", title: "Ship Address" },
                        { field: "ShipName", title: "Ship Name", width: "300px" }
                    ]
                });
            }
        </script>
        <style>
            .k-detail-cell .k-tabstrip .k-content {
                padding: 0.2em;
            }

            .employee-details ul {
                list-style: none;
                font-style: italic;
                margin: 15px;
                padding: 0;
            }

                .employee-details ul li {
                    margin: 0;
                    line-height: 1.7em;
                }

            .employee-details label {
                display: inline-block;
                width: 90px;
                padding-right: 10px;
                text-align: right;
                font-style: normal;
                font-weight: bold;
            }
        </style>
    </div>

</body>
</html>

 

範例三、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="example">
      <button class="k-button" id="expand">Expand All</button>
      <button class="k-button" id="collapse">Collapse All</button>
      <div id="grid"></div>

      <script>
        $(document).ready(function() {
          var element = $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
              },
              pageSize: 6,
              serverPaging: true,
              serverSorting: true
            },
            height: 600,
            sortable: true,
            pageable: true,
            detailInit: detailInit,
            dataBound: function() {
              this.expandRow(this.tbody.find("tr.k-master-row").first());
            },
            columns: [
              {
                field: "FirstName",
                title: "First Name",
                width: "110px"
              },
              {
                field: "LastName",
                title: "Last Name",
                width: "110px"
              },
              {
                field: "Country",
                width: "110px"
              },
              {
                field: "City",
                width: "110px"
              },
              {
                field: "Title"
              }
            ]
          });
        });

        function detailInit(e) {
          $("<p/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              serverPaging: true,
              serverSorting: true,
              serverFiltering: true,
              pageSize: 10,
              filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
              { field: "OrderID", width: "110px" },
              { field: "ShipCountry", title:"Ship Country", width: "110px" },
              { field: "ShipAddress", title:"Ship Address" },
              { field: "ShipName", title: "Ship Name", width: "300px" }
            ]
          });
        }

        $('#expand').click(function(e){
          var grid = $("#grid").data("kendoGrid");
          $( ".k-master-row" ).each(function( index ) {
            grid.expandRow(this);
          });
        })

        $('#collapse').click(function(e){
          var grid = $("#grid").data("kendoGrid");
          $( ".k-master-row" ).each(function( index ) {
            grid.collapseRow(this);
          });
        })
      </script>
    </div>
</body>
</html>

 

參考資料：

kendo.ui.Grid Events detailInit