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

DetailsView Control Example

Example Summary and Logic

The DetailsView control is used to display one or more fields from a single data record. The unadapted version of the DetailsView control renders these fields as rows in an HTML <table>. An adapter can be used to render an unordered list (<ul> and <li> tags) instead.

The unadapted DetailsView uses table cells (<td> tags) to separate each field's descriptive (header) text from its value. The adapted control uses <span> tags instead. By styling these <ul>, <li> and <span> tags with CSS you can customize nearly every aspect of the DetailsView's appearance.


Get listed here

Working Example

Author Details
  • ID998-72-3567
  • Last nameRinger
  • First nameAlbert
  • Phone801 826-0752
  • Street67 Seventh Av.
  • CitySalt Lake City
  • StateUT
  • ZIP code84152
  • Contracttrue
  • Edit
12

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

<div class="PrettyDetailsView" id="ctl00_ctl00_MainContent_LiveExample_DetailsView1">
  <div class="AspNet-DetailsView">
      <div class="AspNet-DetailsView-Header">
        Author Details
      </div>
      <div class="AspNet-DetailsView-Data">
        <ul>
          <li>
            <span class="AspNet-DetailsView-Name">ID</span><span class="AspNet-DetailsView-Value">998-72-3567</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">Last name</span><span class="AspNet-DetailsView-Value">Ringer</span>
          </li>
          <li>
            <span class="AspNet-DetailsView-Name">First name</span><span class="AspNet-DetailsView-Value">Albert</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">Phone</span><span class="AspNet-DetailsView-Value">801 826-0752</span>
          </li>
          <li>
            <span class="AspNet-DetailsView-Name">Street</span><span class="AspNet-DetailsView-Value">67 Seventh Av.</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">City</span><span class="AspNet-DetailsView-Value">Salt Lake City</span>
          </li>
          <li>
            <span class="AspNet-DetailsView-Name">State</span><span class="AspNet-DetailsView-Value">UT</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name">ZIP code</span><span class="AspNet-DetailsView-Value">84152</span>
          </li>
          <li>
            <span class="AspNet-DetailsView-Name">Contract</span><span class="AspNet-DetailsView-Value">true</span>
          </li>
          <li class="AspNet-DetailsView-Alternate">
            <span class="AspNet-DetailsView-Name"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Edit$0')">Edit</a></span>
          </li>
        </ul>
      </div>
      <div class="AspNet-DetailsView-Pagination">
        <span class="AspNet-DetailsView-ActivePage">1</span><a class="AspNet-DetailsView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')">2</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

<div>
  <table cellspacing="2" CssSelectorClass="PrettyDetailsView" border="0" id="ctl00_ctl00_MainContent_LiveExample_DetailsView1" style="background-color:White;border-style:None;">
    <tr style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;">
      <td colspan="2">Author Details</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">ID</td><td>998-72-3567</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">Last name</td><td>Ringer</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">First name</td><td>Albert</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">Phone</td><td>801 826-0752</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">Street</td><td>67 Seventh Av.</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">City</td><td>Salt Lake City</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">State</td><td>UT</td>
    </tr><tr style="color:#333333;background-color:#F7F6F3;">
      <td style="font-weight:bold;">ZIP code</td><td>84152</td>
    </tr><tr style="color:#333333;background-color:White;">
      <td style="font-weight:bold;">Contract</td><td>true</td>
    </tr><tr style="color:Blue;background-color:#F7F6F3;">
      <td colspan="2"><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Edit$0')" style="color:Blue;">Edit</a></td>
    </tr><tr align="center" style="color:Cyan;background-color:#284775;">
      <td colspan="2"><table border="0">
        <tr>
          <td><span>1</span></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$DetailsView1','Page$2')" style="color:Cyan;">2</a></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>