how to define style to export GridImageColumn from RadGrid?

[chen]

As I said, how to define style to export GridImageColumn from RadGrid?

I have a GridImageColumn, and the real size of pic is 100px*100px, and I set both ImageHeight and ImageWidth are 40px, it works fine to show on UI, no issues.  my question is, when I export the RadGrid to Excel, GridImageColumn is also export successful, but the size is 100px*100px, how do I define some styles to change the size in Excel when exoprting? because I would like to be same size as shown as on UI. thank you very much.

[chen]

I know if export URL instead but I don't want to, I just want to export the pic from GridImageColumn with the same size (40px*40px), how should I do?

[Attila Antal]

Hi Chen,

As there are multiple export formats and scenarios, can you please tell me which format are you trying to use for the export?

Here is a list of formats: Supported Formats

[chen]

this request took me long time and till now I still cannot fix it.

I want to export the format as "Html (default) - HTML-Based Excel Format (.xls) ".  Again, I want to define the size of pic in .xls file as same as ImageHeight and ImageWidth from UI.  could you please share same samples or ideas? thank you very much.

[Attila Antal]

Hello Chen,

Thanks for sharing the details. 

If you are looking for Excel (Xls) use the Biff format. That one can fit the images after the Cell size.

The Configuration is very simple:

1. Set the Excel-Format to Biff
2. Set the Excel-AutoFitImages to True
3. Set the ItemStyle/AlternatingItemStyle Height to the height you would like the images to be sized vertically (I used 50px in my example)
4. Use the HeaderStyle-Width of the Column to set the Cell's Width

 

See the markup definition below and notice the Yellow marking of each step

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <ExportSettings>
        <Excel Format="Biff" AutoFitImages="true" />
    </ExportSettings>
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID" CommandItemDisplay="Top">
        <ItemStyle Height="50px" />
        <AlternatingItemStyle Height="50px" />
        <CommandItemSettings ShowExportToExcelButton="true" />
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID" >
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate" DataFormatString="{0:MM/dd/yyyy}"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                FilterControlAltText="Filter Freight column" HeaderText="Freight"
                SortExpression="Freight" UniqueName="Freight">
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="ShipName"
                FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                SortExpression="ShipName" UniqueName="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCountry"
                FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                SortExpression="ShipCountry" UniqueName="ShipCountry">
            </telerik:GridBoundColumn>

            <telerik:GridImageColumn UniqueName="ImgCol" HeaderText="Banner" ImageUrl="images/telerik_by_progress.png" ImageHeight="50px">
                <HeaderStyle Width="90px" />
            </telerik:GridImageColumn>

            <telerik:GridTemplateColumn UniqueName="TemplateCol" HeaderText="Logo">
                <HeaderStyle Width="50px" />
                <ItemTemplate>
                    <asp:Image ImageUrl="images/progress_logo.png" runat="server" Height="50px" />
                </ItemTemplate>
            </telerik:GridTemplateColumn>

        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

RadGrid on the Web Page

 

 

Exported Excel File

 

You can use the following C#/VB code to bind the Grid to data.

 

C#

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = OrdersTable();
}

private DataTable OrdersTable()
{
    DataTable dt = new DataTable();

    dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
    dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
    dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));
    dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
    dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

    dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

    for (int i = 0; i < 70; i++)
    {
        int index = i + 1;

        DataRow row = dt.NewRow();

        row["OrderID"] = index;
        row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);
        row["Freight"] = index * 0.1 + index * 0.01;
        row["ShipName"] = "Name " + index;
        row["ShipCountry"] = "Country " + index;

        dt.Rows.Add(row);
    }

    return dt;
}

 

VB

Private Function OrdersTable() As DataTable
    Dim dt As New DataTable()

    dt.Columns.Add(New DataColumn("OrderID", Type.GetType("System.Int32")))
    dt.Columns.Add(New DataColumn("OrderDate", Type.GetType("System.DateTime")))
    dt.Columns.Add(New DataColumn("Freight", Type.GetType("System.Decimal")))
    dt.Columns.Add(New DataColumn("ShipName", Type.GetType("System.String")))
    dt.Columns.Add(New DataColumn("ShipCountry", Type.GetType("System.String")))

    Dim PrimaryKeyColumns As DataColumn() = New DataColumn(0) {}
    PrimaryKeyColumns(0) = dt.Columns("OrderID")
    dt.PrimaryKey = PrimaryKeyColumns

    For i As Integer = 0 To 70 - 1
        Dim index As Integer = i + 1
        Dim row As DataRow = dt.NewRow()

        row("OrderID") = index
        row("OrderDate") = New DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index)
        row("Freight") = index * 0.1 + index * 0.01
        row("ShipName") = "Name " & index
        row("ShipCountry") = "Country " & index

        dt.Rows.Add(row)
    Next

    Return dt
End Function

 

Attached you can find the images used in the example.

 

I hope this will help resolve the issue.

 

Regards,
Attila Antal
Progress Telerik