Gridview render contained in a DIV

Hi Experts

I need to either be able to reference (to apply style) or eliminate the DIV which renders with the gridview. In the example, i am not adding a datasource so the table which is ther grid doesn't appear, note the Div that does appear.

ASPX Example - with empty gridview
------------------------------------------
<form id="form1" runat="server">
START
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
END
</form>

HTML VIEW SOURCE
------------------------
<form name="form1" method="post" action="Default2.aspx" id="form1">
START
<div>

</div>
END
</form>

thanks
LVL 1
ValimaiAsked:
Who is Participating?
 
Bob LearnedCommented:
Very nice to know what you were trying to do, but unfortunately the GridView doesn't give you access to the <div> element AFAIK.

Bob
1
 
kraffayCommented:
Make the DIV server side and set visible = false.
0
 
ValimaiAuthor Commented:
The DIV is rendered as part of the <asp:GridView ID="GridView1" runat="server"> tag.

How can i stop it rendering or how can i access it?
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
ValimaiAuthor Commented:
Just look at my original post. I have the ASPX source and the view source output. otice the DIV is not in my ASPX, my gridview is generating it. I do not want that DIV tag or, how can i reference it to apply a style (it has no ID!).
0
 
darkpriestCommented:
Place a div around the gridview itself,

<div runat="server" id="blah" visible="false">  <---- you can make it invisible there

<asp:GridView.....

</asp:GridView>


</div>

Or on a page load

Me.blah.visible = false <-- References the div

If GridView1.rows.count = 0
  Me.blah.visible = false
EndIf

'----------- You could do that to make it invisible if there's nothing there.

It SHOULD... Should being the hopeful and operative word remove the <div> tag.
0
 
kraffayCommented:
You don't have much control over what ASP.NET generates inside the grid view control.
0
 
ValimaiAuthor Commented:
darkpriest, I tried placing another div outside, but the generated <div> seems to interfere. When I view and save source as HTML, I manually remove that DIV and my page works. Which is why i want to reference it or delete it.

Kraffay, it appears I need to intercept the render html writer and manually remove the div from the source before it is posted to the browser.

Anyone else please help?!?!
0
 
Bob LearnedCommented:
What problem is the <div> causing?

Bob
0
 
ValimaiAuthor Commented:
Here is my sample code. When run from the ASPX the grid scrolls, however the first column is not locked. Do a view source and save the html as DEFAULT.HTM next to the ASPX. Edit and remove the <div> </div> which is outside the table, which is the grid. When you run the HTM page, see how the first column stays locked.

(you may need to make you browser window smaller to see scroll bars on the grid)

thank you

locked-column.css
---------------------
TABLE { BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: whitesmoke}
THEAD TH {BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center}
THEAD TH.locked {BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center}
THEAD TH {Z-INDEX: 20; TOP: expression(document.getElementById("tbl-container").scrollTop-2)}
THEAD TH.locked {Z-INDEX: 30}
TD.locked {BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; Z-INDEX: 10; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff}
TH.locked {      BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; Z-INDEX: 10; LEFT: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft); POSITION: relative; BACKGROUND-COLOR: #ffeaff}
TD {      PADDING-RIGHT: 5px; PADDING-LEFT: 2px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; BORDER-LEFT: silver 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: right}

ASPX
------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" EnableViewState=false %>
<html>
<head runat="server">
    <LINK href="locked-column.css" type=text/css rel=stylesheet>
</head>
<body>
    <form id="form1" runat="server">
    <DIV id=tbl-container  style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 500px; ">
            <asp:GridView ID="gv" runat="server" OnRowDataBound="gv_RowDataBound" Width="200px">
            </asp:GridView>
            
    </div>
    </form>
</body>
</html>

CODE BEHIND
---------------
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("ID"));
        dt.Columns.Add(new DataColumn("NameOne"));
        dt.Columns.Add(new DataColumn("NameTwo"));
        dt.Columns.Add(new DataColumn("NameThree"));
        dt.Columns.Add(new DataColumn("NameFour"));
        dt.Columns.Add(new DataColumn("NameFive"));
        dt.Columns.Add(new DataColumn("NameSix"));
        dt.Columns.Add(new DataColumn("NameSeven"));

        DataRow dr;

        for (int i = 0; i < 40; i++)
        {
            dr = dt.NewRow();
            dr["ID"] = "123456789012345678901234567890";
            dr["NameOne"] = "123456789012345678901234567890";
            dr["NameTwo"] = "123456789012345678901234567890";
            dr["NameThree"] = "123456789012345678901234567890";
            dr["NameFour"] = "123456789012345678901234567890";
            dr["NameFive"] = "123456789012345678901234567890";
            dr["NameSix"] = "123456789012345678901234567890";
            dr["NameSeven"] = "123456789012345678901234567890";

            dt.Rows.Add(dr);
        }



        gv.DataSource = dt;
        gv.DataBind();

        gv.UseAccessibleHeader = true;
        gv.HeaderRow.TableSection = TableRowSection.TableHeader;
        gv.FooterRow.TableSection = TableRowSection.TableFooter;


    }

    protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        e.Row.Cells[0].CssClass = "locked";
    }

}
0
 
ValimaiAuthor Commented:
i will try to intercept the div element and remove it via or before the
protected override void Render(HtmlTextWriter writer)
event.
0
 
SanctusCommented:
I wonder if you could ever remove the div...
I am rendering HTML to a special device and I really would like to take it out..
0
 
agriffitCommented:
I'm looking at doing the same thing.  How did you acheive it in the end?
0
 
ValimaiAuthor Commented:
I have moved on from that project, but do see myself revisiting it this year.

A barbaric method could be to use Jquery. Use Jquery to find the control ID, and use a command to remove the parent wrapping element. The DIV in our case.
0
 
nomadsoloCommented:
To eliminate the div you can inherit from gridview and override:

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
        Me.RenderOverriden(writer, False)
    End Sub

    Private Sub RenderOverriden(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean)
        If (Not Me.Page Is Nothing) Then
            Me.Page.VerifyRenderingInServerForm(Me)
        End If
        Me.PrepareControlHierarchy()
        Me.RenderContents(writer)
    End Sub

I am not sure what the ramifications of this override, but it will remove the div.
0
 
ValimaiAuthor Commented:
thank you for taking the time to post that. Next time i have this situation, which could be soon, i will refer to this thread.

have a nice day.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.