custom header Print in grid

[tirathpal]

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]

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: 

  

https://www.syncfusion.com/feedback/6487 

  

Regards, 

Hariharan 

[tirathpal]

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]

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, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid-1502750283.zip 

Regards, 

Thavasianand S.