multi-column-headers-styling.json

{
  "export": true,
  "skipAlterDataCasing": true,
  "onInit": ["WebTreeGridMultiColumnHeadersStyling"],
  "descriptions": {
    "content": {
      "type": "WebTreeGrid",
      "dataRef": "EmployeesFlatDetails",
      "autoGenerate": false,
      "name": "treeGrid",
      "id": "treeGrid",
      "primaryKey": "ID",
      "foreignKey": "ParentID",
      "columnList": [
        {
          "type": "WebColumn",
          "field": "Name",
          "resizable": true
        },
        {
          "type": "WebColumnGroup",
          "header": "General Information",
          "children": [
            {
              "type": "WebColumn",
              "field": "HireDate",
              "sortable": true,
              "resizable": true
            },
            {
              "type": "WebColumnGroup",
              "header": "Personal Details",
              "children": [
                {
                  "type": "WebColumn",
                  "field": "ID",
                  "sortable": true,
                  "resizable": true
                },
                {
                  "type": "WebColumn",
                  "field": "Title",
                  "sortable": true,
                  "resizable": true
                },
                {
                  "type": "WebColumn",
                  "field": "Age",
                  "sortable": true,
                  "resizable": true
                }
              ]
            }
          ]
        },
        {
          "type": "WebColumnGroup",
          "header": "Address Information",
          "children": [
            {
              "type": "WebColumnGroup",
              "header": "Location",
              "children": [
                {
                  "type": "WebColumn",
                  "field": "Country",
                  "sortable": true,
                  "resizable": true
                },
                {
                  "type": "WebColumn",
                  "field": "City",
                  "sortable": true,
                  "resizable": true
                },
                {
                  "type": "WebColumn",
                  "field": "Address",
                  "sortable": true,
                  "resizable": true
                }
              ]
            },
            {
              "type": "WebColumnGroup",
              "header": "Contact Information",
              "children": [
                {
                  "type": "WebColumn",
                  "field": "Phone",
                  "sortable": true,
                  "resizable": true
                },
                {
                  "type": "WebColumn",
                  "field": "Fax",
                  "sortable": true,
                  "resizable": true
                },
                {
                  "type": "WebColumn",
                  "field": "PostalCode",
                  "sortable": true,
                  "resizable": true
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "modules": [
    "withDescriptions",
    "grids/WebGridModule"
  ]
}