Comment figer l'en-tête du girdview [gridview et la largeur de la colonne ne sont pas corrigés]

Question

Je suis en train d'implémenter l'en-tête Gridview avec une barre de défilement verticale. J'ai essayé beaucoup de solutions qui ont été suggérées ici. Mais les problèmes sont,

1. Le Gridview est à l'intérieur d'un panneau, dont la largeur n'est pas fixe. C'est 97%.

2.Les colonnes n'ont pas de largeur fixe.

J'ai essayé la solution suggérée dans GridviewScroll.js, mais le problème est avec la largeur fixe et le Gridview ne redimensionne pas selon la taille de la fenêtre.

J'ai essayé trop de solutions, mais rien ne fonctionne sans largeur fixe, donc je ne peux pas présenter ici que ..

Ci-dessous mon code existant

  <asp:Panel ID="panel_gridholder" runat="server" style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;overflow:auto;" > 


      <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" AllowSorting="true" PagerSettings-Position="TopAndBottom" 
       OnPageIndexChanging="GridView_Vehicle_PageIndexChanging" OnSorting="GridView_Vehicle_Sorting" PageSize="100" 
       GridLines="None" AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"> 
       <Columns> </Columns> 
      </asp:GridView> 

      <div style="height: 400px"></div> 
     </asp:Panel> 

Toutes les suggestions?

Answer 1

Je voudrais utiliser DataTables. Mis à part faire ce que vous voulez (pour autant que je comprends vos besoins), il est mature, stable et capable de beaucoup plus.

J'ai créé un jsFiddle pour démontrer: https://jsfiddle.net/objo18f9/3/

Dans le Fiddle: l'en-tête est fixe avec défilement vertical du contenu; pas de taille de colonne spécifiée (ils seront redimensionnés lorsque vous faites glisser le séparateur central (du violon) vers la gauche ou vers la droite, et la table est entourée d'un div qui est défini sur 97% de la largeur de la page est rendu comme dans ASP.Net) et la pagination est activée

est ici le même exemple un code Snippet:

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    "scrollY": "200px", 
 
    "scrollCollapse": true, 
 
    "paging": true 
 
    }); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
 

 
<div width="97%"> 
 
    <table id="example" class="display" width="100%" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Office</th> 
 
     <th>Age</th> 
 
     <th>Start date</th> 
 
     <th>Salary</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Garrett Winters</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>63</td> 
 
     <td>2011/07/25</td> 
 
     <td>$170,750</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Ashton Cox</td> 
 
     <td>Junior Technical Author</td> 
 
     <td>San Francisco</td> 
 
     <td>66</td> 
 
     <td>2009/01/12</td> 
 
     <td>$86,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Cedric Kelly</td> 
 
     <td>Senior Javascript Developer</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2012/03/29</td> 
 
     <td>$433,060</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Airi Satou</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>33</td> 
 
     <td>2008/11/28</td> 
 
     <td>$162,700</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Brielle Williamson</td> 
 
     <td>Integration Specialist</td> 
 
     <td>New York</td> 
 
     <td>61</td> 
 
     <td>2012/12/02</td> 
 
     <td>$372,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Herrod Chandler</td> 
 
     <td>Sales Assistant</td> 
 
     <td>San Francisco</td> 
 
     <td>59</td> 
 
     <td>2012/08/06</td> 
 
     <td>$137,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Rhona Davidson</td> 
 
     <td>Integration Specialist</td> 
 
     <td>Tokyo</td> 
 
     <td>55</td> 
 
     <td>2010/10/14</td> 
 
     <td>$327,900</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Colleen Hurst</td> 
 
     <td>Javascript Developer</td> 
 
     <td>San Francisco</td> 
 
     <td>39</td> 
 
     <td>2009/09/15</td> 
 
     <td>$205,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Sonya Frost</td> 
 
     <td>Software Engineer</td> 
 
     <td>Edinburgh</td> 
 
     <td>23</td> 
 
     <td>2008/12/13</td> 
 
     <td>$103,600</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jena Gaines</td> 
 
     <td>Office Manager</td> 
 
     <td>London</td> 
 
     <td>30</td> 
 
     <td>2008/12/19</td> 
 
     <td>$90,560</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Quinn Flynn</td> 
 
     <td>Support Lead</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2013/03/03</td> 
 
     <td>$342,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Charde Marshall</td> 
 
     <td>Regional Director</td> 
 
     <td>San Francisco</td> 
 
     <td>36</td> 
 
     <td>2008/10/16</td> 
 
     <td>$470,600</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Haley Kennedy</td> 
 
     <td>Senior Marketing Designer</td> 
 
     <td>London</td> 
 
     <td>43</td> 
 
     <td>2012/12/18</td> 
 
     <td>$313,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Tatyana Fitzpatrick</td> 
 
     <td>Regional Director</td> 
 
     <td>London</td> 
 
     <td>19</td> 
 
     <td>2010/03/17</td> 
 
     <td>$385,750</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Michael Silva</td> 
 
     <td>Marketing Designer</td> 
 
     <td>London</td> 
 
     <td>66</td> 
 
     <td>2012/11/27</td> 
 
     <td>$198,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Paul Byrd</td> 
 
     <td>Chief Financial Officer (CFO)</td> 
 
     <td>New York</td> 
 
     <td>64</td> 
 
     <td>2010/06/09</td> 
 
     <td>$725,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gloria Little</td> 
 
     <td>Systems Administrator</td> 
 
     <td>New York</td> 
 
     <td>59</td> 
 
     <td>2009/04/10</td> 
 
     <td>$237,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Bradley Greer</td> 
 
     <td>Software Engineer</td> 
 
     <td>London</td> 
 
     <td>41</td> 
 
     <td>2012/10/13</td> 
 
     <td>$132,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Dai Rios</td> 
 
     <td>Personnel Lead</td> 
 
     <td>Edinburgh</td> 
 
     <td>35</td> 
 
     <td>2012/09/26</td> 
 
     <td>$217,500</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Si vous dites ASP.Net d'utiliser un. Id statique: <asp:GridView ID="GridView_Vehicle" ClientIDMode="static" ... alors vous devriez être en mesure de se référer à votre table comme: $('#GridView_Vehicle').DataTable({ ... });

Answer 2

Voici une solution pour une grille avec un nombre modéré de lignes (et si vous avez plus que cela au lieu de défilement, vous pouvez utiliser la pagination de plus petite taille):

Créer deux éléments GridView avec la même spécification et source de données, sauf que le second a ShowHeader = "false". Mettez le premier dans un div avec style = "height: 38px; overflow: hidden" (vous devrez peut-être ajuster la hauteur en fonction de la police utilisée pour votre en-tête). Mettez la seconde dans un div avec style = "max-height: 400px; overflow: auto" (ajustez la hauteur en fonction du nombre de lignes que vous voulez montrer). Puisque les deux tables utilisent les mêmes données, elles devraient s'aligner correctement, et la seconde sera scrollable. Si vous souhaitez activer le tri, faites-le sur la source de données partagée sur le serveur et placez le deuxième GridView dans un UpdatePanel avec un AsyncPostBackTrigger pointant vers le premier. Voici le code pour votre exemple:

<asp:Panel ID="panel_gridholder" runat="server" style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;" > 
    <div style="height:38px; overflow:hidden"> 
     <asp:GridView ID="GridView_Vehicle_Header" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true" AllowSorting="true" OnSorting="GridView_Vehicle_Sorting" GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt"> 
      <Columns> </Columns> 
     </asp:GridView> 
    </div> 
    <div style="max-height:400px; overflow:auto"> 
     <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional"> 
      <ContentTemplate> 
      <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" ShowHeader="false" AllowSorting="true" OnSorting="GridView_Vehicle_Sorting" GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt"> 
       <Columns> </Columns> 
      </asp:GridView> 
      </ContentTemplate> 
      <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="GridView_Vehicle_Header" /> 
      </Triggers> 
     </asp:UpdatePanel> 
    </div> 
</asp:Panel>