Telerik RadGrid 导出包括 ajax 填充的图像列答案

【问题标题】：Telerik RadGrid export include ajax populated image columnsTelerik RadGrid 导出包括 ajax 填充的图像列
【发布时间】：2018-01-23 17:16:28
【问题描述】：

我正在使用 Telerik RadGrid 查看数据。其中一列是 GridTemplateColumn，它包含一个元素，当网格加载时，该元素由 ajax 调用提供图像源。

我的问题是当我将此网格导出到 Excel/PDF/Word 时，图像列是空白的。有没有人遇到过这样的情况？

【问题讨论】：

据我了解，Telerik 不支持开箱即用。他们的论坛中有一个代码 sn-p 显示了如何在导出时操作网格以使其在 PDF/Word 中正确显示（我不相信 Excel 会在单元格中显示图像，无论你做什么），但我我现在很难找到它。如果我再次遇到它，我会在这里发布一个链接。

标签： jquery asp.net ajax telerik

【解决方案1】：

所以我找到了解决这个问题的方法。

在您的网格中，为图像使用 GridBinaryImageColumn。

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

当您使用此列时，您可以从客户端或服务器端插入图像。因此，当网格在页面上呈现时，我使用从 Grids OnRowCreated 客户端方法启动的 ajax 调用。

<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>

因此，每次在客户端创建一行时，此 ajax 调用都会加载此图像。如果您有 500 条记录但只显示 10 行，则只需加载 10 张图像。

现在，我们需要在此网格的导出中使用这些图像。在服务器端，在网格的 ItemDataBound 中，检查网格是否 IsExporting。如果这是真的，那么我们可以假设用户已经开始导出。所以对于绑定的每一项，我们都可以查找图片并将其分配给二值图片列。

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());
            }
        }
    }

这个解决方案最适合我。现在我的网格中有延迟加载的图像，当我导出这个网格时，我有完整的图像集。

【讨论】：