How to rid of empty div that contains a GridView

Question

In ASP.NET Gridviews generate a table which generates a parent div container. This can break CSS layouts since there is no way to attach styles to the generated div. Is there a way to prevent the div from generating or a way to apply a style to it?

This was asked and marked as resolved here but MS just said that the div is needed for the Paging and Sorting functionality. Am I to understand that if I want to use the paging and sorting functionality I can't wrap my own div around it and apply a style? Thanks

Solution 1

I've never done this, but I my first guess would be you could grab the rendered html output just before it gets to the browser, remove the outer div and then htmltextwrite out your new rendered html in the prerender event or make a user or custom control to do this.

But then you risk breaking the functionality of the gridview but if you know you won't be using the features that use the div, then you might get away with it.

Solution 2

If you're stuck with an unstyled wrapper (which it appears that you are) but want to enforce a style, give it another wrapper, and apply your style to the combination. If a plain div has some padding you want to get rid of (for example), this in the aspx:

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

and this for CSS:

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

Solution 3

UPDATE

Ians response does remove much of the hackery from this but it also requires more effort on my part. I think we can have the best of both worlds if we do this just a little differently...

We no longer want to add a 'table-responsive' div to our source at all. We DO want to add a 'table-responsive-table' to our GridView classes.

ASP

    <asp:GridView ID=gvMain DataSourceID=dsMain RunAt=Server 
            CssClass='table table-responsive-table'>

Our JavaScript just needs to add the 'table-responsive' class to the parent div of those 'table-responsive-table' class tables that we've added.

JS

$( document ).ready(function() {
  $(".table-responsive-table").parent().addClass('table-responsive');
});

This will generate:

HTML

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

This new output should be relatively free of hackery related problems due to the fact that we have exactly the same output in the end as we would've otherwise had (except for the extra class on the table), we do not need to modify this code for every table (meaning we can write it once and it'll automatically be applied to all GridViews with the 'table-responsive-table' class), and we are not moving\copying the table data at all (this is important for speed, paging, and sorting). I know everyone says they have the best answer but I really do think this is the absolute best way of handling this.

NOTE: I have not tested this new code but it will probably work just fine.

Solution 4

An easy solution without render modifying:

I need to apply a style to the div generated by the gridview because it breaks my layout, so I created a div with id "myContainerDiv" and moved my GridView into it, and using jQuery I apply some styles.

Example:

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

I put this javascript in $(document).ready(function({}));. But if you use UpdatePanel, like I must use in this particular case, I execute this $().css() in every async postback. Without that the style will be lost if you execute some updatepanel where your gridview is contained. But I execute this $().css() only if a particular UpdatePanel is fired (no need to execute this javascript instruction in every every every async postback)

Example:

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

Resolved!

The entire page will look like that:

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

I don't know if this code will compile exactly like I wrote because I wrote it using notepad.

Sorry for my poor english, I'm from Brazil.

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

Solution 5

Same issue here, OMG it's so annoying. Glitch in rendering in IE6/7 when butting a div to the top of a gridview - the parent DIV causes a space between the two elements.

I've dug into the GridView code using reflector and found the problem:

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

This is called from render:

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

So, 'renderPanel' == not DesignMode. The DIV is used for paging and sorting when then gridview isn't in an UpdatePanel. On my site, all GridViews are in a UP plus they inherit from a custom gridview class, so my solution was to override the above function with the following:

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

The other solution could be to copy the render method from above and changed as required.

This smells of HACK - you've been warned, but might work for you, esp if you're not using paging/sorting.

View more solutions

Comments

[angelo]

Thank you but I believe you misread my question. I'm not trying to hide a gridview. I'm trying to rid of the empty div that is generated around the html table(the markup that a gridview generates) as a parent container.

[angelo]

The problem is I don't want to use a class on a table. Table elements behave differently than div elements and are a pain to use CSS with. I'd rather use divs if I can. Thanks.

[angelo]

It sounds like that would work but probably break the sorting/paging features if I removed the div. I guess there is no built in way to apply a style to the div and still have paging and sorting. I may try grabbing the html and adding a CSS class to the div. Thanks.

[Sean Kendle]

I would say use div#crushGvDiv > div (with the >) to make it more specific, just in case there are other child divs of #crushGvDiv, but great answer! I'm using it.

[fortboise]

Thanks for encouraging me to review finer points I don't use much. "Child combinator," and oo, "Adjacent sibling combinator" too. css-tricks.com/child-and-sibling-selectors

[Taylor Brown]

this just styles the gridview, not the div that gets auto generated around it.

[Ian]

I was also trying to add bootstrap table-responsive, but I did it without the additional <div>, instead getting the parent of the gridview: $("#<%= MyGridView.ClientID %>").parent().addClass('table-responsive');

[krowe2]

-1 this is an untested theory which, even if implemented, would be far slower and less efficient than many of the others answers here.