Binding Data to Tables with MS AJAX and the ListView Control

If you've used the client-side MS AJAX controls then you know that there's no such thing as a GridView control like we're used to having on the server-side (although a GridView could be used with an MS AJAX Update Panel of course to get AJAX functionality).  When I first started using the ListView client-side control I had a hard time getting tables to show data property.  If you're unfamiliar with the ListView control it can be defined using XML Script:

    <listView id="searchResults" cssClass="listView" itemTemplateParentElementId="searchResults_itemTemplateParent">
            <layoutTemplate>
              <template layoutElement="searchResults_layoutTemplate" />
            </layoutTemplate>
            <itemTemplate>
              <template layoutElement="searchResults_itemTemplate">
                <label cssClass="lbl" id="searchResults_layoutTemplate_CustomerID">
                  <bindings>
                    <binding dataPath="CustomerID" property="text" />
                  </bindings>
                </label>
                <label cssClass="lbl" id="searchResults_layoutTemplate_ContactName">
                  <bindings>
                    <binding dataPath="ContactName" property="text" />
                  </bindings>
                </label>
                <label cssClass="lbl" id="searchResults_layoutTemplate_CompanyName">
                  <bindings>
                    <binding dataPath="CompanyName" property="text" />
                  </bindings>
                </label>
                <label cssClass="lbl" id="searchResults_layoutTemplate_Country">
                  <bindings>
                    <binding dataPath="Country" property="text" />
                  </bindings>
                </label>               
              </template>
            </itemTemplate>
            <emptyTemplate>
              <template layoutElement="divNoData"/>
            </emptyTemplate>
    </listView>

Basically you define a parent container and an item template container as well as data bindings for each item (Labels in this example) within the item template.  While this defines the ListView and its associated children and bindings, you have to tie all of the IDs shown above to HTML tags within the page.  Most of the examples you see on the Web show the ListView with <ul> and <li> tags to output a simple list.  However, I wanted to output a table similiar to what a GridView control would output.  I tried making the <table> tag the item template parent element but IE rendered absolutely nothing when I did that.  So, I ended up writing out a table for each item (row) which wasn't optimal:

 <div style='display: none;'>
             <div id="searchResults_layoutTemplate">            
                  <div id="searchResults_itemTemplateParent">
                      <div id="searchResults_itemTemplate">
                          <div class="item">
                            <table width="99%">
                                <tr>                               
                                    <td width="25%">
                                        <span id="searchResults_layoutTemplate_CustomerID"></span>
                                    </td>
                                    <td width="25%">
                                        <span id="searchResults_layoutTemplate_ContactName"></span>
                                    </td>
                                    <td width="25%">
                                        <span id="searchResults_layoutTemplate_CompanyName"></span>
                                    </td>
                                    <td width="25%">
                                        <span id="searchResults_layoutTemplate_Country"></span>
                                    </td>           
                                  </tr>                
                            </table>
                          </div>
                      </div>
                  </div>
          </div>                  
   </div>

After playing around with it for awhile, I found out that I could use the <tbody> tag as the item template parent and then things worked as I originally intended.  Notice that the item template parent ID is defined on the <tbody> tag and the item template ID is defined on the <tr> tag.  

        <div style='display: none;'>
              <div id="searchResults_layoutTemplate">
                  <table width="99%">
                      <tbody id="searchResults_itemTemplateParent">
                          <tr id="searchResults_itemTemplate">
                              <td width="25%">
                                  <span id="searchResults_layoutTemplate_CustomerID"></span>
                              </td>
                              <td width="25%">
                                  <span id="searchResults_layoutTemplate_ContactName"></span>
                              </td>
                              <td width="25%">
                                  <span id="searchResults_layoutTemplate_CompanyName"></span>
                              </td>
                              <td width="25%">
                                  <span id="searchResults_layoutTemplate_Country"></span>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
        </div>

Now as databinding occurs the <table> will be written out once and each item will result in a <tr>...<td>Content</td>...</tr> output.  With a little work you can use the ListView client-side MS AJAX control to output tables just like the GridView control.

comments powered by Disqus

2 Comments

  • when would you use an Ajax listview as opposed to a gridView control ?

  • A good question. If you want to stick to your server-side programming you could just use the GridView control with an . However, if you want to just handle things client-side (using the MS AJAX Library controls) then you could use the ListView. Ultimately it'll look the same to the end user....just depends on what you're more comfortable using and the approach you want to take.

    Dan

Comments have been disabled for this content.