[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 952
  • Last Modified:

GridView - changing the html rendered to the page

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
rallsaldo
Asked:
rallsaldo
  • 2
1 Solution
 
RamuncikasCommented:
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
 
rallsaldoAuthor Commented:
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
 
RamuncikasCommented:
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now