I am using Handsontable in my SAPUI5 application. I am unable to give a scroll to the Handsontable Grid, where the Column Headers remained fixed. Due to which when the user clicks on the column header for the sorting the column, the entire column gets selected and the scroll runs to the last row in the table. Also the sorting does not get restricted to the second column alone in-spite of specifying it in the settings.
Following is my code followed by the screenshot. Please help me fix the issue.
View:
<HTML xmlns="sap.ui.core" busy="false" busyIndicatorDelay="1000" visible="true"
content="<div id='batchesSheet' class='hot handsontable' style='width: 90%; overflow: hidden'></div>"
preferDOM="true" sanitizeContent="false" afterRendering="BatchesHOT">
</HTML>
Controller:
hotBatches = new Handsontable(container, {
data: batchesData,
rowHeaders: true,
columns: [{data: "User", readOnly: true}, {data: "Timestamp", readOnly: true}, {data: "Status", readOnly: true}, {
data: "Remarks",
readOnly: true
}],
colHeaders: ["USER", "BATCH SUBMISSION TIME", "STATUS", "REMARKS"],
colWidths: [100, 220, 180, 350],
columnSorting: {
column: 2,
sortOrder: true
},
sortIndicator: true,
contextMenu: true,
search: true,
outsideClickDeselects: false,
cells: function (row, col, prop) {
var cellProperties = {};
if (col === 2) {
cellProperties.renderer = "statusRenderer";
}
else {
cellProperties.renderer = "textRenderer";
}
return cellProperties;
}
});
Alright so to fix those two issues you would do the following:
To have your headers stay frozen, you add the following to your initialization of the table:
To get the scrolling working better, add
overflow:autoinstead ofoverflow:hiddenlike you have it right now on your HTML object. The scrolling all the way to the bottom is a bug which I'm not sure what's causing it, but to make it scroll to the top, just put a call at the end of your update method which callsHope that helps!