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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

custom header Print in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144746 May 21,2019 05:08 AM UTC May 27,2019 04:40 PM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
tirathpal
Asked On May 21, 2019 05:08 AM UTC

hi there,
             How can I print the custom Header in Print page of the Grid and also the export to excel,word and pdf without connecting again to the database for the same.It will Generate as per grid visible.

Hariharan J V [Syncfusion]
Replied On May 23, 2019 12:41 PM UTC

Hi Tirathpal, 
  
Thanks for contacting Syncfusion support. 
  
Query #1:  How can I print the custom Header in Print page of the Grid 
  
Before we proceeding this please provide the details about how should you customized the Grid header (i.e by using headerTemplate or by using any custom css)?. 
  
Query #2: also the export to excel, word and pdf without connecting again to the database for the same. It will Generate as per grid visible. 
  
First, we would like to inform that currently our EJ2-Grid does not have the support for word export. We have already logged a feature task for this requirement and this feature will be available in any of our upcoming volume releases. 
  
To achieve this requirement in Excel export, we suggest to change the Grid default data source to currentViewData by using beforeExcelExport event of the Grid. Please refer the following code snippet, 
  
    function beforeExcelExport(args) { 
        args.gridObject.dataSource = args.gridObject.currentViewData; 
    } 
  
But in Pdf export we found the Grid will send the one post to server even we export the currentViewDatas. Currently we have considered “Prevent server post in pdfExport while exporting the currentViewDatas in Grid” as a feature improvement and logged a feature improvement task for this requirement. We will include this feature in any of our upcoming release. 
  
After the fix you can use the below way to achieve this requirement in Pdf Export, 
  
function beforePdfExport(args) { 
        args.gridObject.dataSource = args.gridObject.currentViewData; 
    } 
  
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link: 
  
  
Regards, 
Hariharan 


tirathpal
Replied On May 24, 2019 04:55 AM UTC

hi there,
            thanks for reply.
            you can suggest me what is the best way headertemplate or custom css. for my second query reply can you give working example for study. 
thanks in advance

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 27, 2019 04:40 PM UTC

Hi Tirathpal, 

Query #1: you can suggest me what is the best way headertemplate or custom css. 

We suggest to use custom CSS way to customize the Grid header cells. If you need this customization in printed file then you need to apply the same CSS to  print element before it getting print. Please refer the following code snippet for more details, 

@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).AllowPdfExport().AllowExcelExport().AllowPaging(true).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("Order ID").Width("100").Add(); 
    col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add(); 
    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); 
}).Load("load").ToolbarClick("ToolbarClick").BeforeExcelExport("beforeExcelExport").Toolbar(new List<string>() { "ExcelExport", "Print" }).Render() 
 
<script type="text/javascript"> 
    function load() { 
        this.on("printGrid-Init", function (e) { 
            e.printgrid.created = function (args) { 
                var ele = document.createElement("style"); 
                ele.type = "text/css"; 
                ele.innerHTML = ".e-headertext {color: red;font-style: italic !important;}" 
                this.element.parentElement.parentElement.querySelector('head').appendChild(ele); 
            } 
        }) 
    } 
    function ToolbarClick(args) { 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        if (args.item.id === 'Grid_excelexport') { 
            grid.excelExport(); 
        } 
    } 
</script> 
 
<style> 
    .e-headertext { 
        color: red; 
       font-style: italic !important;  
    } 
</style> 

Query #2:  for my second query reply can you give working example for study 

We have prepared the sample based on this both two queries and you can find that sample from the below link, 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon