We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Add custom header and footer to page when printing

Thread ID:

Created:

Updated:

Platform:

Replies:

132656 Sep 14,2017 05:21 AM Nov 14,2017 09:16 AM ASP.NET MVC 13
loading
Tags: Grid
Phil
Asked On September 14, 2017 05:21 AM

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 [Syncfusion]
Replied On September 15, 2017 04:55 AM

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. 


Refer the help documentation. 


Regards, 
Thavasianand S. 


Phil
Replied On September 17, 2017 12:08 PM

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 [Syncfusion]
Replied On September 18, 2017 08:12 AM

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. 


Regards, 
Renjith Singh Rajendran. 


Phil
Replied On September 20, 2017 06:01 AM

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 [Syncfusion]
Replied On September 21, 2017 12:05 PM

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. 



Regards, 
Thavasianand S. 


Phil
Replied On October 1, 2017 05:06 PM

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 [Syncfusion]
Replied On October 2, 2017 05:42 AM

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. 


Phil
Replied On October 6, 2017 09:17 AM

Hello


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


Kind regards

Phil


Prasanna Kumar Viswanathan [Syncfusion]
Replied On October 9, 2017 04:43 AM

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
Replied On November 9, 2017 10:10 AM

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. 


Refer the help documentation. 


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 [Syncfusion]
Replied On November 10, 2017 07:44 AM

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. 


Refer the help documentation for beforePrint event. 


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
Replied On November 13, 2017 10:35 AM

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. 


Refer the help documentation for beforePrint event. 


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 [Syncfusion]
Replied On November 14, 2017 09:16 AM

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. 

 
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;