Display Grid as Triangular Matrix

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	Windows 10 64bit
Preferred Language	JavaScript

Description

How can I change the default data layout of the Kendo UI Grid to a triangular matrix?

Solution

The following example demonstrates how to change the default data layout of the Grid to a Triangular matrix.

To achieve this behavior:

1. Disable editing.
2. Change the background color of the cells in the main diagonal of the Grid.
3. Remove the cells in the upper right triangular of the Grid.

This is a custom solution which removes some of the table cells. As a result, the approach might not pass markup validation.

    <style>
      .k-grid-content table{
        background-color: aliceblue;
      }
      #grid .k-grid-content table tbody > tr {
        background-color: white;
      }
      .mainDiagonal{
        background-color: gray;
      }
    </style>

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

    <script>
      $("#grid").kendoGrid({
        columns: [
          { field: "Attribute" },
          { field: "Column1" },
          { field: "Column2" },
          { field: "Column3" }
        ],
        dataSource: {
          data: [
            { Attribute: "Row 1", Column1: 10, Column2: 20, Column3: 30},
            { Attribute: "Row 2", Column1: 40, Column2: 50, Column3: 60},
            { Attribute: "Row 3", Column1: 70, Column2: 80, Column3: 90 }
          ],
          schema: {
            model: {
              fields: {
                "Attribute": {editable: false},
              }
            }
          }
        },
        editable: true,
        edit: function(e) {
          var className = e.container[0].className;

          if(className.indexOf("mainDiagonal") != -1){
            e.sender.closeCell();
          }
        },
        dataBound: function (e) {
          // Get all the rows and rowLength in the grid.
          var rows = e.sender.tbody.children();
          var rowLength = rows.length;

          for (i = rowLength; i > 0; i--) {
            // Get the current row.
            var row = $(rows[i - 1]);
            var cells = row.children().length;
            // Get the number of cells to remove.
            var nCellsToRemove = rowLength - i + 1;
            var first = true;
            for (nCellsToRemove; nCellsToRemove > 0; nCellsToRemove--) {
              // Get the cell to remove and push it to the removable cells array.
              var idx = cells - nCellsToRemove;
              var cell = $(row.children()[idx])[0];

              // Determine iteration and add classes accordingly.
              if (first){
                // Add mainDiagonal class and set the first flag to false.
                $(cell).addClass('mainDiagonal');
                first = false;
              } else {
                // Add the upperTriangular class.
                $(cell).addClass('upperTriangular');
              }
            }
          }

          // Remove all <td> elements with the upperTriangular class.
          $('.upperTriangular').remove();

          // Format the background of the table rows.
          $('#grid .k-grid-content table tbody').find('tr').css('background-color','white');
        }
      });
    </script>

See Also

• JavaScript API Reference of the Data Grid