Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
  
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>
    <meta charset="utf-8" />
    <title>Kendo Grid Group Header Sample</title>
    <style>
        tr.k-grid-extra-header th.group {
            text-align: center;
            border-bottom-width: 1px;
        }
    </style>
    <script>
        function addGroupHeaderToKendoGrid($grid, mergeOptions) {
          var $headerRow = $grid.find(".k-grid-header thead > tr");
          var $newRow = $("<tr class='k-grid-extra-header'></tr>");
          var idx = 0;
          var $ths = $headerRow.children("th");
          //add empty cell for th not to merge and move text upper
          function addEmptyTH(seq) {
            $newRow.append("<th class='k-header stuff'>&nbsp;</th>");
            $ths.eq(seq).children()
            .wrap("<div></div>").parent()
            .css({
              position: "absolute", zIndex: "10",
              top: $headerRow.height() * 3 / 4,
              width: $ths.eq(seq).width(), 
              textAlign: "center"
            });
          }
          for (var p in mergeOptions) {
            var mergeSet = mergeOptions[p];
            for (var i = idx; i < mergeSet.pos; i++) {
              addEmptyTH(i);
            }
            $newRow.append("<th class='k-header group' colspan='" +
                           mergeSet.count + "'>" + p + "</th>");
            idx = mergeSet.pos + mergeSet.count;
          }
          //add empty cell for rest columns
          for (var i = idx; i < $ths.length; i++) addEmptyTH(i);
          $headerRow.parent().prepend($newRow);
          //extend the .k-grid container's height
          var $container = $headerRow.closest(".k-grid");
          $container.height($container.height() + $newRow.height());
        }
    </script>
​
</head>
<body>
    <input type="button" value="Add Group Header" id="btnTest" />
    <div id="gridContainer">
        <table id="grid">
            <thead>
                <tr>
                    <th data-field="make">Car Make</th>
                    <th data-field="model">Car Model</th>
                    <th data-field="year">Year</th>
                    <th data-field="category">Category</th>
                    <th data-field="airconditioner">Air Conditioner</th>
                  <th data-field="remark">Remark</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Volvo</td>
                    <td>S60</td>
                    <td>2010</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Audi</td>
                    <td>A4</td>
                    <td>2002</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>BMW</td>
                    <td>535d</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>BMW</td>
                    <td>320d</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>No</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>VW</td>
                    <td>Passat</td>
                    <td>2007</td>
                    <td>Saloon</td>
                    <td>No</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Peugeot</td>
                    <td>407</td>
                    <td>2006</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>No</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Alfa Romeo</td>
                    <td>159</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>No</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Nissan</td>
                    <td>Almera</td>
                    <td>2001</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Mitsubishi</td>
                    <td>Lancer</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Opel</td>
                    <td>Vectra</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Toyota</td>
                    <td>Avensis</td>
                    <td>2008</td>
                    <td>Saloon</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Audi</td>
                    <td>Q7</td>
                    <td>2007</td>
                    <td>SUV</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Hyundai</td>
                    <td>Santa Fe</td>
                    <td>2012</td>
                    <td>SUV</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Nissan</td>
                    <td>Qashqai</td>
                    <td>2007</td>
                    <td>SUV</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Mercedez</td>
                    <td>B Class</td>
                    <td>2007</td>
                    <td>Hatchback</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
                <tr>
                    <td>Lancia</td>
                    <td>Ypsilon</td>
                    <td>2006</td>
                    <td>Hatchback</td>
                    <td>Yes</td>
                    <td>NA</td>
                </tr>
            </tbody>
        </table>
    </div>
​
​
    <script>
        $(document).ready(function () {
            $("#grid")
            .kendoGrid({
                height: 400,
                sortable: true,
                resizable: true
            });
            $("#btnTest").click(function () {
                //Header merge option
                var mergeOptions = {
                  //merge header text, start postion and count of th to merge
                    "Model": { pos: 0, count: 2 },
                    "Spec": { pos: 3, count: 2 }
                };
​
                addGroupHeaderToKendoGrid($("#gridContainer"), mergeOptions);
                $(this).prop("disabled", true);
            });
        });
    </script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers