Cómo deshacerse de div vacío que contiene un GridView

Question

En ASP.NET Gridviews genera una tabla que genera un contenedor div principal. Esto puede romper los diseños de CSS ya que no hay forma de adjuntar estilos al div generado. ¿Hay alguna manera de evitar que se genere div o una forma de aplicarle un estilo?

Esto se solicitó y marcó como resuelto here pero MS acaba de decir que se necesita div para la funcionalidad de paginación y ordenación. ¿Debo entender que si quiero usar la funcionalidad de paginación y clasificación no puedo envolver mi propio div y aplicar un estilo? Gracias

Answer 1

que nunca he hecho esto, pero mi primera conjetura sería que pudiera tomar la salida HTML representado justo antes de que llegue al navegador, eliminar el div externo y luego htmltextwrite su nuevo html renderizado en el evento prerender o haga un usuario o control personalizado para hacer esto.

Pero entonces corre el riesgo de romper la funcionalidad de la vista de cuadrícula, pero si sabe que no utilizará las funciones que usan div, entonces puede salirse con la suya.

Answer 2

Puede colocarlo dentro de un panel asp: y establecer la propiedad Visible en el panel en falso si la tabla está vacía.

Answer 3

Puede definir un CssClass explícito para su Gridviews para hacer uso de.

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

A continuación, defina una clase css:

.nameOfStyleClass 
{ 
    < Style stuff > 
} 

Answer 4

Mismo problema aquí, OMG es así que molesto. Fallo en el renderizado en IE6/7 cuando se empalma un div en la parte superior de una vista de cuadrícula: el DIV padre causa un espacio entre los dos elementos.

He excavado en el código GridView usando reflector y encontré el problema:

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 

esto se le llama de render:

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

Así, == 'renderPanel' no DesignMode. El DIV se utiliza para paginación y clasificación cuando luego gridview no es en un UpdatePanel. En mi sitio, todos los GridViews están en una UP además de que heredan de una clase gridview costumbre, por lo que mi solución fue reemplazar la función anterior con la siguiente:

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

La otra solución podría ser para copiar el método render de arriba y cambiado según sea necesario.

Huele a HACK. Ha recibido una advertencia, pero podría funcionar para usted, especialmente si no utiliza paginación/clasificación.

Answer 5

Una solución fácil y sin render modificación:

I necesidad de aplicar un estilo a la div generado por el gridview porque rompe mi diseño, por lo que creó un div con id "myContainerDiv" y se ha llevado mi GridView en ella y usando jQuery, aplico algunos estilos.

Ejemplo:

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

Pongo esto en Javascript $ (document) ready (function ({})) ;. Pero si usa UpdatePanel, como debo usar en este caso particular, ejecuto este $(). Css() en cada devolución de datos asíncrona. Sin eso, el estilo se perderá si ejecuta algún panel de actualización donde está contenida su vista de cuadrícula. Pero yo haga esto $() css() sólo si un UpdatePanel particular, es despedido (sin necesidad de ejecutar esta instrucción JavaScript en cada cada cada devolución de datos asincrónica)

Ejemplo:.

<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> 

Resuelto!

Toda la página se parecerá a lo siguiente:

<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> 

No sé si este código se compilará exactamente igual que escribí porque la escribí usando el bloc de notas.

Lo siento por mi pobre inglés, soy de Brasil.

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

Answer 6

Si le pegan con una envoltura sin estilo (que parece que son), pero desea aplicar un estilo, darle otra envoltura, y aplicar su estilo a la combinación. Si un div llanura tiene algo de relleno que quieren deshacerse de (por ejemplo), esto en el aspx:

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

y esto por CSS:

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

Answer 7

tenía este mismo problema usando arranque sensible tablas con el control GridView. Yo era capaz de solucionar con facilidad (algunos podrían decir truco) el problema agregando esta línea a la función de lista:

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

Esto dará lugar a algo como lo siguiente:

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

Esto debería funcionar bastante bien, pero no es la solución perfecta.

Answer 8

La mejor y más simple solución usando la clase 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; 
}