New to Kendo UI for jQuery? Download free 30-day trial

    Multi-Column Headers

    The multicolumn headers of the Grid represent a tree-like structure where the user can group one or more columns together by a common header.

    For a runnable example, refer to the demo on implementing multi-column headers in the Grid.

    That common header in turn can be a child of another upper MultiColumn header which can also span both columns and other headers. For more information, refer to the demo on implementing multicolumn headers.

    columns: [
    {
        title: "Personal Info",
        columns: [
            { field: "name" },
            { field: "birthdate" }
        ]
    },
    {
        title: "Location",
        columns: [
            { field: "city" },
            { field: "country" }
        ]
    },
    {
        field: "phone"
    }]

    The previous example results in the following output.

    Kendo UI for jQuery Grid MultiColumn Headers

    KB Articles on Column Headers