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

Header & Footer in grid Layout between ICONS tab & CONTENT

Answered
Ravi Kumar asked on July 11, 2020

Hi,
I’m need to add Header & Footer in the grid view itself not while importing, is it possible?
I tried to add Header & Footer but styling is not rendering while exporting to Excel & CSV types, any other solution?

8 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 20, 2020

Hello,
 
Thank you for writing to us.
 
Our team would like to kindly explain that HTML format can be used only for PDF, HTML, and Image exports.
In case export to CSV/Excel is performed, HTML tags will be treated as a plain text for CSV or ignored for Excel.
Please refer to our documentation to get detailed information about correct ways to specify headers and footers for CSV and Excel export.
 
We hope it works for you.
 
Kind regards,
Illia

Public
Ravi Kumar July 20, 2020

Hi,
Thanks for your reply.
I can understand now why the styling is not getting rendered while exporting to CSV & Excel, but i need a solution to add header and footer in the grid itself as mentioned in the figure ‘needed-header-footer’ in the above post.
Is there any solution to add header and footer directly in the grid?
Regards,
Ravi Kumar

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 27, 2020

Hello,
 
Thank you for your feedback.
 
The header can be added using the title property of the grid object (or chart object if the title needs to be added for charts). Both mentioned objects are properties of the options object.
Please note that such a header is represented as a simple single-line text.
 
Concerning the footer, Flexmonster does not provide such a possibility.
Even so, an additional HTML element containing the desired content can be placed right after Flexmonster’s container in order to achieve the desired result.
 
We hope it works for your case.
 
Regards,
Illia

Public
Ravi Kumar September 28, 2020

Hi Illia,
 
I have tried “title” in grid options, it is ok for Simple Text but i need to add some styling to that.
Is that possible?
 
And one more Question, Is there any possibility to restrict the header for only first page which we’re passing in export parameters?
 
 
Regards,
Ravi

Public
Ravi Kumar September 28, 2020

Hi Illia,
 
Forgot to mention, I need to have title in 2 separate lines. Please provide any solution if possible & exist.
 
Regards,
Ravi

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster September 30, 2020

Hello, Ravi,
 
Thank you for writing to us.
 
Concerning the grid title.
We want to explain that the grid.title property is designed to complement the grid with a simple single-line title. If additional styling and the possibility to define several lines are needed, we recommend adding a custom HTML element just above the Flexmonster’s container.
Please note that in this case, the title will be placed above the Toolbar.
 
As for header exporting, we want to explain that the header will be placed on every page for PDF export and for printing. This behavior can not be changed in the current version of Flexmonster.
As a workaround, we suggest exporting to the HTML format. It allows adding the header once above the grid.
 
We hope it helps.
Please contact us in case other questions arise.
 
Kind regards,
Illia

Public
Ravi Kumar September 30, 2020

Hi Illia,
 
Thank you for the reply.
In our organization PDF is the standard export way, cannot move to HTML so when can we expect the next version with this feature/behavior.
 
Regards,
Ravi Kumar 

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster October 1, 2020

Hello,
 
Thank you for your feedback.
 
Our team would like to explain that our roadmap is full at the moment. Therefore, we do not have plans to introduce this feature in the nearest future.
 
Instead, we suggest using another workaround. It implies a manual modification of the generated PDF file. It means it is possible to perform export without a header specified and complement it afterward.
Use the exportTo API call with the destinationType parameter set to plain. In this case, the component’s content will be returned with callbackHandler as jsPDF object.
jsPDF is a JavaScript library used by Flexmonster. It provides a rich API allowing to construct and modify PDF files. Use its capabilities to complement the first page of the generated PDF document with the desired header.
 
Please see an example that demonstrates modifying the generated PDF.
 
Our team hopes it works for you.
Please contact us in case other questions arise.
 
Regards,
Illia

Please login or Register to Submit Answer