Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

need to customise my grid view

Answered
amir 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
 

Attachments:
gri.PNG

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Please login or Register to Submit Answer