Comment fusionner toutes les cellules de pied de page dans un DataGrid réactif et bootstrap?

Question

J'ai un DataGrid multi-colonnes dans un contrôle utilisateur ASP.NET avec un pied de page dont les colonnes que je voudrais fusionner en une seule cellule. Comment je fais ça? J'utilise C# pour les classes Bootstrap 4 bêta code-behind pour masquer automatiquement les colonnes lorsque la largeur de la fenêtre change, Font-Awesome pour certains symboles/icônes, et ci-dessous est le DataGrid dans mon balisage ASCX. Actuellement, tout fonctionne, sauf que je veux que la ligne de bas de page soit fusionnée en une seule cellule. À la fin, les éléments de FooterTemplate de ma première colonne devraient s'étendre à travers la cellule de pied de page fusionnée avec succès car j'ai déjà préparé le style pour cela (je suppose que toutes les autres cellules de pied de page vides seront fusionnées dans le premier pied de page cellule, et que le contenu de la première cellule de bas de page sera conservé).

<div class="col-lg-12 "> 
    <div class="table-responsive"> 
     <asp:datagrid id="dgEggGradeDetails" UseAccessibleHeader="True" AutoGenerateColumns="False" CssClass="table table-striped table-bordered table-hover" ShowHeader="True" ShowFooter="True" runat="server" DataKeyField="EggID" CellPadding="0" GridLines="None" AllowSorting="True" OnSortCommand="dgEggGradeDetails_SortCommand" OnItemCreated="dgEggGradeDetails_ItemCreated"> 
      <FooterStyle CssClass=""> 
      </FooterStyle> 
      <Columns> 
       <asp:TemplateColumn HeaderText="Egg ID" SortExpression="EggID" HeaderStyle-CssClass="visible-xs visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-xs visible-sm visible-md visible-lg"> 
        <ItemTemplate> 
         <asp:Label ID="lblEggID" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "EggID") %>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 
         <div id="dvHidePickledOrDeviled" runat="server"> 
          <div style="text-align: left; float: left; width: 80%; height: 100%;"> 
           <asp:Label ID="lblHideFooter" runat="server" CssClass="" Visible="True">Hide All Eggs (Deviled, Pickled)</asp:Label> 
          </div> 
          <div style="text-align: right;"> 
           <asp:LinkButton ID="btnHidePickledOrDeviled" runat="server" OnClick="ShowOrHidePickledOrDeviled" CssClass="" Visible="True" CommandName="HidePickledOrDeviled"> 
            <i id="iHidePickledOrDeviled" class="fa fa-minus-square-o" style="font-size: 40px;" title="Hide Eggs with 'Deviled' and 'Pickled' grades"></i> 
           </asp:LinkButton>  
          </div> 
         </div> 
         <div id="dvShowPickledOrDeviled" runat="server">  
          <div style="text-align: left; float: left; width: 80%; height: 100%;"> 
           <asp:Label ID="lblShowFooter" runat="server" CssClass="" Visible="True">See All Eggs (Deviled, Pickled)</asp:Label> 
          </div> 
          <div style="text-align: right;"> 
           <asp:LinkButton ID="btnShowPickledOrDeviled" runat="server" OnClick="ShowOrHidePickledOrDeviled" CssClass="" Visible="True" CommandName="ShowPickledOrDeviled"> 
            <i id="iShowPickledOrDeviled" class="fa fa-plus-square-o" style="font-size: 40px;" title="Show Eggs with 'Deviled' and 'Pickled' grades"></i> 
           </asp:LinkButton> 
          </div>      
         </div> 
        </FooterTemplate> 
       </asp:TemplateColumn> 
       <asp:TemplateColumn HeaderText="Egg Name" SortExpression="EggName" HeaderStyle-CssClass="visible-md visible-lg" ItemStyle-CssClass="visible-md visible-lg"> 
        <ItemTemplate> 
         <asp:Label ID="lblEggName" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "EggName") %>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 
        </FooterTemplate> 
       </asp:TemplateColumn> 
       <asp:TemplateColumn HeaderText="Egg Grade" SortExpression="EggGrade" HeaderStyle-CssClass="visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-sm visible-md visible-lg"> 
        <ItemTemplate> 
         <asp:Label ID="lblGrade" Runat="server" /> 
         <asp:Label ID="lblGradeErrorMsg" Runat="server" /> 
        </ItemTemplate> 
       </asp:TemplateColumn> 

       <asp:TemplateColumn HeaderText="Confirm Grade" SortExpression="Grade" HeaderStyle-CssClass="visible-xs visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-xs visible-sm visible-md visible-lg"> 
        <ItemTemplate> 
         <asp:dropdownlist id="ddlConfirmGrade" Runat="server"></asp:dropdownlist> 
         <asp:Label ID="lblConfirmGrade" Runat="server" /> 
        </ItemTemplate> 
        <FooterTemplate> 
        </FooterTemplate> 
       </asp:TemplateColumn> 


       <asp:TemplateColumn HeaderText="Edible End Date" Visible="False" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg"> 
        <ItemTemplate> 
         <asp:Label id="lblEdibleEndDate" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "EdibleEndDate2"))%>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 
        </FooterTemplate> 
       </asp:TemplateColumn> 
       <asp:TemplateColumn HeaderText="Egg Grade Sync Date" Visible="False" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg"> 
        <ItemTemplate> 
         <asp:Label id="lblEggGradeUpdatedDate" Runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "EggGradeUpdatedDate") %>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 
        </FooterTemplate> 
       </asp:TemplateColumn> 

       <asp:TemplateColumn HeaderText="Expiration" SortExpression="ExpirationStopDate" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg"> 
        <ItemTemplate> 
         <asp:Label id="lblExpirationStopDate" Runat="server" text='<%# String.Format("{0:MM/dd/yyyy}", DataBinder.Eval(Container.DataItem, "ExpirationStopDate"))%>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 
        </FooterTemplate> 
       </asp:TemplateColumn> 

       <asp:TemplateColumn HeaderText="Reason for Grade Change" SortExpression="GradeChangeDescription" HeaderStyle-CssClass="visible-xs visible-sm visible-md visible-lg" ItemStyle-CssClass="visible-xs visible-sm visible-md visible-lg"> 
        <ItemTemplate> 
         <asp:dropdownlist id="ddlGradeChangeReason" Runat="server"></asp:dropdownlist>       
         <asp:Label id="lblReasonErrorMsg" Font-Size="10px" Runat="server"></asp:Label><INPUT id=hiRegistrationID type=hidden value='<%# DataBinder.Eval(Container.DataItem, "RegistrationID") %>' name=hiRegistrationID Runat="server"></input> 
         <input id="hiCurrLetGrade" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "Grade") %>' name=hiCurrLetGrade Runat="server"> 
         <input id="hiCurrLetGradeID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeID") %>' name=hiCurrLetGradeID Runat="server"> 
         <input id="hiGradeEnteredDate" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeEnteredDate") %>' name="hiGradeEnteredDate" Runat="server" /> 
         <input id="hiEggEmail" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "Email") %>' name="hiEggEmail" Runat="server" /> 
         <input id="hiQualityStatusID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "CurrentQualityStatusID") %>' name="hiQualityStatusID" Runat="server" /> 
         <input id="hiEggLaidDate" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "EggLaidDate") %>' name="hiEggLaidDate" Runat="server" /> 
         <input id="hiStoreName" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "StoreName") %>' name="hiStoreName" Runat="server" /> 
         <input id="hiTypeAEgg" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "TypeAEgg") %>' name="hiTypeAEgg" Runat="server" /> 
         <input id="hiTypeBEgg" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "IsTypeBEgg") %>' name="hiTypeBEgg" Runat="server" /> 
         <input id="hiEdibleTypeID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "EdibleTypeID") %>' name="hiEdibleTypeID" Runat="server" /> 
         <input id="hiGradeChangeReasonID" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeChangeReasonID") %>' name=hiGradeChangeReasonID Runat="server"> 
         <input id="hiGradeChangeDescription" type="hidden" value='<%# DataBinder.Eval(Container.DataItem, "GradeChangeDescription") %>' name=hiGradeChangeDescription Runat="server"> 
         <asp:Label ID ="lblCurrLetGrade" EnableViewState ="True" Visible = "False" Runat = "server" Text = '<%# DataBinder.Eval(Container.DataItem, "Grade") %>'></asp:Label> 
         <asp:Label ID ="lblEggGrade" EnableViewState ="True" Visible = "False" Runat = "server" Text = '<%# DataBinder.Eval(Container.DataItem, "EggGrade") %>'></asp:Label> 
        </ItemTemplate> 
        <FooterTemplate> 

        </FooterTemplate> 
       </asp:TemplateColumn>       
      </Columns> 
     </asp:datagrid> 
    </div> 
</div> 

Answer 1

Dans le code-behind, à l'intérieur du gestionnaire d'événements ItemCreated, placez le code suivant pour fusionner toute la ligne de pied de page:

protected void dgEggGradeDetails_ItemCreated(object sender, DataGridItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListItemType.Footer) 
    { 
     int newcolspan = 1; 
     int totalColumns = e.Item.Cells.Count - 1; 

     for (int i = totalColumns; i >= 1; i--) 
     { 
      if (e.Item.Cells[i].Visible) 
      { 
       e.Item.Cells.RemoveAt(i); 
       newcolspan++; 
      } 
     } 

     e.Item.Cells[0].ColumnSpan = newcolspan; 
    } 
}