Add custom header and footer to page when printingsdfa

[Unknown]

Hello

I would like to add a custom header and footer to every page that is printed.

The header contains some custom text and may contain an image.

The footer contains some custom text and must contain the current page number and the total page number in the format “X/Y” at a custom location. The current date/time must also be added at a custom location.

Could you please provide me with an example on how to add this header/footer?

Please note, all of the changes mentioned above must only apply when printing, not at any other time.

 

Thank you for your help.

Kind Regards

Phil

[Thavasianand Sankaranarayanan]

Hi Phil, 

Thanks for contacting Syncfusion support. 

We suspect that you want to add header and footer when printing the Grid. So, we suggest to add the header content in the beforeprint event of ejGrid control. 

Refer the below code example. 

<div id="ControlRegion"> 

    @(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

                .ToolbarSettings(toolbar => 

        { 

 

            toolbar.ShowToolbar().ToolbarItems(items => 

            { 

 

                items.AddTool(ToolBarItems.PrintGrid); 

 

            }); 

 

        }) 

        .ClientSideEvents(cevent => cevent.BeforePrint("beforePrint")) 

        .Columns(col => 

        { 

             

           --- 

 

       })) 

</div> 

 

<label id="lblHeader" class="header" style="display:none;" >Syncfusion</label> 

<img src="../../Images/download.png" class="image" style="display:none;" />  

<style type="text/css"> 

<script type="text/javascript"> 

function beforePrint(args) { 

 

        $("#lblHeader").css('display', 'block'); 

        $(".image").css('display', 'block'); 

        args.element.prepend($(".header")); 

        args.element.prepend($(".image"));    

 } 

</script> 

We can add the current page and total page details in Grid footer when printing by applying css as like  below code example. 

<style type="text/css"> 

    #content { 

        display: table; 

    } 

 

    #pageFooter { 

        display: table-footer-group; 

    } 

 

    #pageFooter:after { 

        counter-increment: page; 

        content: counter(page); 

    } 

</style> 

By default the printed pages have date time, but in chrome it will show in the header of the page and in mozilla firefox date time show in footer of the page. So, this is the default behavior of the browser.  

Refer the below screen shot of printed Grid with your requirement. 

 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132656/ze/SyncfusionMvcApplication13_(2)644696187.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:beforePrint 

Regards, 

Thavasianand S. 

[Unknown]

Hello

Thank you a lot for your example. I was able to partially achieve my goal.

The header now appears on the first page and the footer appears on the last page. However I need the header and footer on every page. Earlier I forgot to mention that I need the grid's header columns on every page as well. Currently they are only displayed once, on the first page.

Is there an option to display the grid's header columns on every page? This might solve all of the above issues.

Thank you for your help.

Phil

[Renjith Singh Rajendran]

Hi Phil, 

We have analyzed your query. We find that the footer is already visible in every page. Please refer the screenshot below, 

 

To display the header of the Grid in every page, we have already discussed the topic in the knowledge base documentation. 

Please refer to the following knowledge base documentation. 

KB link: https://www.syncfusion.com/kb/7180/how-to-show-grid-header-in-all-pages-while-printing 

Regards, 

Renjith Singh Rajendran. 

[Unknown]

Hello

The footer you describe seems to be the default footer that gets attached on every print by the browser?

I created a custom footer that shows the current date and is bold. However this footer is only on the last page, no other page shows this footer.

Currently I don't use paging in this grid and I would like to keep it that way.

Is it possible to activate the paging only for printing? Or is there another way to print the column headers on every page?

I attached an image with the layout I need to create and a pdf file of the current layout. There you can see that the footer is only attached to the last page.

Thank your for your help.

Phil

Attachment: printing_8c02cbcc.zip

[Thavasianand Sankaranarayanan]

Hi Phil, 

We have analyzed your given screen shot and it is not feasible to customize your given requirement while printing the page. So, we suggest you to export the Grid into pdf and while exporting, we can able to add header and footer to the Grid content. Then we can able to print the pdf exported file. 

Refer the below code example. 

[GridFeatures.cshtml] 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

         

                .ToolbarSettings(toolbar => 

        { 

 

            toolbar.ShowToolbar().ToolbarItems(items => 

            { 

                items.AddTool(ToolBarItems.PdfExport); 

                 

 

            }); 

 

        }) 

         

        .Columns(col => 

        { 

 

            ----             

 

       })) 

---------------------------------------------------------------------- 

[GridController.cs] 

public void ExportToPdf(string GridModel) 

        { 

 

            var DataSource = new NorthwindDataContext().OrdersViews.ToList(); 

            GridProperties gridProperty = (GridProperties)Utils.DeserializeToModel(typeof(GridProperties), GridModel); 

            PdfExport exp = new PdfExport(); 

 

            PdfDocument document = exp.Export(gridProperty, (IEnumerable)DataSource, "Export.pdf", false, false, "flat-lime", true); 

 

            RectangleF rect = new RectangleF(0, 0, document.PageSettings.Width, 50); 

 

            //create a header pager template 

            PdfPageTemplateElement header = new PdfPageTemplateElement(rect); 

 

            //create a footer pager template 

            PdfPageTemplateElement footer = new PdfPageTemplateElement(rect); 

 

            Syncfusion.JavaScript.DataVisualization.Models.Font f = new Font("Helvetica", 10, System.Drawing.FontStyle.Bold); 

 

            PdfFont font = new PdfTrueTypeFont(f, true); 

 

            header.Graphics.DrawString("Demo Report", font, PdfBrushes.Black, new Point(250, 0)); //Add custom text to the Header 

 

            document.Template.Top = header; //Append custom template to the document            

 

            footer.Graphics.DrawString("CopyRights", font, PdfBrushes.Gray, new Point(250, 0));//Add Custom text to footer 

 

            document.Template.Bottom = footer;//Add the footer template to document 

 

            document.Save(Server.MapPath("/Output/Export.pdf")); 

 

            return RedirectToAction("Index"); 

 

        } 

Refer the help documentation. 

Link: https://help.syncfusion.com/aspnetmvc/grid/exporting 

Link: https://help.syncfusion.com/aspnetmvc/grid/how-to#adding-header-and-footer-in-exported-pdf-document 

Regards, 

Thavasianand S. 

[Unknown]

Hello

Thank you for your reply, it really helped me a lot.

I could almost finish the layout of the export.

Now I just need to add the current page in the format "{current page}/{total pages}" to the footer. I tried "document.Pages.Count" but it is always "0".

How can I get the current page and the number of total pages and add it to the footer?

Thank you for your help.

Phil

[Mani Sankar Durai]

Hi Phil, 

We have analyzed your query and found that you would like to set the current page and total pages of document while exporting into PDF. To export the PDF with current page and total pages in footer refer the code example 

  public void ExportToPdf(string GridModel) 

        { 

 

            var DataSource = new NorthwindDataContext().OrdersViews.ToList(); 

            GridProperties gridProperty = (GridProperties)Utils.DeserializeToModel(typeof(GridProperties), GridModel); 

            PdfExport exp = new PdfExport(); 

 

            PdfDocument document = exp.Export(gridProperty, (IEnumerable)DataSource, "Export.pdf", false, false, "flat-lime", true); 

 

            RectangleF rect = new RectangleF(0, 0, document.PageSettings.Width, 50); 

 

            //create a header pager template  

            PdfPageTemplateElement header = new PdfPageTemplateElement(rect); 

 

            //create a footer pager template  

            PdfPageTemplateElement footer = new PdfPageTemplateElement(rect); 

 

            Font f = new Font("Helvetica", 10, System.Drawing.FontStyle.Bold); 

 

            PdfFont font = new PdfTrueTypeFont(f, true); 

           

 

            header.Graphics.DrawString("Demo Report", font, PdfBrushes.Black, new Point(250, 0)); //Add custom text to the Header  

 

            PdfBrush brush = new PdfSolidBrush(Color.Black); 

            PdfPageNumberField pageNumber = new PdfPageNumberField(font, brush); 

 

            //Create page count field. 

 

            PdfPageCountField count = new PdfPageCountField(font, brush); 

            PdfCompositeField compositeField = new PdfCompositeField(font, brush, "Page {0} of {1}", pageNumber, count); 

 

            compositeField.Bounds = footer.Bounds; 

 

            //Draw the composite field in footer. 

 

            compositeField.Draw(footer.Graphics, new PointF(470, 40)); 

 

 

            document.Template.Top = header; //Append custom template to the document             

   

            //footer.Graphics.DrawString("CopyRights", font, PdfBrushes.Gray, new Point(250, 0));//Add Custom text to footer  

 

            document.Template.Bottom = footer;//Add the footer template to document  

 

            document.Save(Server.MapPath("/Output/Export.pdf")); 

 

        }  

 

Please let us know if you need further assistance.

Regards, 

Manisankar Durai. 

[Unknown]

Hello

Thank you a lot. I was able to add the current and total pages.

Kind regards

Phil

[Prasanna Kumar Viswanathan]

Hi Phil, 

We are happy to hear that the provided solution has been working fine at your end. 

Please let us know if you need any further assistance. 

Regards, 

Prasanna Kumar N.S.V 

[Laura Jordan]

Hi Phil, 

Thanks for contacting Syncfusion support. 

We suspect that you want to add header and footer when printing the Grid. So, we suggest to add the header content in the beforeprint event of ejGrid control. 

Refer the below code example. 

<div id="ControlRegion"> 

    @(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

                .ToolbarSettings(toolbar => 

        { 

 

            toolbar.ShowToolbar().ToolbarItems(items => 

            { 

 

                items.AddTool(ToolBarItems.PrintGrid); 

 

            }); 

 

        }) 

        .ClientSideEvents(cevent => cevent.BeforePrint("beforePrint")) 

        .Columns(col => 

        { 

             

           --- 

 

       })) 

</div> 

 

<label id="lblHeader" class="header" style="display:none;" >Syncfusion</label> 

<img src="../../Images/download.png" class="image" style="display:none;" />  

<style type="text/css"> 

<script type="text/javascript"> 

function beforePrint(args) { 

 

        $("#lblHeader").css('display', 'block'); 

        $(".image").css('display', 'block'); 

        args.element.prepend($(".header")); 

        args.element.prepend($(".image"));    

 } 

</script> 

We can add the current page and total page details in Grid footer when printing by applying css as like  below code example. 

<style type="text/css"> 

    #content { 

        display: table; 

    } 

 

    #pageFooter { 

        display: table-footer-group; 

    } 

 

    #pageFooter:after { 

        counter-increment: page; 

        content: counter(page); 

    } 

</style> 

By default the printed pages have date time, but in chrome it will show in the header of the page and in mozilla firefox date time show in footer of the page. So, this is the default behavior of the browser.  

Refer the below screen shot of printed Grid with your requirement. 

 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132656/ze/SyncfusionMvcApplication13_(2)644696187.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:beforePrint 

Regards, 

Thavasianand S. 

Hi,

I was trying to replicate the example to add custom header an footer in the print layout, but the function BeforePrint is missing...

.ClientSideEvents(cevent => cevent.BeforePrint("beforePrint"))

Can you please help me?

Thanks in advance!

[Thavasianand Sankaranarayanan]

Hi Laura, 

We have analyzed your query and we suspect that beforePrint event is not triggered while print the Grid. But we are unable to reproduce the reported issue from our end. 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132656/ze/SyncfusionMvcApplication13474015130.zip 

Refer the help documentation for beforePrint event. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:beforePrint 

Please provide the following details for better assistance. 

1. Share screen shot or video demonstration of the issue.
2. Share the exact scenario or proper replication procedure to reproduce the issue.
3. Essential Studio version details.
4. If possible share the sample or reproduce the issue in the attached sample.

Regards, 

Thavasianand S. 

[Laura Jordan]

Hi Laura, 

We have analyzed your query and we suspect that beforePrint event is not triggered while print the Grid. But we are unable to reproduce the reported issue from our end. 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132656/ze/SyncfusionMvcApplication13474015130.zip 

Refer the help documentation for beforePrint event. 

Link: https://help.syncfusion.com/api/js/ejgrid#events:beforePrint 

Please provide the following details for better assistance. 

1. Share screen shot or video demonstration of the issue.
2. Share the exact scenario or proper replication procedure to reproduce the issue.
3. Essential Studio version details.
4. If possible share the sample or reproduce the issue in the attached sample.

Regards, 

Thavasianand S. 

Hi,

I downloaded the sample and tried to execute it, but I am getting the following error:

Any idea of what is happening?

Thanks in advance.

[Thavasianand Sankaranarayanan]

Hi Laura, 

 

We have analyzed your query and the reported issue may get reproduced, due to the version mismatch.  

Check the Syncfusion.EJ and Syncfusion.EJ.MVC version in web.config file as same as you are referring the dll in the Reference. 

<assemblies> 

<addassembly="Syncfusion.EJ, Version=15.3400.0.33,Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/> 

<addassembly="Syncfusion.EJ.MVC, Version=15.3400.0.33,Culture=neutral, PublicKeyToken=3d67ed1f87d44c89"/> 

</assemblies> 

 

For more information about this query please refer the following Knowledge base documentation. 

Kb Link: https://www.syncfusion.com/kb/3778/how-to-resolve-the-dll-conflict-issue 

 

Regards, 

Thavasianand S.