ASP.NET ListView Control

• ListView sample - 12.58 KB

Some time ago, I needed to render hierarchical data to a <ul>/<li> elements structure and also be able to render a special attribute to the <li> HTML elements.

Using TreeView control, I found no better way than re-implement the Render method, loosing the out-of-the-box binding process.

Since I want to have a control similar to TreeView with all its binding richness, I decide to write a ListView control.

This is the typical declaration I want to achieve:

<NG:ListView ID="orderedlistView1" 
runat="server" DataSourceID="SiteMapDataSource1" 
    Mode="Ordered">

  <DataBindings>

    <NG:ListNodeBinding DataMember="SiteMapNode" 
    AttributeField="Url" TextField="Title" />

    <NG:ListNodeBinding DataMember="SiteMapNode" AttributeField="Url"
        TextField="Url" Depth="1"/>

    <NG:ListNodeBinding DataMember="SiteMapNode" AttributeField="Title"
        TextField="Title" Depth="2"/>

  </DataBindings>

</NG:ListView>

It looks pretty familiar...

In ListView control, you can set the Mode property to choose whether to render an ordered list (<ol>) or an unordered list (<ul>).

Using the ListNodeBinding, you can also use the AttributeField property to specify additional attributes to rendered in the <li> HTML element (example: <li Url="my Url" >some text</li>).

Also, there's no hierarchy depth limit.