DevExpress ASPxGridView 使用文档六：模板

转载请注明出处：http://surfsky.cnblogs.com/

---------------------------------------------------------

-- ASPxGridView 模板

---------------------------------------------------------

ASPxGridView 提供以下几种自定义的模板视图

EditForm 编辑窗口。弹出式或附加在原记录下面

DetailRow 详细行。点击后以form方式查看记录的详细信息

PreviewRow 预览行。原记录下进行简短描述

DataRow 数据行视图。每一行的内容位置都是定制的。

注：列模板请参考文档《ASPxGridView.Column》

数据行模板（DataRow, 类似ListView 卡片视图）

<dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID" Width="100%">

<Columns>

<dxwgv:GridViewDataColumn FieldName="FirstName" VisibleIndex="1" />

<dxwgv:GridViewDataColumn FieldName="Title" VisibleIndex="4" />

<dxwgv:GridViewDataColumn FieldName="Notes" Visible="False" />

<dxwgv:GridViewDataColumn FieldName="LastName" VisibleIndex="2" />

<dxwgv:GridViewDataColumn FieldName="BirthDate" VisibleIndex="3"/>

<dxwgv:GridViewDataColumn FieldName="HireDate" VisibleIndex="5"/>

</Columns>

<SettingsPager PageSize="5" />

<Templates>

<DataRow>

<div style="padding:5px">

<table class="templateTable" cellpadding="2" cellspacing="1" >

<tr>

<td rowspan="4"><img alt="" src="CardView.aspx?Photo=<%# Eval("EmployeeID")%>"/></td>

<td class="templateCaption">First Name</td>

<td><%# Eval("FirstName") %></td>

<td class="templateCaption">Last Name</td>

<td><%# Eval("LastName")%></td>

</tr>

<tr>

<td class="templateCaption">Title</td>

<td colspan="3"><%# Eval("Title")%></td>

</tr>

<tr>

<td class="templateCaption">Birth Date</td>

<td ><%# Eval("BirthDate")%></td>

<td class="templateCaption">Hire Date</td>

<td><%# Eval("HireDate")%></td>

</tr>

<tr>

<td colspan="4" style="white-space:normal"><%# Eval("Notes") %> </td>

</tr>

</table>

</div>

</DataRow>

</Templates>

</dxwgv:ASPxGridView>

编辑表单模板(EditForm)

示例一：两个标签页，一个用标准的编辑面板，一个展示memo字段

<Templates>

<EditForm>

<div style="padding:4px 4px 3px 4px">

<dxtc:ASPxPageControl runat="server" ID="pageControl" Width="100%">

<TabPages>

<dxtc:TabPage Text="Info" Visible="true">

<Controls>

<dxwgv:ASPxGridViewTemplateReplacement ID="Editors" ReplacementType="EditFormEditors" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>

</Controls>

</dxtc:TabPage>

<dxtc:TabPage Text="Notes" Visible="true">

<Controls>

<dxe:ASPxMemo runat="server" ID="notesEditor" Text='<%# Eval("Notes")%>' Width="100%" Height="93px"></dxe:ASPxMemo>

</Controls>

</dxtc:TabPage>

</TabPages>

</dxtc:ASPxPageControl>

</div>

<div style="text-align:right; padding:2px 2px 2px 2px">

<dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>

<dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server"></dxwgv:ASPxGridViewTemplateReplacement>

</div>

</EditForm>

</Templates>

protected string GetMemoText() {

ASPxPageControl pageControl = grid.FindEditFormTemplateControl("pageControl") as ASPxPageControl;

ASPxMemo memo = pageControl.FindControl("notesEditor") as ASPxMemo;

return memo.Text;

}

protected void grid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {

e.NewValues["Notes"] = GetMemoText();

}

protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {

e.NewValues["Notes"] = GetMemoText();

}

示例二

<Templates>

<EditForm>

<div style="padding:4px 4px 3px 4px">

<table>

<tr>

<% if(!grid.IsNewRowEditing) { %>

<td rowspan="4">

<div style="border: solid 1px #C2D4DA; padding: 2px;"><img alt="" src="TwoWayBinding.aspx?Photo=<%# Eval("EmployeeID")%>" /></div>

</td>

<% } %>

<td style="white-space:nowrap">First Name</td>

<td style="width:50%"><dxe:ASPxTextBox runat="server" ID="edFirst" Text='<%# Bind("FirstName") %>' Width="100%" /> </td>

<td style="white-space:nowrap">Last Name</td>

<td style="width:50%"><dxe:ASPxTextBox runat="server" ID="edLast" Text='<%# Bind("LastName") %>' Width="100%" /> </td>

</tr>

<tr>

<td>Title</td>

<td style="width:100%" colspan="3"><dxe:ASPxTextBox runat="server" ID="edTitle" Text='<%# Bind("Title") %>' Width="100%" /> </td>

</tr>

<tr>

<td style="white-space:nowrap">Birth Date</td>

<td style="width:50%"><dxe:ASPxDateEdit runat="server" ID="edBirth" Value='<%# Bind("BirthDate") %>' Width="100%" /> </td>

<td style="white-space:nowrap">Hire Date</td>

<td style="width:50%"><dxe:ASPxDateEdit runat="server" ID="edHire" Value='<%# Bind("HireDate") %>' Width="100%" /> </td>

</tr>

<tr>

<td colspan="4">

<dxe:ASPxMemo runat="server" ID="edNotes" Text='<%# Bind("Notes")%>' Width="100%" Height="100px" />

</td>

</tr>

</table>

</div>

<div style="text-align:right; padding:2px 2px 2px 2px">

<dxwgv:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server" />

<dxwgv:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server" />

</div>

</EditForm>

</Templates>

预览行模板(PreviewRow)

<Templates>

<PreviewRow>

<table style="border:none">

<tbody>

<tr>

<td style="width:25%;border:none;color:Black"><img alt="" src="Preview.aspx?Photo=<%# Eval("EmployeeID")%>"/></td>

<td style="border:none;"><%# Container.Text %></td>

</tr>

</tbody>

</table>

</PreviewRow>

</Templates>

细节行模板(DetailRow: 主从视图Master-Detail)

<dxe:ASPxCheckBox ID="chkSingleExpanded" runat="server" Text="Keep a single expanded row at a time" AutoPostBack="true" OnCheckedChanged="chkSingleExpanded_CheckedChanged" />

<dxwgv:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="masterDataSource" KeyFieldName="CustomerID">

<Columns>

<dxwgv:GridViewDataColumn FieldName="ContactName" />

<dxwgv:GridViewDataColumn FieldName="CompanyName" />

<dxwgv:GridViewDataColumn FieldName="City" />

<dxwgv:GridViewDataColumn FieldName="Country" />

</Columns>

<Templates>

<DetailRow>

联系电话: <b><%# Eval("Phone")%></b>, 传真: <b><%# Eval("Fax")%></b><br/>

<dxwgv:ASPxGridView ID="detailGrid" runat="server" DataSourceID="detailDataSource" KeyFieldName="OrderID" Width="100%"

OnBeforePerformDataSelect="detailGrid_DataSelect" OnCustomUnboundColumnData="detailGrid_CustomUnboundColumnData">

<Settings ShowFooter="True" />

<SettingsDetail IsDetailGrid="true"/>

<Columns>

<dxwgv:GridViewDataColumn FieldName="OrderID" />

<dxwgv:GridViewDataColumn FieldName="OrderDate" />

<dxwgv:GridViewDataColumn FieldName="ShipName" />

<dxwgv:GridViewDataColumn FieldName="Quantity" Name="Quantity" />

<dxwgv:GridViewDataTextColumn FieldName="UnitPrice" >

<PropertiesTextEdit DisplayFormatString="c" />

</dxwgv:GridViewDataTextColumn>

<dxwgv:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal">

<PropertiesTextEdit DisplayFormatString="c" />

</dxwgv:GridViewDataTextColumn>

</Columns>

<TotalSummary>

<dxwgv:ASPxSummaryItem FieldName="CompanyName" SummaryType="Count"/>

<dxwgv:ASPxSummaryItem FieldName="Total" SummaryType="Sum" DisplayFormat="c"/>

<dxwgv:ASPxSummaryItem FieldName="Quantity" SummaryType="Sum" />

</TotalSummary>

</dxwgv:ASPxGridView>

</DetailRow>

</Templates>

<SettingsDetail ShowDetailRow="true"/>

</dxwgv:ASPxGridView>

<asp:AccessDataSource ID="masterDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"

SelectCommand="SELECT * FROM [Customers]">

</asp:AccessDataSource>

<asp:AccessDataSource ID="detailDataSource" runat="server" DataFile="~/App_Data/nwind.mdb"

SelectCommand="SELECT * FROM [Invoices] Where CustomerID = ?">

<SelectParameters>

<asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="String" />

</SelectParameters>

</asp:AccessDataSource>

注意： detailGrid.SettingsDetail.IsDetailGrid = true 表明该grid是作为从表的数据表格用的

// 主表数据绑定

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

grid.DataBind();

grid.DetailRows.ExpandRow(0);

}

}

// 从表数据绑定

protected void gridDetail_DataBinding(object sender, EventArgs e)

{

ASPxGridView grid = sender as ASPxGridView;

if (grid != null)

{

int i = (int) grid.GetMasterRowKeyValue();

grid.DataSource = GetProducts(i);

}

}

// 从表数据选择？

protected void detailGrid_DataSelect(object sender, EventArgs e)

{

Session["CustomerID"] = (sender as ASPxGridView).GetMasterRowKeyValue();

}

// 从表定制列的展示

protected void detailGrid_CustomUnboundColumnData(object sender, ASPxGridViewColumnDataEventArgs e)

{

if(e.Column.FieldName == "Total")

{

decimal price = (decimal)e.GetListSourceFieldValue("UnitPrice");

int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));

e.Value = price * quantity;

}

}

// 控制从表的显隐

protected void chkSingleExpanded_CheckedChanged(object sender, EventArgs e)

{

grid.SettingsDetail.AllowOnlyOneMasterRowExpanded = chkSingleExpanded.Checked;

if(grid.SettingsDetail.AllowOnlyOneMasterRowExpanded)

{

grid.DetailRows.CollapseAllRows();

}

}