locked
How to add a button to the footer of a Repeater? RRS feed

  • Question

  • User1700504264 posted

    Hello

    I added a repeater to the web form

    <asp:Repeater ID="rptrActivities" runat="server" DataSourceID="">
                                    <HeaderTemplate>
                                        
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                <span style="font-size: 1.5em; color:tomato;">
                                                  <i class="fas fa-circle"></i>
                                                </span>
                                            </td>
                                            <td>
                                                
                                                
                                                <%# DataBinder.Eval(Container.DataItem, "ActivityName") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                            </td>
                                           
                                            
                                            
                                            <td>
                                                <%# DataBinder.Eval(Container.DataItem, "achieved") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                                <%# DataBinder.Eval(Container.DataItem, "kpivalue") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                                
                                            </td>
    
                                            
                                            <td>
                                                <%# DataBinder.Eval(Container.DataItem, "target") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtRecord" CssClass="col-md-5 control-label" Text="<%$ Resources:numericrecord %>"></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtRecord" runat="server"  CssClass="form-control" MaxLength="3" Text='<%#Bind("record") %>' Width="50px"></asp:TextBox>
                                                        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtRecord"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />
                                                    </div>
                                                </div>
    
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtEvidence" CssClass="col-md-5 control-label" Text="<%$ Resources:evidence %>"></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtEvidence" runat="server" TextMode="MultiLine" Text='<%#Bind("evidence") %>' CssClass="form-control" MaxLength="255"></asp:TextBox>
                                                        <%--<asp:RequiredFieldValidator runat="server" ControlToValidate="txtEvidence"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />--%>
                                                    </div>
                                                </div>
                                                
                                            </td>
                                            <td>
                                                <asp:CheckBox ID="chkStumbling" runat="server" Checked="false" Text='<%$ Resources:stumbling %>' CssClass="checkbox" />
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtEvidence" CssClass="col-md-5 control-label" Text="<%$ Resources:stumblingreason %>"></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtStumblingReasons" runat="server" TextMode="MultiLine" Text='<%#Bind("stumblingreason") %>' CssClass="form-control" MaxLength="255"></asp:TextBox>
                                                        <%--<asp:RequiredFieldValidator runat="server" ControlToValidate="txtStumblingReasons"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />--%>
                                                    </div>
                                                </div>
                                                
                                            </td>
                                           
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        <asp:Button ID="btnSaveSection" runat="server" CssClass="btn btn-default" Text="Save This Section" />
                                    </FooterTemplate>
                                </asp:Repeater>

    as in the markup code above, I added a button to the repeater's footer, it is supposed to add a button in the bottom, but the result is something else as in the image

    it adds all buttons in the top before the repeater

    (image) https://ibb.co/cWNDTV

    how could I solve this <g class="gr_ gr_456 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="456" data-gr-id="456">please</g>?

    Tuesday, November 6, 2018 6:24 AM

Answers

  • User-1716253493 posted

    AFAIK repeater will not render extra codes,

    First it's will render header codes, repeate item codes, then at the end will render footer codes. No aditional codes there.

    So you need to imagine what next after repeating td tr, maybe you need extra tr td around the button

    <tr>
     <td>
       the button
     </td>
    <tr>
    

    Or

    header (start table)

    <table>

    items

    repeating rows

    footer (end table)

    </table>
    button

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 6, 2018 6:40 AM

All replies

  • User-1716253493 posted

    AFAIK repeater will not render extra codes,

    First it's will render header codes, repeate item codes, then at the end will render footer codes. No aditional codes there.

    So you need to imagine what next after repeating td tr, maybe you need extra tr td around the button

    <tr>
     <td>
       the button
     </td>
    <tr>
    

    Or

    header (start table)

    <table>

    items

    repeating rows

    footer (end table)

    </table>
    button

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 6, 2018 6:40 AM
  • User-893317190 posted

    Hi 0591666959,

    I have used your code to have a test , but I couldn't reproduce your problem.

    The button occurs as expected at bottom.

    Maybe your aspx's css changes the place of the bottom or you have done something in code behind.

    You could use F12 to see what the style of your button is , maybe it could get you out.

    Below is my test page.

      <asp:Repeater ID="rptrActivities" runat="server" DataSourceID="">
                                    <HeaderTemplate>
                                        
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                <span style="font-size: 1.5em; color:tomato;">
                                                  <i class="fas fa-circle"></i>
                                                </span>
                                            </td>
                                            <td>
                                                
                                                
                                                <%# DataBinder.Eval(Container.DataItem, "code") %>
                                                <%--<asp:HiddenField ID="hdnFieldFunction" runat="server" Value='<%# Eval("Code") %>' />--%>
                                            </td>
                                           
                                            
                                            
                                            <td>
                                                <%# DataBinder.Eval(Container.DataItem, "code") %>
                                              
                                                <%# DataBinder.Eval(Container.DataItem, "code") %>
                                              
                                                
                                            </td>
    
                                            
                                            <td>
                                                <%# DataBinder.Eval(Container.DataItem, "code") %>
                                              
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtRecord" CssClass="col-md-5 control-label" Text=""></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtRecord" runat="server"  CssClass="form-control" MaxLength="3" Text='<%#Bind("code") %>' Width="50px"></asp:TextBox>
                                                        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtRecord"
                                                            CssClass="text-danger" Display="Dynamic" ErrorMessage="*" ValidationGroup="SaveRecord" />
                                                    </div>
                                                </div>
    
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtEvidence" CssClass="col-md-5 control-label" Text=""></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtEvidence" runat="server" TextMode="MultiLine" Text='<%#Bind("code") %>' CssClass="form-control" MaxLength="255"></asp:TextBox>                                                 
                                                    </div>
                                                </div>
                                                
                                            </td>
                                            <td>
                                                <asp:CheckBox ID="chkStumbling" runat="server" Checked="false" Text='' CssClass="checkbox" />
                                                <div class="form-group">
                                                    <asp:Label runat="server" AssociatedControlID="txtEvidence" CssClass="col-md-5 control-label" Text=""></asp:Label>
                                                    <div class="col-md-12">
                                                        
                                                        <asp:TextBox ID="txtStumblingReasons" runat="server" TextMode="MultiLine" Text='<%#Bind("code") %>' CssClass="form-control" MaxLength="255"></asp:TextBox>
                                                       
                                                    </div>
                                                </div>
                                                
                                            </td>
                                           
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        <asp:Button ID="btnSaveSection" runat="server" CssClass="btn btn-default" Text="Save This Section" />
                                    </FooterTemplate>
                                </asp:Repeater>

    Code behind.

     if (!IsPostBack)
                {
                    ArrayList list = new ArrayList();
                    list.Add(new { Code = "code" });
                    list.Add(new { Code = "code" });
                   
                    rptrActivities.DataSource = list;
                    rptrActivities.DataBind();
                }

    The result.

    Best regards,

    Ackerly Xu

    Wednesday, November 7, 2018 2:53 AM