ListView ItemTemplate and AlternatingItemTemplate

by plippard 12. May 2008 13:23

The ASP.NET 3.5 ListView server control provides an ItemTemplate and an AlternatingItemTemplate.  Only the ItemTemplate is required for defining each row's content.  The AlternatingItemTemplate can be used to define row content for odd numbered rows, however quite often the even and odd rows are identical with the exception that a different CSS class definition needs to be used, so to provide a different visible experience to the user.  Rather than duplicate the bulk of the ItemTemplate into the AlternatingItemTemplate, one can provide inline code to examine the container's row number and return a specific even or odd CSS class name, illustrated as follows:

   1:  <asp:ListView ID="listViewSort" 
   2:      DataSourceID="ObjMenu" 
   3:      DataKeyNames="Name"
   4:      runat="server">
   5:      <LayoutTemplate>
   6:          <table runat="server" 
   7:              class="listViewGrid"
   8:              cellspacing="0"
   9:              border="0">
  10:              
  11:              <tr runat="server" id="itemPlaceholder" />
  12:          
  13:          </table>    
  14:      </LayoutTemplate>
  15:      <ItemTemplate>
  16:          <tr class="<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ? "itemRow" : "altItemRow" %>">
  17:              <td align="left" style="width: 200px;">
  18:                  <asp:Label runat="server" 
  19:                      Text='<%# Eval("Name") %>' />
  20:              </td>
  21:              <td align="right" style="width: 100px;">   
  22:                  <asp:Label runat="server" 
  23:                      Text='<%# Eval("Price") %>' />
  24:              </td>
  25:              <td align="left" style="width: 400px;">
  26:                  <asp:Label runat="server" 
  27:                      Text='<%# Eval("Description") %>' />
  28:              </td>
  29:              <td align="right" style="width: 100px;">
  30:                  <asp:Label runat="server" 
  31:                      Text='<%# Eval("Calories") %>' />
  32:              </td>
  33:          </tr>
  34:      </ItemTemplate>
  35:  </asp:ListView>    

If the inline processing is more complicated than one would prefer for inline code, then one can invoke a protected web page method to accomplish similar or more complicated tasks, illustrated as follows:

   1:  <asp:ListView ID="listViewSort" 
   2:      DataSourceID="ObjMenu" 
   3:      DataKeyNames="Name"
   4:      runat="server">
   5:      <LayoutTemplate>
   6:          <table runat="server" 
   7:              class="listViewGrid"
   8:              cellspacing="0"
   9:              border="0">
  10:              
  11:              <tr runat="server" id="itemPlaceholder" />
  12:          
  13:          </table>
  14:      </LayoutTemplate>
  15:      <ItemTemplate>
  16:          <tr class="<%# GetCssName(Container) %>">
  17:              <td align="left" style="width: 200px;">
  18:                  <asp:Label runat="server" 
  19:                      Text='<%# Eval("Name") %>' />
  20:              </td>
  21:              <td align="right" style="width: 100px;">   
  22:                  <asp:Label runat="server" 
  23:                      Text='<%# Eval("Price") %>' />
  24:              </td>
  25:              <td align="left" style="width: 400px;">
  26:                  <asp:Label runat="server" 
  27:                      Text='<%# Eval("Description") %>' />
  28:              </td>
  29:              <td align="right" style="width: 100px;">
  30:                  <asp:Label runat="server" 
  31:                      Text='<%# Eval("Calories") %>' />
  32:              </td>
  33:          </tr>
  34:      </ItemTemplate>
  35:  </asp:ListView>    

The protected web page method in turn can provide simple or more complex logic.  In this illustration, the same logic is provided as the inline code example:

   1:  protected string GetCssName(object container)
   2:  {
   3:      if (container != null)
   4:      {
   5:          if (container.GetType() == typeof(ListViewDataItem))
   6:          {
   7:              if ((((ListViewDataItem)container).DisplayIndex % 2) == 0)
   8:              {
   9:                  return "itemRow";
  10:              }
  11:              else
  12:              {
  13:                  return "altItemRow";
  14:              }
  15:          }
  16:      }
  17:      return null;
  18:  }

 

While the ListView server control AlternatingItemTemplate is quite useful, its use should be limited to instances where there is truly differing content requirements between even and odd numbered rows.  The above illustrations also works equally as well with my previously posted ListViewSort custom control.

Tags: ,

ListView (Asp.Net 3.5)

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading



Powered by BlogEngine.NET 1.6.1.0
Theme by Philip Lippard  (Original by Mads Kristensen)

Calendar

<<  July 2010  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar