ListView for ASP.NET Web Forms
Step 2 of 3: Add C1ListViewItems
Quick Start > Step 2 of 3: Add C1ListViewItems

In this step, you will add different types of C1ListViewItems to your existing C1ListView control.

  1. Click the opening <cc1:C1ListView> tag to reveal the control's smart tag .
  2. Click the smart tag to open the C1ListView Tasks Menu and check Mobile Mode.
  3. Insert your cursor between the <cc1:C1ListView> </cc1:C1ListView> tags.
  4. Add the following markup between the tags:
    <Items> </Items>
  5. Between the <Items> tags, add the following markup:
    <cc1:C1ListViewItem Text="Item 1" DataIcon="alert"></cc1:C1ListViewItem>

    This will add a general C1ListViewItem to your application.

  6. Next, we'll add a C1ListViewNestedItem to the application. This will create a submenu within your application:
    <cc1:C1ListViewNestedItem Text="More Options" DataIcon="arrow-l">
              <Items>
               <cc1:C1ListViewButtonItem Text="Right here!"></cc1:C1ListViewButtonItem>
               <cc1:C1ListViewDividerItem></cc1:C1ListViewDividerItem>
               <cc1:C1ListViewItem Text="This is another item"></cc1:C1ListViewItem>
              </Items>
     </cc1:C1ListViewNestedItem>
    
    
  7. To add a C1ListViewButtonItem to your application, add the following markup:
    <cc1:C1ListViewButtonItem Text="Click Me!"></cc1:C1ListViewButtonItem>
  8. The C1ListViewDividerItem adds a divider to your list. In the markup below, the Text property is set to 'Divider', so you can easily see it in the C1ListView control:
    <cc1:C1ListViewDividerItem Text="Divider"></cc1:C1ListViewDividerItem>
  9. The last two C1ListViewItems to add are a C1ListViewLinkItem and a C1ListViewInputItem. The C1ListViewLinkItem allows you to embed a link to an outside web site in your C1ListView control. The C1ListViewInputItem is set to textarea, giving you an editable textbox that automatically resizes to fit your data:
    <cc1:C1ListViewLinkItem Text="Follow the link" NavigateUrl="http://www.componentone.com/"></cc1:C1ListViewLinkItem>
    
    <cc1:C1ListViewInputItem Type="textarea" LabelText="Type your text here:"></cc1:C1ListViewInputItem>
    
    

 What you've accomplished:

In this step, you have added several different types of C1ListViewItem to your C1ListView control. In the next step, you will run your application and observe the run-time behavior of the C1ListView control.

See Also