search

bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

Grid header alignment Issue when using 3+ levels headers #6483

Closed chuckn0rris closed 1 year ago

chuckn0rris commented 1 year ago

Forum post

We've got a grid with 3 layers of headers. And we have a couple issues with column alignment. The first seems to be caused by the width of child headers not filling the width of the parent header.

Misaligned Widths.png

In the above image you can see that the Performance Component parent header is wider than it's children headers. No width is set on the parent headers, only on the child headers.

The second issue we see is when a user shows/hides a header, sometime the headers get scrunched up on top of each other, which once again messes with alignment between header and columns. Are there any grid redraw functions that might help with that? Or something else I can do to prevent that?

Before hiding a column not in the screenshot: Grid Headers Before.png

After hiding a column: Grid Headers After.png Misaligned Widths.png Grid Headers Before.png Grid Headers After.png

    columns: [
        {
            "text": "Name",
            "field": "name",
            "cellCls": "js-readonly",
            "footerTemplate": " ",
            "width": "140px",
            "excelFormat": "string",
            "excelHeaderGroup": null,
            "locked": true,
            "filterable": {
                "isMulti": true,
                "filterField": {
                    "type": "combo",
                    "multiSelect": true,
                    "filterOperator": "*",
                    "items": []
                }
            },
            "editor": false,
            "draggable": false,
            "groupable": false
        },
        {
            "text": "Employee Details",
            "draggable": false,
            "groupable": false,
            "filterable": false,
            "children": [
                {
                    "text": "Org",
                    "field": "OrgName",
                    "cellCls": "js-readonly",
                    "hidden": false,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "110px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "filterOperator": "*",
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Region",
                    "field": "RegionAbbr",
                    "cellCls": "js-readonly",
                    "hidden": false,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "65px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "filterOperator": "*",
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Office Name",
                    "field": "OfficeName",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "80px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "filterOperator": "*",
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Education",
                    "field": "EducationConcat",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "250px",
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Bachelor's Grad Date",
                    "field": "BachelorsGradDate",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "date",
                    "excelHeaderGroup": null,
                    "width": "80px",
                    "editor": false,
                    "align": "right",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Masters's Grad Date",
                    "field": "MastersGradDate",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "date",
                    "excelHeaderGroup": null,
                    "width": "80px",
                    "editor": false,
                    "align": "right",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Practice License",
                    "field": "PECertificationCode",
                    "cellCls": "js-readonly",
                    "width": "90px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Certifications",
                    "hidden": true,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "EIT Flag",
                    "field": "EITFlag",
                    "cellCls": "js-readonly",
                    "width": "80px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Certifications",
                    "hidden": true,
                    "editor": false,
                    "filterable": {
                        "isMulti": false,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": false,
                            "items": [
                                "true",
                                "false"
                            ]
                        }
                    },
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Hire Date",
                    "field": "HireDate",
                    "cellCls": "js-readonly",
                    "hidden": false,
                    "excelHeaderGroup": null,
                    "excelFormat": "date",
                    "width": "70px",
                    "editor": false,
                    "align": "right",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Recent Hire",
                    "field": "RecentHire",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "boolean",
                    "excelHeaderGroup": null,
                    "width": "40px",
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Intern Date",
                    "field": "InternDate",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "date",
                    "excelHeaderGroup": null,
                    "width": "70px",
                    "editor": false,
                    "align": "right",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Supervisor",
                    "field": "SupervisorName",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "150px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "filterOperator": "*",
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Exempt",
                    "field": "Exempt",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "boolean",
                    "excelHeaderGroup": null,
                    "width": "30px",
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "FT/PT",
                    "field": "FTPT",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "30px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": [
                                "F",
                                "P"
                            ]
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Hourly/Salary",
                    "field": "HourlySalary",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "35px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": [
                                "H",
                                "S"
                            ]
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Promo Level",
                    "field": "PromoLevel",
                    "cellCls": "js-readonly",
                    "hidden": true,
                    "excelFormat": "string",
                    "excelHeaderGroup": null,
                    "width": "80px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Firmwide Subcommittee",
                    "field": "Subcommittee",
                    "cellCls": "js-readonly",
                    "width": "90px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Employee Details",
                    "hidden": true,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                }
            ]
        },
        {
            "text": "Recommenders",
            "hidden": false,
            "draggable": false,
            "groupable": false,
            "filterable": false,
            "children": [
                {
                    "text": "Initial Recommender",
                    "field": "InitialRecommenderName",
                    "cellCls": "js-readonly",
                    "width": "150px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Recommender",
                    "hidden": true,
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Office Salary Coordinator Recommender",
                    "field": "OSCRecommenderName",
                    "cellCls": "js-readonly",
                    "width": "150px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Recommender",
                    "hidden": true,
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Subcommittee Recommender",
                    "field": "SubRecommenderName",
                    "cellCls": "js-readonly",
                    "width": "150px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Recommender",
                    "hidden": false,
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": [
                                "Flanagan, Tammy (B-X)"
                            ]
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Late Change Recommender",
                    "field": "RRLateChangeRecommenderName",
                    "cellCls": "js-readonly",
                    "width": "150px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Recommender",
                    "hidden": false,
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Final Late Change Recommender",
                    "field": "RecommenderName",
                    "cellCls": "js-readonly",
                    "width": "150px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Recommender",
                    "hidden": true,
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                }
            ]
        },
        {
            "text": "GLC",
            "draggable": false,
            "groupable": false,
            "filterable": false,
            "children": [
                {
                    "text": "Date Last Change",
                    "field": "GLCEffectiveDate",
                    "cellCls": "js-readonly",
                    "width": "70px",
                    "excelFormat": "date",
                    "excelHeaderGroup": "GLC",
                    "hidden": false,
                    "editor": false,
                    "align": "right",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Previous GLC",
                    "field": "PreviousGLC",
                    "cellCls": "js-readonly",
                    "excelFormat": "string",
                    "excelHeaderGroup": "GLC",
                    "hidden": true,
                    "width": "50px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Current GLC",
                    "field": "CurrentGLC",
                    "cellCls": "js-readonly",
                    "excelFormat": "string",
                    "excelHeaderGroup": "GLC",
                    "hidden": false,
                    "width": "50px",
                    "filterable": {
                        "isMulti": true,
                        "filterField": {
                            "type": "combo",
                            "multiSelect": true,
                            "items": []
                        }
                    },
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Recommendations",
                    "children": [
                        {
                            "text": "Initial GLC Rec",
                            "field": "InitialGLC",
                            "cellCls": "js-readonly",
                            "width": "75px",
                            "excelFormat": "string",
                            "excelHeaderGroup": "GLC",
                            "hidden": true,
                            "editor": false,
                            "filterable": {
                                "isMulti": true,
                                "filterField": {
                                    "type": "combo",
                                    "multiSelect": true,
                                    "items": []
                                }
                            },
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Office Salary Coordinator GLC Rec",
                            "field": "OSCGLC",
                            "cellCls": "js-readonly",
                            "width": "75px",
                            "excelFormat": "string",
                            "excelHeaderGroup": "GLC",
                            "hidden": true,
                            "editor": false,
                            "filterable": {
                                "isMulti": true,
                                "filterField": {
                                    "type": "combo",
                                    "multiSelect": true,
                                    "items": []
                                }
                            },
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Region Rec GLC Rec",
                            "field": "RegReviewGLC",
                            "cellCls": "js-readonly",
                            "width": "75px",
                            "excelFormat": "string",
                            "excelHeaderGroup": "GLC",
                            "hidden": true,
                            "editor": false,
                            "filterable": {
                                "isMulti": true,
                                "filterField": {
                                    "type": "combo",
                                    "multiSelect": true,
                                    "items": []
                                }
                            },
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Subcommittee GLC Rec",
                            "field": "SubGLC",
                            "cellCls": "js-readonly",
                            "width": "75px",
                            "excelFormat": "string",
                            "excelHeaderGroup": "GLC",
                            "hidden": false,
                            "editor": false,
                            "filterable": {
                                "isMulti": true,
                                "filterField": {
                                    "type": "combo",
                                    "multiSelect": true,
                                    "items": []
                                }
                            },
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Late Change GLC Rec",
                            "field": "RRLateChangeGLC",
                            "cellCls": "js-readonly",
                            "width": "75px",
                            "excelFormat": "string",
                            "excelHeaderGroup": "GLC",
                            "hidden": false,
                            "editor": false,
                            "filterable": {
                                "isMulti": true,
                                "filterField": {
                                    "type": "combo",
                                    "multiSelect": true,
                                    "items": []
                                }
                            },
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Final Late Change GLC Rec",
                            "cellCls": "js-readonly",
                            "field": "GLC",
                            "editor": {
                                "type": "combo",
                                "store": [
                                    {
                                        "id": 1,
                                        "GLC": "None",
                                        "Ladder": "",
                                        "GLCOrder": "0"
                                    },
                                    {
                                        "id": 2,
                                        "GLC": "B",
                                        "Ladder": "B",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 3,
                                        "GLC": "B1",
                                        "Ladder": "B",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 4,
                                        "GLC": "B2",
                                        "Ladder": "B",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 5,
                                        "GLC": "B3",
                                        "Ladder": "B",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 6,
                                        "GLC": "B4",
                                        "Ladder": "B",
                                        "GLCOrder": "5"
                                    },
                                    {
                                        "id": 7,
                                        "GLC": "B5",
                                        "Ladder": "B",
                                        "GLCOrder": "6"
                                    },
                                    {
                                        "id": 8,
                                        "GLC": "B6",
                                        "Ladder": "B",
                                        "GLCOrder": "7"
                                    },
                                    {
                                        "id": 9,
                                        "GLC": "B7",
                                        "Ladder": "B",
                                        "GLCOrder": "8"
                                    },
                                    {
                                        "id": 10,
                                        "GLC": "B8",
                                        "Ladder": "B",
                                        "GLCOrder": "9"
                                    },
                                    {
                                        "id": 11,
                                        "GLC": "CO3",
                                        "Ladder": "D",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 12,
                                        "GLC": "CO4",
                                        "Ladder": "D",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 13,
                                        "GLC": "CO5",
                                        "Ladder": "D",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 14,
                                        "GLC": "CO6",
                                        "Ladder": "D",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 15,
                                        "GLC": "D7",
                                        "Ladder": "D",
                                        "GLCOrder": "5"
                                    },
                                    {
                                        "id": 16,
                                        "GLC": "D8",
                                        "Ladder": "D",
                                        "GLCOrder": "6"
                                    },
                                    {
                                        "id": 17,
                                        "GLC": "E1",
                                        "Ladder": "E",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 18,
                                        "GLC": "E2",
                                        "Ladder": "E",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 19,
                                        "GLC": "E3",
                                        "Ladder": "E",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 20,
                                        "GLC": "E4",
                                        "Ladder": "E",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 21,
                                        "GLC": "N1",
                                        "Ladder": "N",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 22,
                                        "GLC": "N2",
                                        "Ladder": "N",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 23,
                                        "GLC": "N3",
                                        "Ladder": "N",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 24,
                                        "GLC": "N4",
                                        "Ladder": "N",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 25,
                                        "GLC": "N5",
                                        "Ladder": "N",
                                        "GLCOrder": "5"
                                    },
                                    {
                                        "id": 26,
                                        "GLC": "N6",
                                        "Ladder": "N",
                                        "GLCOrder": "6"
                                    },
                                    {
                                        "id": 27,
                                        "GLC": "P",
                                        "Ladder": "P",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 28,
                                        "GLC": "P1",
                                        "Ladder": "P",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 29,
                                        "GLC": "P2",
                                        "Ladder": "P",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 30,
                                        "GLC": "P3",
                                        "Ladder": "P",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 31,
                                        "GLC": "P4",
                                        "Ladder": "P",
                                        "GLCOrder": "5"
                                    },
                                    {
                                        "id": 32,
                                        "GLC": "P5",
                                        "Ladder": "P",
                                        "GLCOrder": "6"
                                    },
                                    {
                                        "id": 33,
                                        "GLC": "P6",
                                        "Ladder": "P",
                                        "GLCOrder": "7"
                                    },
                                    {
                                        "id": 34,
                                        "GLC": "P7",
                                        "Ladder": "P",
                                        "GLCOrder": "8"
                                    },
                                    {
                                        "id": 35,
                                        "GLC": "P8",
                                        "Ladder": "P",
                                        "GLCOrder": "9"
                                    },
                                    {
                                        "id": 36,
                                        "GLC": "T1",
                                        "Ladder": "T",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 37,
                                        "GLC": "T2",
                                        "Ladder": "T",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 38,
                                        "GLC": "T3",
                                        "Ladder": "T",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 39,
                                        "GLC": "T4",
                                        "Ladder": "T",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 40,
                                        "GLC": "T5",
                                        "Ladder": "T",
                                        "GLCOrder": "5"
                                    },
                                    {
                                        "id": 41,
                                        "GLC": "T6",
                                        "Ladder": "T",
                                        "GLCOrder": "6"
                                    },
                                    {
                                        "id": 42,
                                        "GLC": "T7",
                                        "Ladder": "T",
                                        "GLCOrder": "7"
                                    },
                                    {
                                        "id": 43,
                                        "GLC": "TS1",
                                        "Ladder": "TS",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 44,
                                        "GLC": "TS2",
                                        "Ladder": "TS",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 45,
                                        "GLC": "TS3",
                                        "Ladder": "TS",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 46,
                                        "GLC": "TS4",
                                        "Ladder": "TS",
                                        "GLCOrder": "4"
                                    },
                                    {
                                        "id": 47,
                                        "GLC": "TS5",
                                        "Ladder": "TS",
                                        "GLCOrder": "5"
                                    },
                                    {
                                        "id": 48,
                                        "GLC": "X5",
                                        "Ladder": "X",
                                        "GLCOrder": "1"
                                    },
                                    {
                                        "id": 49,
                                        "GLC": "X6",
                                        "Ladder": "X",
                                        "GLCOrder": "2"
                                    },
                                    {
                                        "id": 50,
                                        "GLC": "X7",
                                        "Ladder": "X",
                                        "GLCOrder": "3"
                                    },
                                    {
                                        "id": 51,
                                        "GLC": "X8",
                                        "Ladder": "X",
                                        "GLCOrder": "4"
                                    }
                                ],
                                "valueField": "GLC",
                                "displayField": "GLC",
                                "clearable": true
                            },
                            "width": "75px",
                            "excelFormat": "string",
                            "excelHeaderGroup": "GLC",
                            "hidden": false,
                            "filterable": {
                                "isMulti": true,
                                "filterField": {
                                    "type": "combo",
                                    "multiSelect": true,
                                    "items": []
                                }
                            },
                            "draggable": false,
                            "groupable": false
                        }
                    ],
                    "draggable": false,
                    "groupable": false,
                    "filterable": false,
                    "maxWidth": "auto"
                }
            ]
        },
        {
            "text": "Salary Information",
            "draggable": false,
            "groupable": false,
            "filterable": false,
            "children": [
                {
                    "text": "Current FTE Salary",
                    "field": "CurrentSalary",
                    "cellCls": "js-readonly",
                    "excelFormat": "number",
                    "excelHeaderGroup": "Salary",
                    "hidden": false,
                    "width": "70px",
                    "editor": false,
                    "align": "right",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Core Salary",
                    "draggable": false,
                    "groupable": false,
                    "filterable": false,
                    "children": [
                        {
                            "text": "Promotion Benefit",
                            "field": "PromoBenefit",
                            "cellCls": "js-readonly",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "width": "70px",
                            "editor": false,
                            "align": "right",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Current Core FTE",
                            "field": "CurrentCoreSalary",
                            "cellCls": "js-readonly",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "width": "70px",
                            "editor": false,
                            "align": "right",
                            "draggable": false,
                            "groupable": false
                        }
                    ]
                },
                {
                    "text": "New Grad",
                    "field": "IsNewGrad",
                    "width": "50px",
                    "excelFormat": "boolean",
                    "excelHeaderGroup": "Salary",
                    "hidden": true,
                    "attributes": {
                        "class": "text-center js-readonly"
                    },
                    "editor": false,
                    "align": "center",
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Recommendations",
                    "draggable": false,
                    "groupable": false,
                    "filterable": false,
                    "children": [
                        {
                            "text": "FST Suggested Salary",
                            "field": "NewGradRec",
                            "cellCls": "js-readonly",
                            "width": "70px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "editor": false,
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Office Salary Coordinator Salary Rec",
                            "field": "OSCSalary",
                            "cellCls": "text-right js-readonly",
                            "width": "80px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": true,
                            "editor": false,
                            "align": "right",
                            "type": "number",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Region Rec Salary Rec",
                            "field": "RegReviewSalary",
                            "cellCls": "text-right js-readonly",
                            "width": "80px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": true,
                            "editor": false,
                            "align": "right",
                            "type": "number",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Subcommittee Salary Rec",
                            "field": "SubSalary",
                            "cellCls": "text-right js-readonly",
                            "width": "80px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "editor": false,
                            "align": "right",
                            "type": "number",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Late Change Salary Rec",
                            "field": "RRLateChangeSalary",
                            "cellCls": "text-right js-readonly",
                            "width": "80px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "editor": false,
                            "align": "right",
                            "type": "number",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Final Late Change Salary Rec",
                            "cellCls": "js-readonly",
                            "field": "Salary",
                            "editor": {
                                "type": "numberfield",
                                "format": "9,999",
                                "step": 0
                            },
                            "width": "80px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "align": "right",
                            "type": "number",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Cur $ Incr",
                            "field": "CurrentIncreaseDollars",
                            "cellCls": "js-readonly",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "width": "70px",
                            "editor": false,
                            "align": "right",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Cur Incr %",
                            "field": "CurrentIncreasePercent",
                            "cellCls": "js-readonly",
                            "excelFormat": "percent",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "width": "70px",
                            "editor": false,
                            "align": "right",
                            "draggable": false,
                            "groupable": false
                        },
                        {
                            "text": "Proposed FTE Salary with Benefit",
                            "field": "ProposedSalary",
                            "cellCls": "js-readonly",
                            "width": "80px",
                            "excelFormat": "number",
                            "excelHeaderGroup": "Salary",
                            "hidden": false,
                            "editor": false,
                            "align": "right",
                            "draggable": false,
                            "groupable": false
                        }
                    ]
                }
            ]
        },
        {
            "text": "Comments",
            "draggable": false,
            "groupable": false,
            "filterable": false,
            "children": [
                {
                    "text": "Initial Comments",
                    "field": "InitialComments",
                    "cellCls": "js-readonly",
                    "width": "200px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "hidden": true,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Office Salary Coordinator Comments",
                    "field": "OSCComments",
                    "cellCls": "js-readonly",
                    "width": "200px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "hidden": true,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Region Rec Comments",
                    "field": "RegReviewComments",
                    "cellCls": "js-readonly",
                    "width": "200px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "hidden": true,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Subcommittee Comments",
                    "field": "SubComments",
                    "cellCls": "js-readonly",
                    "width": "200px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "hidden": false,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Late Change Comments",
                    "field": "RRLateChangeComments",
                    "cellCls": "js-readonly",
                    "width": "200px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "hidden": false,
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Final Late Change Comments",
                    "cellCls": "js-readonly",
                    "field": "Comments",
                    "width": "200px",
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "hidden": false,
                    "draggable": false,
                    "groupable": false
                },
                {
                    "text": "Notes",
                    "field": "Notes",
                    "cellCls": "js-readonly",
                    "hidden": false,
                    "excelFormat": "string",
                    "excelHeaderGroup": "Comments",
                    "width": "150px",
                    "editor": false,
                    "draggable": false,
                    "groupable": false
                }
            ]
        }
    ],
chuckn0rris commented 1 year ago

I requested more info about first issue, not reproducible with the code provided

ExtAnimal commented 1 year ago

Our CSS needs this to fix the vertical alignment of column headers:

.b-grid-header-children {
    flex: 1 1 auto;
}

But the screenshots look like there is outside CSS affecting the headers. The font doesn't look right. Text is wrapping in the header elements which is disabled by our own CSS. Client needs to check their CSS.