Hi,
I have implemented a grid with multiple columns, some of which I intend to freeze using the frozenColumns property. Despite following the official documentation and trying various adjustments, the frozen column functionality does not behave as expected. Specifically, the column headers of the frozen columns do not align with the body of the grid when the user scrolls horizontally. This issue persists across all tested browsers.
The headers of the frozen columns become misaligned with the rest of the grid upon scrolling, leading to a disjointed and confusing user experience.
this is how o'm creating the columns of the grid (they will be based on user interaction)
`
let mainColumns: ColumnModel[] = [{
field: "index",
headerText: "#",
width: 65,
minWidth: 65,
maxWidth: 65,
textAlign: "Center",
isPrimaryKey: true,
}, {
field: "areas",
headerText: "Area",
textAlign: "Center",
width: 350,
template: '<div>${getAreas(data)}</div>',
}, {
field: "sectors",
headerText: "Sector",
textAlign: "Center",
width: 450,
template: '<div>${getSectors(data)}</div>',
}, {
field: "date",
headerText: "Date",
width: 100,
format: "MM/dd/yyyy",
type: "datetime",
textAlign: "Center",
}];
for (let locationType of locationTypes) {
mainColumns.push({
headerText: getLocationTypeName(locationType),
textAlign: "Center",
columns: [{
field: `inspected_${locationType}`,
headerText: `Inspected`,
width: 100,
textAlign: "Center",
}, {
field: `infested_${locationType}`,
headerText: `Infested`,
width: 100,
textAlign: "Center",
}, {
field: `infestationRate_${locationType}`,
headerText: "%", format: "p1", type: "number",
template: '<div>${getPercentage(data)}</div>',
width: 65,
textAlign: "Center",
}]
});
}
`
and this is the code for the grid creation
const grid = new Grid({
enableHover: false,
allowSelection: false,
gridLines: "Both",
columns: mainColumns,
height: `calc(85vh - ${tabItemHeight}px)`,
allowResizing: true,
frozenColumns: 4,
dataSource: gridRecords,
allowTextWrap: true,
}, divName);
this is the result
it should be like this
