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

FormView Control Example

Example Summary and Logic

The FormView control is similar to the DetailsView. Rather than using field tags like <asp:BoundField>, the FormView specifies its data using template tags like <ItemTemplate>.

Normally (i.e., when no adapter is used) the FormView renders a <table> to lay out the header, footer, paging and item data areas.

An adapter can be used to replace this <table> with a few nested <div> tags whose appearance and position is easily styled with CSS.


Working Example

Author Details
Abraham Bennet
6223 Bateman St.
Berkeley, CA
94705
415 658-9932

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
<div class="PrettyFormView" id="ctl00_ctl00_MainContent_LiveExample_FormView1">
  <div class="AspNet-FormView">
      <div class="AspNet-FormView-Header">
        Author Details
      </div>
      <div class="AspNet-FormView-Data">
        
                <div class="Sample-Contact">
                    <div class="Sample-Name">
                        Abraham Bennet
                    </div>
                    <div class="Sample-Address">
                        6223 Bateman St.<br />
                        Berkeley, CA<br />
                        94705
                    </div>
                    <div class="Sample-Phone">
                        415 658-9932
                    </div>
                </div>
            
      </div>
      <div class="AspNet-FormView-Pagination">
        <span class="AspNet-FormView-ActivePage">1</span><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$2')">2</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$3')">3</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$4')">4</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$5')">5</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$6')">6</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$7')">7</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$8')">8</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$9')">9</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$10')">10</a><a class="AspNet-FormView-OtherPage" href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$11')">...</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
<table cellspacing="2" CssSelectorClass="PrettyFormView" border="0" id="ctl00_ctl00_MainContent_LiveExample_FormView1" 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 colspan="2">
                <div class="Sample-Contact">
                    <div class="Sample-Name">
                        Abraham Bennet
                    </div>
                    <div class="Sample-Address">
                        6223 Bateman St.<br />
                        Berkeley, CA<br />
                        94705
                    </div>
                    <div class="Sample-Phone">
                        415 658-9932
                    </div>
                </div>
            </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$FormView1','Page$2')" style="color:Cyan;">2</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$3')" style="color:Cyan;">3</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$4')" style="color:Cyan;">4</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$5')" style="color:Cyan;">5</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$6')" style="color:Cyan;">6</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$7')" style="color:Cyan;">7</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$8')" style="color:Cyan;">8</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$9')" style="color:Cyan;">9</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$10')" style="color:Cyan;">10</a></td><td><a href="javascript:__doPostBack('ctl00$ctl00$MainContent$LiveExample$FormView1','Page$11')" style="color:Cyan;">...</a></td>
      </tr>
    </table></td>
  </tr>
</table>