Use Adapters?

The adapters are currently turned on. Do you want to keep them enabled?

more about the adapters

Theme Chooser

The examples can use either a "basic" or "enhanced" theme or no theme at all.

more about CSS & themes

GridView Control Example

Example Summary and Logic

The goal of the adapter for the GridView control is to create a <table> that is slimmer and better organized than what is produced without the adapter. You could, of course, rewrite this adapter to completely eliminate the <table>, replacing it with a variety of <div> tags, etc. However, a grid, fundamentally, is a table so it seems logical to leave it as such.

The adapted GridView eliminates the use of inline styles. Rows within the <table> are organized into <thead>, <tfoot> and <tbody> sections. These make it easier to read and understand the markup. More importantly, these sections make it easy to create CSS rules that govern the appearance of particular rows within the <table>.


Get listed here

Working Example

What happens when we run the Math methods over and over again? Here are some raw timing statistics.

1 2 3
Operation Repetitions Total test duration milliseconds Average cost per rep microseconds
Abs 63812 31 0.4889
Acos 69303 31 0.4502
Asin 69600 31 0.4483
Atan 70803 31 0.4407
Atan2 66613 31 0.4684
BigMul 78285 31 0.3986
Ceiling 77282 31 0.4037
Cos 70839 31 0.4404
Cosh 69629 31 0.4481
DivRem 60829 31 0.5129
1 2 3

HTML Snippets

Snippet of HTML when using the adapters

ASP.NET 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<div class="PrettyGridView" id="ctl00_ctl00_MainContent_LiveExample_GridView1">
  <div class="AspNet-GridView">
      <div class="AspNet-GridView-Pagination AspNet-GridView-Top">
        <span>1</span>
        <a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$2')">2</a>
        <a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$3')">3</a>
      </div>
      <table cellpadding="0" cellspacing="0" summary="">
        <thead>
          <tr>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Operation')">Operation</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Reps')">Repetitions</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Duration')">Total test duration milliseconds</a></th>
            <th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Average')">Average cost per rep microseconds</a></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Abs</td>
            <td>63812</td>
            <td>31</td>
            <td>0.4889</td>
          </tr>
          <tr class="AspNet-GridView-Alternate">
            <td>Acos</td>
            <td>69303</td>
            <td>31</td>
            <td>0.4502</td>
          </tr>
          <tr>
            <td>Asin</td>
            <td>69600</td>
            <td>31</td>
            <td>0.4483</td>
          </tr>
          <tr class="AspNet-GridView-Alternate">
            <td>Atan</td>
            <td>70803</td>
            <td>31</td>
            <td>0.4407</td>
          </tr>
          <tr>
            <td>Atan2</td>
            <td>66613</td>
            <td>31</td>
            <td>0.4684</td>
          </tr>
          <tr class="AspNet-GridView-Alternate">
            <td>BigMul</td>
            <td>78285</td>
            <td>31</td>
            <td>0.3986</td>
          </tr>
          <tr>
            <td>Ceiling</td>
            <td>77282</td>
            <td>31</td>
            <td>0.4037</td>
          </tr>
          <tr class="AspNet-GridView-Alternate">
            <td>Cos</td>
            <td>70839</td>
            <td>31</td>
            <td>0.4404</td>
          </tr>
          <tr>
            <td>Cosh</td>
            <td>69629</td>
            <td>31</td>
            <td>0.4481</td>
          </tr>
          <tr class="AspNet-GridView-Alternate">
            <td>DivRem</td>
            <td>60829</td>
            <td>31</td>
            <td>0.5129</td>
          </tr>
        </tbody>
      </table>
      <div class="AspNet-GridView-Pagination AspNet-GridView-Bottom">
        <span>1</span>
        <a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$2')">2</a>
        <a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$3')">3</a>
      </div>

  </div>
</div>

Snippet of HTML when not using the adapters

ASP.NET 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<div>
  <table cellspacing="0" cellpadding="2" rules="all" CssSelectorClass="PrettyGridView" border="1" id="ctl00_ctl00_MainContent_LiveExample_GridView1" style="border-collapse:collapse;">
    <tr style="color:Cyan;background-color:#284775;">
      <td colspan="4"><table border="0">
        <tr>
          <td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$2')" style="color:Cyan;">2</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$3')" style="color:Cyan;">3</a></td>
        </tr>
      </table></td>
    </tr><tr style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;">
      <th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Operation')" style="color:#F7F6F3;">Operation</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Reps')" style="color:#F7F6F3;">Repetitions</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Duration')" style="color:#F7F6F3;">Total test duration milliseconds</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Sort$Average')" style="color:#F7F6F3;">Average cost per rep microseconds</a></th>
    </tr><tr style="color:#333333;background-color:White;">
      <td>Abs</td><td>63812</td><td>31</td><td>0.4889</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td>Acos</td><td>69303</td><td>31</td><td>0.4502</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td>Asin</td><td>69600</td><td>31</td><td>0.4483</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td>Atan</td><td>70803</td><td>31</td><td>0.4407</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td>Atan2</td><td>66613</td><td>31</td><td>0.4684</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td>BigMul</td><td>78285</td><td>31</td><td>0.3986</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td>Ceiling</td><td>77282</td><td>31</td><td>0.4037</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td>Cos</td><td>70839</td><td>31</td><td>0.4404</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td>Cosh</td><td>69629</td><td>31</td><td>0.4481</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td>DivRem</td><td>60829</td><td>31</td><td>0.5129</td>
    </tr><tr style="color:Cyan;background-color:#284775;">
      <td colspan="4"><table border="0">
        <tr>
          <td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$2')" style="color:Cyan;">2</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$GridView1','Page$3')" style="color:Cyan;">3</a></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>