How to remove rows and columns

Hello,
 
Thank you for reaching out to us.
 
The recommended approach to show only the filled part of the grid is the following:

• Wrap the component's container with another HTML element. Its size will be used depending on the current component's configuration.
• Specify both width and height parameters with the following value: 100%. It allows resizing the component according to the wrapper's size.
• Define the maximum width and height of the wrapper. It is required to avoid falling out from a parent element.
• Define the minimum width and height of the wrapper. It is required to avoid rendering problems. According to our system requirements, the minimal recommended size for the component is 400×300px.

 
We have prepared a sample that demonstrates the described approach.
 
Our team would like to provide some additional explanation about the following code snippets used in the sample:
The code block below shows the proper way to wrap the component's container:

<div id="wrapper">
  <div id="pivotContainer"></div>
</div>

 
The following constants define the mentioned size limitations:

const MIN_RECOMMENDED_WIDTH = 400;
const MIN_RECOMMENDED_HEIGHT = 300;
const MAX_CUSTOM_WIDTH = 800;
const MAX_CUSTOM_HEIGHT = 800;

 
Next, there is a subscription to the reportcomplete event. This event is called after the component is completely initialized on the page. Please note that you should unsubscribe to avoid further calling of the function after the event is dispatched:

flexmonster.on("reportcomplete", () => {
  flexmonster.off("reportcomplete");
  ...
});

 
The following constants hold elements that affect the size of the component. They will be used to calculate the required size of the wrapper correctly:

const toolbar = document.getElementById("fm-toolbar");
const reportFiltersArea = document.querySelector("#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-grid-view > div > div.fm-ui-element.fm-ui-hgroup.fm-filters.fm-page-filter");
const columnHeaders = document.querySelector("#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-grid-view > div > div.fm-ui-element.fm-resize-handles.fm-cols-resize > div.fm-ui-element.fm-wrapper");
const rowHeaders = document.querySelector("#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-grid-view > div > div.fm-ui-element.fm-resize-handles.fm-rows-resize");
const brandingBar = document.querySelector("#fm-pivot-view > div.fm-ui-element.fm-ui.fm-ui-container.fm-branding-bar.fm-layout-660.fm-layout-520");

 
Finally, there is a subscription on the aftergriddraw event, which is dispatched every time the component is redrawn. In the handler, all calculations are performed, and the size of the wrapper is updated:

flexmonster.on("aftergriddraw", () => {
  let resWidth = 0;
  let resHeight = 0;
  let col = flexmonster.gridColumnCount(); //get number of used columns
  let row = flexmonster.gridRowCount(); //get number of used rows
  for (let i = 0; i <= col; i++) {
    resWidth += flexmonster.getCell(0, i).width; //calculate the width of all columns
  }
  for (let i = 0; i <= row + 1; i++) {
    resHeight += flexmonster.getCell(i, 0).height; //calculate the height of all rows
  }
  resWidth += rowHeaders.getBoundingClientRect().width; //add header's width to the resulting variable
  resHeight += toolbar ? 80 : 0; //add the Toolbar's height (if present) to the resulting variable
  resHeight += brandingBar ? 21 : 0; //add the branding bar's height (if present) to the resulting variable
  resHeight += reportFiltersArea.getBoundingClientRect().height; //add the report fitler area height to the resulting variable
  resHeight += columnHeaders.getBoundingClientRect().height; //add header's height to the resulting variable
  //the following set of conditions limits the size to the previously defined constants
  if (resWidth < MIN_RECOMMENDED_WIDTH) {
    resWidth = MIN_RECOMMENDED_WIDTH;
  }
  if (resHeight < MIN_RECOMMENDED_HEIGHT) {
    resHeight = MIN_RECOMMENDED_HEIGHT;
  }
  if (resWidth > MAX_CUSTOM_WIDTH) {
    resWidth = MAX_CUSTOM_WIDTH;
  }
  if (resHeight > MAX_CUSTOM_HEIGHT) {
    resHeight = MAX_CUSTOM_HEIGHT;
  }
  wrapper.style.width = `${resWidth}px`; //assign the calculated width to the wrapper
  wrapper.style.height = `${resHeight}px`; //assign the calculated height to the wrapper
  window.dispatchEvent(new Event("resize")); //dispatch the "resize" event to redraw the Toolbar
});

 
Please let us know whether it works for you. Do not hesitate to contact us in case other questions arise.
 
Kind regards,
Illia

Hello,
 
Thank you for your feedback.
 
We would like to explain that the fitGridlines option is not available in the current version of Flexmonster.
Even so, it is possible to override the CSS styling of empty cells to hide them:

.fm-empty {
  border-right: none !important;
  border-bottom: none !important;
}

 
We have complemented the earlier provided example to demonstrate the described approach.
 
Please let us know if it works for you.
Feel free to contact us in case further assistance is needed.
 
Best regards,
Illia