ASP.NET MVC ListBox - Grid-Like Multi-Columns with Icons

 
PRODUCT NAME
PRICE
  • Chai
    Chai
    $18.00
    1
  • Chang
    Chang
    $19.00
    2
  • Aniseed Syrup
    Aniseed Syrup
    $10.00
    3
  • Chef Anton's Cajun Seasoning
    Chef Anton's Cajun Seasoning
    $22.00
    4
  • Chef Anton's Gumbo Mix
    Chef Anton's Gumbo Mix
    $21.35
    5
  • Grandma's Boysenberry Spread
    Grandma's Boysenberry Spread
    $25.00
    6
  • Uncle Bob's Organic Dried Pears
    Uncle Bob's Organic Dried Pears
    $30.00
    7
  • Northwoods Cranberry Sauce
    Northwoods Cranberry Sauce
    $40.00
    8
  • Mishi Kobe Niku
    Mishi Kobe Niku
    $97.00
    9
  • Ikura
    Ikura
    $31.00
    10
  • Queso Cabrales
    Queso Cabrales
    $21.00
    11
  • Queso Manchego La Pastora
    Queso Manchego La Pastora
    $38.00
    12
  • Konbu
    Konbu
    $6.00
    13
  • Tofu
    Tofu
    $23.25
    14
  • Genen Shouyu
    Genen Shouyu
    $15.50
    15
Displaying 15 products.


The items of the ListBox can be displayed in a grid-like structure. By using item templates,
you can display as many columns of data as you wish. A header and a footer can also be displayed,
to make the list with items look even more like a grid view.

You can display any data field in the item template, by using the ListBoxItem.DataItem object.

When using this approach to display items, your end users will still benefit from the other features of the ListBox:
load on demand, virtual scrolling etc.

This sample shows how easy it is to add images for items in the grid-like structure.
View - Aspx

   <% Html.Obout(new ListBox("ListBox1")
    {
        Width = 400,
        Height = 250,
        HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
                {%>
                    <div class="header c1"> </div>
	                <div class="header c2">PRODUCT NAME</div>
	                <div class="header c3">PRICE</div>
                <%}),
            ItemTemplate = new OboutMvcTemplate<ListBoxItem>((item) =>
                {%>
                    <div class="item c1"><img src="/Content/Resources/sample-product.jpg" alt="" /></div>
	                <div class="item c2"><%= ((oboutSuite.Product)item.DataItem).ProductName%></div>
	                <div class="item c3"><%= string.Format("{0:C2}", ((oboutSuite.Product)item.DataItem).UnitPrice)%>
                    </div>
                <%}),
            FooterTemplate = new OboutMvcTemplate<ListBoxFooterTemplateContainerInfo>((data) =>
                {%>
                    Displaying <%= data.ItemsCount %> items.
                <%})
      
        }); %>
    
View - Razor

    <% Html.Obout(new ListBox("ListBox1")
    {
        Width = 400,
        Height = 250,
        HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
            @:<div class="header c1"> </div>
	            <div class="header c2">PRODUCT NAME</div>
	            <div class="header c3">PRICE</div>
            ),
        ItemTemplate = new OboutMvcTemplate<ListBoxItem>(
            @:<div class="item c1"><img src="/Content/Resources/sample-product.jpg" alt="" /></div>
	            <div class="item c2">@(((oboutSuite.Product)item.DataItem).ProductName)</div>
	            <div class="item c3">@(string.Format("{0:C2}", ((oboutSuite.Product)item.DataItem).UnitPrice))
                </div>
            ),
        FooterTemplate = new OboutMvcTemplate<ListBoxFooterTemplateContainerInfo>(
            @:Displaying @(item.ItemsCount) items.
            )
        }); %>
    
CSS
 
    .ob_iLboICBC li, .ob_iLboICBC li b, .ob_iLboICBC li.ih i
    {
        height: 50px !important;
        line-height: 50px !important;
    }
        
    .ob_iLboICBC li b img, .ob_iLboICBC li div img
    {
        margin-top: 3px !important;
        height: 45px !important;
    }
        
    .ob_iLboICBC li.ih, .ob_iLboICBC li.ih b, .ob_iLboICBC li.ih i
    {
        background-image: none !important;
        background-color: #CEF0F9 !important;
    }
        
    .item
    {
        position: relative !important;
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
        *display:inline;
        overflow: hidden;
        white-space: nowrap;
        height: 50px;
    }
        
    .header
    {
        margin-left: 2px;
    }
   
    .c1
    {
        width: 45px;
    }
        
    .c2
    {
        margin-left: 10px;
        width: 180px;
    }
        
    .c3
    {
        margin-left: 10px;
        width: 90px;
    }