RadGrid Export to Excel With Header and Footer

[rahul]

Hi,
    I have dynamic grid to export in excel but  i want to show  Header and Footer data like Logo,Text on excel . I don't know how can do this please provide the example or demo.

Regards
Rahul

[Viktor Tachev]

Hi Rahul,

When you export RadGrid to Excel you can add header and footer to the exported data. Depending on the Format of the exported file the approach you use would be a bit different.

If you are using HTML export you should handle the HTMLExporting event. In the handler you can define the header and footer and add them to the output data. Check out the following article that illustrates the approach:

• Excel Format (HTML based)

In case you are using BIFF export the approach would be the following. You should handle the BiffExporting event. For the header you should add new rows above the exported data and define their contents. To set the footer you should add new rows below the exported table and set the text there. Take a look at the article below for additional information:

• Excel BIFF (Binary) Export

Regards,
Viktor Tachev
Telerik

 

 

[Robert]

The examples only seems to deal with basic page details. Where can we look to add a header graphics, like a "Branding" graphic to the top of a exported spreadsheet? 

[Viktor Tachev]

Hello Robert,

As I understand your requirement you would like to add an image on top of the exported file. Please correct me if I am wrong.

In order to implement this you can use the Export Infrastructure. You can handle the InfrastructureExporting event of RadGrid and add the image to the exported file. Check out the following articles for additional information.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/export-infrastructure#image-support

The event handler can look similar to the following:

protected void RadGrid1_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e)
{
    ExportStructure exportStructure = e.ExportStructure;

    Telerik.Web.UI.ExportInfrastructure.Table table = exportStructure.Tables[0]; // new Telerik.Web.UI.ExportInfrastructure.Table("Table1");
    table.InsertImage(new Range("A1", "B2"), "~/Images/ImageGallery/Image1.jpg");

    table.ShiftRowsDown(1, 5);

}

Regards,
Viktor Tachev
Telerik

[Robert]

Victor,

That is correct. I’m going to digest this information you sent me and see
if I can get the table implementation strategy into our spreadsheet format.

At first glance I'll need to work through the difference between our System.Data.DataTable and the Telerik.Web.UI.ExportInfrastructure.Table.

[Viktor Tachev]

Hi Robert,

Note that you do not need to create the entire table from ground up. You can use the ExportStructure that is available in the InfrastructureExporting event. Then you can access the generated Telerik.Web.UI.ExportInfrastructure.Table and modify it according to your requirements.

Regards,
Viktor Tachev
Telerik

[Robert]

Viktor,

Just got back to this.

 What do I need connect to the Grid.js in order to get the events to fire?

I'm unclear as to what I need to "hitch" the events, What javascript am I missing?

 

This is what I have so far:

resultsRadDock: null,
        constructor: function () {
            this.exportRadAjaxPanel = $$find("ExportRadAjaxPanel");
            this.exportGridInfrastructureExporting = $$find("ExportGrid_InfrastructureExporting");
            this.masterTableView = $$find("ResultsRadGrid").get_masterTableView();
            this.toolBar = $$find("ResultsRadToolBar");
            this.resultsRadDockZone = $$find('ResultsRadDockZone');
            this.resultsRadDock = $$find("ResultsRadDock");
            this.initializeEvents();
        },

        initializeEvents: function () {

            this.exportRadAjaxPanel.set_enableAJAX(false);
            //this.exportGridInfrastructureExporting = lang.hitch(this, "_exportGridInfrastructureExporting");   
            this.OnToolbarCommand = lang.hitch(this, "_OnToolbarCommandHandler");
            this.selectFromMapToGrid = lang.hitch(this, "_selectFromMapToGridHandler");
            this.selectItemToCompare = lang.hitch(this, "_selectItemToCompareHandler");
            this.compare = lang.hitch(this, "_compareHandler");
            this.toolBar.add_buttonClicked(this.OnToolbarCommand);
            this.toggleRadZoneResults(false);
        },

[Viktor Tachev]

Hello Robert,

I am not sure I completely understand your last query. Would you elaborate in more detail?

With that said, in order to use the OnInfrastructureExporting event you need to attach handler for it. You can do this in the markup. Also, the Format property should be set to Xlsx.

<telerik:RadGrid runat="server" ID="RadGrid1"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    AutoGenerateColumns="false"
    AllowPaging="true" PageSize="10"
    OnInfrastructureExporting="RadGrid1_InfrastructureExporting">

    <ExportSettings >
        <Excel Format="Xlsx" />
    </ExportSettings>
    . . .
</telerik:RadGrid>

Regards,
Viktor Tachev
Telerik

[Robert]

Viktor,

 

I'm sure I'm missing something or over complicating the solution.

 I added the "OnInfrastructureExporting" in my C# code. I think the problem is that I have javascript code that handles the 

creation of the exported report and I'm sure I don't have all of the event components defined correctly. 

 

I'm hung up on the InfrastructureExporting event in my javascript code. 

Our site is a custom solution, so I'm guessing there will be variations in the handling InfrastructureExporting event and what is called when the event fires. At this point I'm trying to understand how an event is fired, I'm trying to get my head around the how the different components (ASP, C# and Javascript) interact with each other.

 Do you have any example of a export snippet that has the C# and javascript interaction that I might learn how they fit together?

 Thank you for you patience.

[Viktor Tachev]

Hello Robert,

The built-in exporting feature is using server-side logic to generate the file. Then the result is sent to the client.

If the solution you have is using client-side logic to export the data note that this is not a built-in feature of RadGrid. With such custom solutions we cannot guarantee how the controls would behave as we do not have control over the code.

Regards,
Viktor Tachev
Telerik

[Robert]

I think my problem is the wiring for the event to the main website page.

I followed the guidance in the documentation to add event handler which is this:

protected void ExportGrid_InfrastructureExporting(object sender, GridInfrastructureExportingEventArgs e)
        {
            ExportStructure exportStructure = e.ExportStructure;

            Telerik.Web.UI.ExportInfrastructure.Table table = exportStructure.Tables[0];
            table.InsertImage(new Range("A1", "C10"), "~/Images/SelectKentuckyLogo.png");
            table.ShiftRowsDown(1, 5);
            exportStructure.Tables.Add(table);
        }

But I'm not sure what I need to do to wire the event handler to the website's main page . This is what I was referring to with the "js code" for the Grid.js where I'm thinking that I need to add a javascript function in order for the website to recognize the InfrastructureExporting code. There has to be a connection to the grid, no?

 

I'm sorry that I'm doing a terrible job explaining my situation.

[Viktor Tachev]

Hi Robert,

You should not use client-side logic to attach handler to a server-side event.

In order to handle the InfrastructureExporting event you can add handler in the markup or in the code-behind on the server. Try to attach the handler in the markup like illustrated below and it should work as expected.

<telerik:RadGrid runat="server" ID="RadGrid1"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    AutoGenerateColumns="false"
    AllowPaging="true" PageSize="10"
    OnInfrastructureExporting="RadGrid1_InfrastructureExporting">

    <ExportSettings >
        <Excel Format="Xlsx" />
    </ExportSettings>
    . . .
</telerik:RadGrid>

Moreover, please note that there is no Grid.js file included with the controls. If you have such file in the project it most likely includes custom code that is not included in the grid features out of the box. Also, have in mind that any custom functionalities that are applied fall outside the scope of our standard support services.


Regards,
Viktor Tachev
Telerik

[Robert]

I believe it's the AjaxManager component where the events are connected to the javascript. Read up on the AjaxManager and see if I can figure it out.

[Robert]

Or it's the Ajaxpanel... one of these middle tier controls

[Viktor Tachev]

Hello Robert,

Note when data is exported AJAX should be temporarily disabled in order for the export to work as expected. You can do this by handling the OnRequestStart event as illustrated in the following article.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/ajaxified-radgrid/what-you-should-have-in-mind/export-from-ajaxified-grid

On a side note, in order to check if AJAX is preventing the export from working you can set the EnableAJAX property of RadAjaxManager to false and see if the behavior changes.

Regards,
Viktor Tachev
Telerik