Telerik RadGrid export include ajax populated image columns

Question

I am using a Telerik RadGrid to view data. One of the columns is a GridTemplateColumn that includes an element which is given an image source by an ajax call when the grid loads.

My issue is when I export this grid to Excel/PDF/Word, the Image column is blank. Has any one run into a scenario like this?

From my understanding this is not supported out of the box per Telerik. There's a code snippet in their forums somewhere that shows how to manipulate the grid when exporting to get it to display properly in PDF/Word (I do not believe Excel will display images in cells regardless of what you do), but I'm having a hard time finding it right now. If I come across it again I'll post a link here. — chambo

Dannible Dannible · Accepted Answer · 2017-08-22T14:28:07

So I found a solution to this problem.

In your grid, use a GridBinaryImageColumn for the image.

<telerik:GridBinaryImageColumn 
  UniqueName="ImageColumnBin" 
  HeaderText="Image" 
  Exportable="true"
  AlternateText="Image" 
  DefaultImageUrl="/images/Default.jpg"  />

When you use this column, you can insert an image either from the client-side or server side. So when the grid renders on the page, I use an ajax call initiated from the Grids OnRowCreated client-side method.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script>
        OnRowCreated: function getBinaryImage(sender, args) {
                       var dataItem = args.get_gridDataItem();
                       var html = dataItem.get_cell("ImageColumnBin").innerHTML;

                       var jqhtml = $($.parseHTML(html.trim()));
                       var imgID = jqhtml.attr('id');
                       var pkey = args.getDataKeyValue('Key');

                       $.ajax({
                              type: 'POST',
                              url: 'ResultWindow.aspx/GetBinaryImage',
                              data: '{ImageKey: ' + pkey + '}',
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              success: function (r) {$('#' + imgID).attr('src', r.d);},
                              error: function (request, error) {console.log("Error: " + request);}
                              });
                           }
  </script>
</telerik:RadCodeBlock>

So each time a row is created on the client side, this ajax call loads this images. If you have 500 records but are only displaying displaying 10 rows, you only need to load 10 images.

Now, we need these images in an export of this grid. On the server-side, in the ItemDataBound of the grid, check if the grid IsExporting. If this is true then we can assume that a user has kicked off the export. So for each item that is bound we can look up the image and assign it to the binary image column.

protected void RadGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem && !e.Item.IsInEditMode)
        {
            GridDataItem dataBoundItem = e.Item as GridDataItem;
            if (RadGrid.IsExporting 
                && RadGrid.MasterTableView.GetColumnSafe("ImageColumnBin") != null 
                && RadGrid.MasterTableView.GetColumnSafe("ImageColumnBin").Display)
            {
                    (dataBoundItem["ImageColumnBin"].Controls[0] as RadBinaryImage).DataValue = GetBinaryImage(dataBoundItem.GetDataKeyValue("Key").ToString());
            }
        }
    }

This solution worked best for me. Now I have Lazy-loaded images in my grid, and when I export this grid I have the full set of images.

Telerik RadGrid export include ajax populated image columns

1 Answers