[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

GridView - changing the html rendered to the page

Posted on 2006-07-18
5
Medium Priority
?
944 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
[X]
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
  • 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 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
This course is ideal for IT System Administrators working with VMware vSphere and its associated products in their company infrastructure. This course teaches you how to install and maintain this virtualization technology to store data, prevent vuln…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Suggested Courses

649 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