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

时间:2017-08-15 17:58:31

标签: jquery asp.net ajax telerik

我正在使用Telerik RadGrid查看数据。其中一列是GridTemplateColumn,其中包含一个元素,当网格加载时,该元素通过ajax调用获得图像源。

我的问题是当我将此网格导出到Excel / PDF / Word时,“图像”列为空白。有没有人碰到这样的情景?

1 个答案:

答案 0 :(得分:0)

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

在网格中,为图像使用 GridBinaryImageColumn

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

使用此列时,可以从客户端或服务器端插入映像。因此,当网格在网页上呈现时,我使用从网格 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());
            }
        }
    }

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