转载请注明出处: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 IsDetailGr));
            e.Value = price * quantity;
        }
    }
    // 控制从表的显隐
    protected void chkSingleExpanded_CheckedChanged(object sender, EventArgs e)
    {
        grid.SettingsDetail.AllowOnlyOneMasterRowExpanded = chkSingleExpanded.Checked;
        if(grid.SettingsDetail.AllowOnlyOneMasterRowExpanded)
        {
            grid.DetailRows.CollapseAllRows();
        }
    }


 

相关文章: