Solved

GridView - changing the html rendered to the page

Posted on 2006-07-18
5
891 Views
Last Modified: 2008-01-09
Hi,

I am using a GridView control and need to fix the header row and possibly the footer, leaving the body scrollable. What I want to do is use divs around the header and body of a table so that I can control the scroll events. I have overridden the CreateRow method so that I can create the <thead> and <tbody> elements:

protected void grdCallList_RowCreated(object sender, GridViewRowEventArgs e)
    {
        switch (e.Row.RowType)
        {
            case (DataControlRowType.Header):
                e.Row.TableSection = TableRowSection.TableHeader;
               break;
             default:
                e.Row.TableSection = TableRowSection.TableBody;
                break;
        }
    }
so my output is:

<table>
 <thead>
  <tr>
   <td></td>
  </tr>
   </thead>
 <tbody>
  <tr>
   <td></td>
  </tr>
  </tbody>
</table>

My question is: Is there a way to amend the html of the grid view before it is rendered to the page so that I end up with something similar to this, (i.e. the div tags are inserted):

<table>
 <thead>
  <div>
  <tr>
   <td></td>
  </tr>
  </div>
 </thead>
 <tbody>
  <div>
  <tr>
   <td></td>
  </tr>
  </div>
 </tbody>
</table>

Then I can add in the div "style="height:320px;overflow-y:scroll;overflow-x:scroll;", etc afterwards.

Thanks in advance,
R
0
Comment
Question by:rallsaldo
  • 2
5 Comments
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 17145977
To say the truth I was very interested in your question very much and was investigating MSDN and other documentation for two days. I stoped at a point when I saw that to achieve results you're talking about you should rewrite entire gridview component.
Moreover the most dissapointing thing is that browser does not render such output correctly. I wrote this in notepad:
<html>
<head></head>
<body>
      <table>
            <thead>
                  <tr>
                        <th scope="col">Item</th>
                  </tr>
            </thead>
            <tbody>
                  <div style="height: 100px; overflow: scroll;">
                        <tr>
                              <td>a</td>
                        </tr><tr>
                              <td>b</td>
                        </tr><tr>
                              <td>c</td>
                        </tr><tr>
                              <td>a</td>
                        </tr><tr>
                              <td>b</td>
                        </tr><tr>
                              <td>c</td>
                        </tr><tr>
                              <td>a</td>
                        </tr><tr>
                              <td>b</td>
                        </tr><tr>
                              <td>c</td>
                        </tr><tr>
                              <td>a</td>
                        </tr><tr>
                              <td>b</td>
                        </tr><tr>
                              <td>c</td>
                        </tr>
                  </div>
            </tbody>
      </table>
</body>
</html>

I tried to open this file with both IE and Firefox. None of them render desired content. The DIV element comes right above the table.
So, if I'm not wrong, this idea is not meant to be realized.

Ramuncikas
0
 
LVL 4

Author Comment

by:rallsaldo
ID: 17147472
Thank you very much for spending the time researching this. If I can give a bit more detail (I think I may have got my divs in the wrong place in the posted sample), if the GridView outputs the following html:

<table width="100%" border="1">
          <thead>
               <tr>
                    <td width="200">Col1</td>
                    <td width="200">Col2</td>
                    <td width="200">Col3</td>
          <td width="200">Col4</td>
                    <td width="200">Col5</td>
                    <td width="200">Col6</td>
               </tr>
          </thead>
          <tbody>
      <tr>
          <td width="200">Square</td>
          <td width="200">Triangle</td>
          <td width="200">Circle</td>
          <td width="200">Square</td>
          <td width="200">Triangle</td>
          <td width="200">Circle</td>
              </tr>
              <tr>
         <td width="200">A</td>
          <td width="200">B</td>
          <td width="200">C</td>
          <td width="200">A</td>
          <td width="200">B</td>
          <td width="200">C</td>
              </tr>
              <tr>
          <td width="200">1</td>
          <td width="200">2</td>
          <td width="200">3</td>
          <td width="200">1</td>
          <td width="200">2</td>
          <td width="200">3</td>
              </tr>
          </tbody>
</table>

Then the thead's and tbody's are replaced so that there is an additional table, with divs around the GridViews output like so:

<table border="1" width="100%">
  <tr>
    <td width="100%">
    <div onScroll="scrollBars('div1')" name="div1" id="div1" style="display:block;overflow:auto;height:200px;width:100px;">
     <table width="100%" border="1">
          <thead>
               <tr>
                    <td width="200">Col1</td>
                    <td width="200">Col2</td>
                    <td width="200">Col3</td>
                    <td width="200">Col4</td>
                    <td width="200">Col5</td>
                    <td width="200">Col6</td>
               </tr>
          </thead>
      </table>
     </td>
    </div>
   </tr>
   <tr>
     <td>
      <div onScroll="scrollBars('div2')" name="div2" id="div2" style="display:block;overflow:auto;height:200px;width:100px;">
     <table width="100%" border="1">
          <tbody>
      <tr>
          <td width="200">Square</td>
          <td width="200">Triangle</td>
          <td width="200">Circle</td>
          <td width="200">Square</td>
          <td width="200">Triangle</td>
          <td width="200">Circle</td>
              </tr>
              <tr>
          <td width="200">A</td>
          <td width="200">B</td>
          <td width="200">C</td>
          <td width="200">A</td>
          <td width="200">B</td>
          <td width="200">C</td>
              </tr>
              <tr>
        <td width="200">1</td>
        <td width="200">2</td>
        <td width="200">3</td>
        <td width="200">1</td>
           <td width="200">2</td>
         <td width="200">3</td>
              </tr>
           </tbody>
          </table>
         </div>
        </td>
   </tr>
</table>

My original page would have javascript in, something like:
<script language="JavaScript">
       function scrollBars(sObject)
             {
              if (sObject=='div1')
                {
                div2.scrollLeft=div1.scrollLeft;
                }
              if (sObject=='div2')
                {
                div1.scrollLeft=div2.scrollLeft;
                }
        }
</script>

So when it is output in full, the two divs scroll together...

<html>
<head>
<script language="JavaScript">


       function scrollBars(sObject)
             {

              if (sObject=='div1')
                {
                div2.scrollLeft=div1.scrollLeft;
                }

              if (sObject=='div2')
                {

                div1.scrollLeft=div2.scrollLeft;
                }

        }

</script>
</head>
<body>
<table border="1" width="100%">
  <tr>
        <td width="100%">
         <div onScroll="scrollBars('div1')" name="div1" id="div1" style="display:block;overflow:auto;height:200px;width:100px;">
     <table width="100%" border="1">
          <thead>
               <tr>
                    <td width="200">Col1</td>
                    <td width="200">Col2</td>
                    <td width="200">Col3</td>
                              <td width="200">Col4</td>
                    <td width="200">Col5</td>
                    <td width="200">Col6</td>
               </tr>
          </thead>
      </table>
     </td>
    </div>
   </tr>
   <tr>
     <td>
           <div onScroll="scrollBars('div2')" name="div2" id="div2" style="display:block;overflow:auto;height:200px;width:100px;">
     <table width="100%" border="1">
          <tbody>
                   <tr>
                      <td width="200">Square</td>
                      <td width="200">Triangle</td>
                      <td width="200">Circle</td>
                      <td width="200">Square</td>
                        <td width="200">Triangle</td>
                      <td width="200">Circle</td>
              </tr>
              <tr>
                      <td width="200">A</td>
                      <td width="200">B</td>
                      <td width="200">C</td>
                      <td width="200">A</td>
                        <td width="200">B</td>
                      <td width="200">C</td>
              </tr>
              <tr>
                      <td width="200">1</td>
                      <td width="200">2</td>
                      <td width="200">3</td>
                      <td width="200">1</td>
                        <td width="200">2</td>
                      <td width="200">3</td>
              </tr>

          </tbody>
      </table>
      </div>
        </td>

         </tr>
</table>

<table width="100%" border="1">
          <thead>
               <tr>
                    <td width="200">Col1</td>
                    <td width="200">Col2</td>
                    <td width="200">Col3</td>
                              <td width="200">Col4</td>
                    <td width="200">Col5</td>
                    <td width="200">Col6</td>
               </tr>
          </thead>
          <tbody>
                   <tr>
                      <td width="200">Square</td>
                      <td width="200">Triangle</td>
                      <td width="200">Circle</td>
                      <td width="200">Square</td>
                        <td width="200">Triangle</td>
                      <td width="200">Circle</td>
              </tr>
              <tr>
                      <td width="200">A</td>
                      <td width="200">B</td>
                      <td width="200">C</td>
                      <td width="200">A</td>
                        <td width="200">B</td>
                      <td width="200">C</td>
              </tr>
              <tr>
                      <td width="200">1</td>
                      <td width="200">2</td>
                      <td width="200">3</td>
                      <td width="200">1</td>
                        <td width="200">2</td>
                      <td width="200">3</td>
              </tr>

          </tbody>
</table>
</body>
</html>


Cheers,
R
0
 
LVL 14

Accepted Solution

by:
Ramuncikas earned 500 total points
ID: 17173610
I suppose you're trying to achieve functionality similar to windows grid where you can scroll left&right/up&down and have fixed header row at the same time. If so, here is a link:
http://www.codeguru.com/csharp/.net/net_asp/controls/article.php/c11443/
Here is a solution to implement fixed headers for gridview. One thing left to solve would be scrolling left&right.

Forcing gridview to render html the way you want would be a hard work. Datagrid itself inherits from CompositeDataBoundControl, and CompositeDataBoundControl inherits from DataBoundControl and so on. This chain has nothing to do with html rendered. It's all about gridrows. They inherit from TableRow. Here is where "investigation" should start. GridViewRow object does not have Render method. TableRow does, so it's a TableRow who is responsible for rendering html. Taking all this in mind you should build a control inherited from GridView and override it's Rows property to return your custom collection of custom rows. Tuff but I think possible.

R.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
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…
This video discusses moving either the default database or any database to a new volume.
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

705 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now