2017-08-15 93 views
0

我使用的是Telerik的radgrid控件查看数据AJAX填充image列。其中一列的是一个GridTemplateColumn其包括由一个AJAX调用当电网负载给定的图像源的元件。Telerik的radgrid控件出口包括

我的问题是,当我这个网格导出到Excel/PDF/Word中,图像栏为空白。有没有人遇到这样的情况?

+0

从我的理解来看,这不支持每个Telerik的开箱即用。在他们的论坛中有一个代码片段显示了如何在导出时操纵网格以使其能够以PDF/Word正确显示(我不相信Excel会在单元格中显示图像,无论您做什么),但是我有现在很难找到它。如果我再次遇到它,我会在这里发布一个链接。 – chambo

回答

0

于是我找到了解决这个问题。

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

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

当您使用此列时,您可以从客户端或服务器端插入图像。所以,当电网呈现在页面上,我用从电网发起一个Ajax调用OnRowCreated客户端的方法。

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

此解决方案对我来说最合适。现在,我在网格中加载了延迟加载的图像,并且在导出此网格时,我拥有完整的图像集。