Solved

Gridview render contained in a DIV

Posted on 2006-11-28
15
9,490 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:Valimai
  • 7
  • 2
  • 2
  • +4
15 Comments
 
LVL 9

Expert Comment

by:kraffay
ID: 18033434
Make the DIV server side and set visible = false.
0
 
LVL 1

Author Comment

by:Valimai
ID: 18033780
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
 
LVL 1

Author Comment

by:Valimai
ID: 18033845
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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 4

Assisted Solution

by:darkpriest
darkpriest earned 100 total points
ID: 18034703
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
 
LVL 9

Assisted Solution

by:kraffay
kraffay earned 100 total points
ID: 18034715
You don't have much control over what ASP.NET generates inside the grid view control.
0
 
LVL 1

Author Comment

by:Valimai
ID: 18034897
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
 
LVL 96

Expert Comment

by:Bob Learned
ID: 18037163
What problem is the <div> causing?

Bob
0
 
LVL 1

Author Comment

by:Valimai
ID: 18041033
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
 
LVL 96

Accepted Solution

by:
Bob Learned earned 300 total points
ID: 18044534
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
 
LVL 1

Author Comment

by:Valimai
ID: 18049624
i will try to intercept the div element and remove it via or before the
protected override void Render(HtmlTextWriter writer)
event.
0
 
LVL 3

Expert Comment

by:Sanctus
ID: 20636094
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
 

Expert Comment

by:agriffit
ID: 23669135
I'm looking at doing the same thing.  How did you acheive it in the end?
0
 
LVL 1

Author Comment

by:Valimai
ID: 23676315
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
 

Expert Comment

by:nomadsolo
ID: 24952139
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
 
LVL 1

Author Comment

by:Valimai
ID: 24956800
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.net Have sliders change in order 2 22
Initial get page response times and IIS8 15 49
jquery progress bar 3 40
EF5: Question about Metadata Artifact Processing 4 15
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question