ASPxGridView控件常用示例九：在PreviewRows中显示图像

本示例主要展示如何在PreviewRow中显示图像。通过模板设计器，自定义ASPxGridView的 PreviewRow模板即可在previewrows中显示图像。

首先，点击Edit Templates任务，然后选择PreviewRow模板，从而调用模板设计器。最后，ASPxGridView显示在模板编辑模式中。

从工具箱中将ASPxImage和ASPxLabel控件拖放到PreviewRow 模板。在本示例中ASPxImage控件用于显示图像。ASPxLabel用于显示描述。

将ASPxImage控件绑定到一个包含了图像URLs的数据字段中。

将ASPxLabel控件绑定到一个包含了描述信息的数据字段中。

查看结果：

Asp

<dxwgv:ASPxGridView ID="ASPxGridView2" runat="server" AutoGenerateColumns="False"
DataSourceID="AccessDataSource3" FilterEnabled="True"
KeyFieldName="ID" PreviewFieldName="Notes">
<Templates>
<PreviewRow>
<table style="width:500px">
<tr>
<td><dxe:ASPxImage ID="ASPxImage1" runat="server" ImageUrl='<%# Eval("Url") %>'>
</dxe:ASPxImage></td>
<td><dxe:ASPxLabel ID="ASPxLabel1" runat="server" Text='<%# Eval("Notes") %>'>
</dxe:ASPxLabel></td>
</tr>
</table>
</PreviewRow>
</Templates>
<Columns>
<dxwgv:GridViewDataTextColumn FieldName="ID" ReadOnly="True" VisibleIndex="0">
<EditFormSettings Visible="False" />
</dxwgv:GridViewDataTextColumn>
<dxwgv:GridViewDataTextColumn FieldName="Name" VisibleIndex="1">
</dxwgv:GridViewDataTextColumn>
</Columns>
<Settings ShowPreview="True" />
</dxwgv:ASPxGridView>