asked on August 21, 2020
i am using grid type flat for one of my projects. i need to make some customization to make it fit in my application theme. Like if my data has only say 4 columns then i want flexminster to render only 4 columns and not the other empty columns. Like in the attached png file i have data in columns 1 to 7 and i want to show only these columns and not the empty columns (8 and beyond).
Apart from this i also want to customise font (size and family) and other such customizations
⋅ August 25, 2020
Hello,
Thank you for writing to us.
Concerning rendering only filled columns, we suggest using the following approach.
Track the number of columns rendered on the grid and adjust the width of the Flexmonster's container accordingly.
Please see an example we have prepared for you. We want to provide some additional explanation about the following code snippet taken from the example:
let container = document.querySelector("#pivotContainer");
function adjustWidth() {
let columnCount = flexmonster.gridColumnCount();
let containerWidth = 50; //including header column and the scrollbar
for (let i = 0; i < columnCount; i++)
containerWidth += flexmonster.getCell(0, i).width;
container.style.width = containerWidth + "px";
flexmonster.refresh();
}
flexmonster.on("reportcomplete", adjustWidth);
flexmonster.on("reportchange", adjustWidth);
First, the DOM element representing the container for Flexmonster is assigned to the container variable.
Next, the function responsible for adjusting the container's width is created. It uses the gridColumnCount API call in order to retrieve the number of columns on the grid and the getCell method to get the width of each column. Next, the width property of the container is set to the sum of widths of all columns.
Finally, subscription on the reportcomplete and reportchange events is performed. It means the adjustWidth function will be executed each time one of the mentioned events is triggered.
Talking about the font, we recommend overwriting CSS of appropriate elements in order to change such parameters.
Please provide us with details about other required customizations so that we could find the best option for you.
Please let us know if the provided approaches work well for your case.
Our team is looking forward to hearing from you.
Kind regards,
Illia