Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

GridView - changing the html rendered to the page

Posted on 2006-07-18
5
915 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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 MVC 2 40
Problem to refer to value 8 62
jquery datatables, asp.net MVC 9 51
Code works but breaks when I add one section 4 20
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

839 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