筆記 - 在Telerik RadGrid 使用自訂Edit Form | 油王的菜鳥筆記 - 點部落

2018-09-17 置頂文章
筆記 - 在Telerik RadGrid 使用自訂Edit Form

401
0
Telerik
2018-09-18
通常在使用Telerik RadGrid 有非常好用的自動生産Edit Form功能。但往往不合實際需要，要自訂Edit Form但官方教學好多時令人難以明白。不過只要在EditFormSettings內自己編寫HTML就可以解決問題。
 <telerik:RadGrid ID="RadGrid1" runat="server" Culture="zh-TW" DataSourceID="SqlDataSource1" AutoGenerateEditColumn="True" ShowFooter="True" Skin="Web20" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" OnItemCommand="RadGrid1_ItemCommand">

         <MasterTableView AutoGenerateColumns="False" DataKeyNames="hbId" DataSourceID="SqlDataSource1" GridLines="Both" ShowGroupFooter="true" >
             <Columns>
                 <telerik:GridBoundColumn DataField="hbId" DataType="System.Int32" FilterControlAltText="Filter hbId column" HeaderText="編號" ReadOnly="True" SortExpression="hbId" UniqueName="hbId" Aggregate="None"  FooterText="總計">
                 </telerik:GridBoundColumn>
                 
                 <telerik:GridBoundColumn DataField="NameCn"  FilterControlAltText="Filter NameCn column" HeaderText="員工姓名" SortExpression="NameCn" UniqueName="NameCn" Aggregate="Count" FooterText="" >
                 </telerik:GridBoundColumn>
                 
                 
                 <telerik:GridBoundColumn DataField="ALBalance" DataType="System.Decimal" FilterControlAltText="Filter ALBalance column" HeaderText="年假結餘" SortExpression="ALBalance" UniqueName="ALBalance" Aggregate="Sum" FooterText="總計: " >
                 </telerik:GridBoundColumn>
               
             </Columns>
        
         <EditFormSettings EditFormType="Template">
             <FormTemplate>
                 <table> //在FormTemplate 內可自行編寫HTML
                     <tr>
                          <td style="font-weight:bold;">
                               <b>內容</b> 
                           </td>
                     </tr>
                     <tr>
                           <td><b>編號:&nbsp</b></td>
                           <td> <asp:Label ID="Label1" runat="server" Text='<%# Bind("hbid") %>'></asp:Label>
                                    

                               
                               </td>
                       </tr>
                      <tr>
                           <td><b>部門:&nbsp</b></td>
                           <td> <asp:Label ID="TbDeptNameCn" runat="server" Text='<%# Bind("DeptNameCn") %>'></asp:Label>
                                    

                               
                               </td>
                       </tr>
                         <tr>
                           <td><b>姓名:&nbsp</b></td>
                           <td><asp:Label ID="TbNameCn" runat="server" Text='<%# Bind("NameCn") %>'></asp:Label></td>
                       </tr>

                         <tr>
                           <td><b>年假結餘:&nbsp</b></td>
                           <td>
                               <asp:TextBox ID="TbALBalance" runat="server" Text='<%# Bind("ALBalance") %>'></asp:TextBox>

                           </td>
                       </tr>
                     <tr>
                           <td><b>比例年假結餘:&nbsp</b></td>
                           <td>
                               <asp:TextBox ID="TbCLBalance" runat="server" Text='<%# Bind("AALBalance") %>'></asp:TextBox>

                           </td>
                       </tr>
                     
                          <tr>
                           <td align="right" colspan="2">
                                    <asp:Button ID="btnUpdate"  Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                        runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'></asp:Button>&nbsp;
                                    <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                        CommandName="Cancel"></asp:Button>
                                </td>
                       </tr>
                 </table>
             </FormTemplate>
         </EditFormSettings>           
         </MasterTableView>
    </telerik:RadGrid>
回首頁

