Comment se débarrasser de div vide qui contient un GridView

Question

Dans ASP.NET Gridviews génère une table qui génère un conteneur div parent. Cela peut casser les mises en page CSS car il n'y a aucun moyen d'attacher des styles à la div générée. Y at-il un moyen d'empêcher la div de générer ou un moyen d'appliquer un style?

Cela a été demandé et marqué comme résolu here mais MS vient de dire que la div est nécessaire pour la fonctionnalité de pagination et de tri. Dois-je comprendre que si je veux utiliser la fonctionnalité de pagination et de tri, je ne peux pas envelopper mon propre div autour et appliquer un style? Merci

Answer 1

Je ne l'ai jamais fait, mais je ma première supposition serait que vous pouvez saisir la sortie html rendu juste avant qu'il arrive au navigateur, supprimer la div extérieure, puis htmltextwrite sortir votre nouveau html rendu dans l'événement prerender ou faire un utilisateur ou un contrôle personnalisé pour le faire.

Mais alors vous risquez de casser la fonctionnalité de gridview mais si vous savez que vous n'utiliserez pas les fonctionnalités qui utilisent div, alors vous pourriez vous en sortir.

Answer 2

Vous pouvez le placer dans un panneau asp: Panel et définir la propriété Visible sur le panneau sur false si la table est vide.

Answer 3

Vous pouvez définir une CssClass explicite pour votre Gridviews à utiliser.

<asp:GridView ... CssClass="nameOfStyleClass" ... /> 

Définissez ensuite une classe CSS:

.nameOfStyleClass 
{ 
    < Style stuff > 
} 

Answer 4

Même problème ici, OMG c'est donc ennuyeux. Glitch dans le rendu dans IE6/7 en faisant une div au sommet d'un gridview - le DIV parent crée un espace entre les deux éléments.

J'ai creusé dans le code GridView en utilisant le réflecteur et trouvé le problème:

Private Sub Render(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean) 
    If (Not Me.Page Is Nothing) Then 
     Me.Page.VerifyRenderingInServerForm(Me) 
    End If 
    Me.PrepareControlHierarchy 
    If renderPanel Then 
     Dim clientID As String = Me.ClientID 
     If Me.DetermineRenderClientScript Then 
      If (clientID Is Nothing) Then 
       Throw New HttpException(SR.GetString("GridView_MustBeParented")) 
      End If 
      Dim builder As New StringBuilder("__gv", (clientID.Length + 9)) 
      builder.Append(clientID) 
      builder.Append("__div") 
      writer.AddAttribute(HtmlTextWriterAttribute.Id, builder.ToString, True) 
     End If 
     writer.RenderBeginTag(HtmlTextWriterTag.Div) 
    End If 
    Me.RenderContents(writer) 
    If renderPanel Then 
     writer.RenderEndTag 
    End If 
End Sub 

Ceci est appelé de rendre:

Protected Friend Overrides Sub Render(ByVal writer As HtmlTextWriter) 
    Me.Render(writer, Not MyBase.DesignMode) 
End Sub 

Ainsi, 'renderPanel' == pas DesignMode. Le DIV est utilisé pour la pagination et le tri lorsque gridview n'est pas dans un UpdatePanel. Sur mon site, toutes les GridViews sont en UP et ils héritent d'une classe GridView personnalisée, donc ma solution a consisté à remplacer la fonction ci-dessus avec les éléments suivants:

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) 
     Me.PrepareControlHierarchy() 
     Me.RenderContents(writer) 
    End Sub 

L'autre solution pourrait être de copier la méthode render de ci-dessus et changé au besoin.

Cela sent HACK - vous avez été prévenu, mais pourrait travailler pour vous, surtout si vous n'utilisez pas pagination/tri.

Answer 5

Une solution facile sans render modifier:

J'ai besoin d'appliquer un style à la div générée par le gridview car il me brise la mise en page, donc je créé un div id « myContainerDiv » et déplacé mon GridView en elle et en utilisant jQuery j'applique quelques styles.

Exemple:

$("#myContainerDiv > div").css("display", "inline"); 

Je mets ce javascript $ (document) .ready (function ({})) ;. Mais si vous utilisez UpdatePanel, comme je dois l'utiliser dans ce cas particulier, j'exécute ce $(). Css() dans chaque publication asynchrone. Sans cela le style sera perdu si vous exécutez un updatepanel où votre gridview est contenue. Mais j'exécute cette $() css() que si un UpdatePanel est tiré en particulier (pas besoin d'exécuter cette instruction javascript dans tous tous tous les async postback)

Exemple:.

<script type="text/javascript"> 

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function EndRequestHandler(sender, args) { 
    if (args.get_error() == undefined && sender._updatePanelClientIDs != null && 
      sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") { 
      $("#myContainerDiv > div").css("display", "inline"); 
     } 
    } 

</script> 

Résolu!

La page entière ressemblera que:

<script type="text/javascrcipt" src="jquery.js"></script> 

<script type="text/javascript">  

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function EndRequestHandler(sender, args) { 
    if (args.get_error() == undefined && sender._updatePanelClientIDs != null && 
      sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") { 
      $("#myContainerDiv > div").css("display", "inline"); 
     } 
    } 

</script> 

<asp:UpdatePanel runat="server" ID="MyParticularUpdatePanel" UpdateMode="Conditional" RenderMode="Inline"> 
<Triggers> 
// Your triggers here... 
</Triggers> 
<ContentTemplate> 
<div id="myContainerDiv" style="display:inline;"> 
    <asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false" Height="150px" EmptyDataText="No data."> 
    <Columns> 
     <asp:BoundField DataField="ID" HeaderText="My ID" /> 
    </Columns> 
    </asp:GridView> 
</div> 
</ContentTemplate> 
</asp:UpdatePanel> 

Je ne sais pas si ce code compilera exactement comme je l'ai écrit parce que je l'ai écrit en utilisant le bloc-notes.

Désolé pour mon mauvais anglais, je viens du Brésil.

Christophe Trevisani Chavey. http://www.christophetrevisani.com

Answer 6

Si vous êtes coincé avec une enveloppe sans style (qui il semble que vous êtes), mais souhaitez appliquer un style, donnez-lui une autre enveloppe , et appliquez votre style à la combinaison. Si un div simple a un peu de rembourrage que vous voulez vous débarrasser de (par exemple), ceci dans le ASPX:

<div id="crushGvDiv"> 
<asp:GridView ... > 
</div> 

et ceci pour CSS:

div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; } 

Answer 7

J'ai eu ce même problème en utilisant bootstrap réactif tables avec le contrôle GridView. J'ai pu corriger facilement (certains pourraient dire pirater) le problème en ajoutant cette ligne à la fonction prêt:

$("div.table-responsive > div").addClass('table-responsive'); 

Cela se traduira par quelque chose comme ce qui suit:

<div class=table-responsive> 
    <div class=table-responsive> 
     <table ..... 

Cela devrait fonctionner assez bien mais ce n'est pas la solution parfaite.

Answer 8

La solution la plus simple et la meilleure en utilisant la classe CSS "gridViewWrapperFix".

ASPX:

<div class="gridViewWrapperFix"> 

    <asp:GridView> 
    <%--the full gridview would go here--%> 
    </asp:GridView> 

</div> 

CSS:

/* styles the div that gets auto generated around and asp.net gridview */ 

.gridViewWrapperFix > div { 
    padding: 0; 
    margin: 0; 
    border: 3px solid red; 
}