ASP.NET MVC ListBox - Grid-Like Multi-Columns with Header and Footer

ID
COMPANY NAME
CITY
  • Exotic Liquids
    1
    Exotic Liquids
    London
    1
  • New Orleans Cajun Delights
    2
    New Orleans Cajun Delights
    New Orleans
    2
  • Grandma Kelly's Homestead
    3
    Grandma Kelly's Homestead
    Ann Arbor
    3
  • Tokyo Traders
    4
    Tokyo Traders
    Tokyo
    4
  • Cooperativa de Quesos 'Las Cabras'
    5
    Cooperativa de Quesos 'Las Cabras'
    Oviedo
    5
  • Mayumi's
    6
    Mayumi's
    Osaka
    6
  • Pavlova, Ltd.
    7
    Pavlova, Ltd.
    Melbourne
    7
  • Specialty Biscuits, Ltd.
    8
    Specialty Biscuits, Ltd.
    Manchester
    8
  • PB Knäckebröd AB
    9
    PB Knäckebröd AB
    Göteborg
    9
  • Refrescos Americanas LTDA
    10
    Refrescos Americanas LTDA
    Sao Paulo
    10
  • Heli Süßwaren GmbH & Co. KG
    11
    Heli Süßwaren GmbH & Co. KG
    Berlin
    11
  • Plutzer Lebensmittelgroßmärkte AG
    12
    Plutzer Lebensmittelgroßmärkte AG
    Frankfurt
    12
  • Nord-Ost-Fisch Handelsgesellschaft mbH
    13
    Nord-Ost-Fisch Handelsgesellschaft mbH
    Cuxhaven
    13
  • Formaggi Fortini s.r.l.
    14
    Formaggi Fortini s.r.l.
    Ravenna
    14
  • Norske Meierier
    15
    Norske Meierier
    Sandvika
    15
  • Bigfoot Breweries
    16
    Bigfoot Breweries
    Bend
    16
  • Svensk Sjöföda AB
    17
    Svensk Sjöföda AB
    Stockholm
    17
  • Aux joyeux ecclésiastiques
    18
    Aux joyeux ecclésiastiques
    Paris
    18
  • New England Seafood Cannery
    19
    New England Seafood Cannery
    Boston
    19
  • Leka Trading
    20
    Leka Trading
    Singapore
    20
  • Lyngbysild
    21
    Lyngbysild
    Lyngby
    21
  • Zaanse Snoepfabriek
    22
    Zaanse Snoepfabriek
    Zaandam
    22
  • Karkki Oy
    23
    Karkki Oy
    Lappeenranta
    23
  • G'day, Mate
    24
    G'day, Mate
    Sydney
    24
  • Ma Maison
    25
    Ma Maison
    Montréal
    25
  • Pasta Buttini s.r.l.
    26
    Pasta Buttini s.r.l.
    Salerno
    26
  • Escargots Nouveaux
    27
    Escargots Nouveaux
    Montceau
    27
  • Gai pâturage
    28
    Gai pâturage
    Annecy
    28
  • Forêts d'érables
    29
    Forêts d'érables
    Ste-Hyacinthe
    29
Displaying 29 items.


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: autocomplete, load on demand, virtual scrolling, filtering, etc.
View - Aspx
 
    <% Html.Obout(new ListBox("ListBox1") 
    {                
        HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
            {%>
                <div class="header c1">ID<</div>
	            <div class="header c2">COMPANY NAME</div>
	            <div class="header c3">CITY</div>
            <%}),
        ItemTemplate = new OboutMvcTemplate<ListBoxItem>((item) =>
            {%>
                <div class="item c1"><%= ((oboutSuite.Supplier)item.DataItem).SupplierID %></div>
	            <div class="item c2"><%= ((oboutSuite.Supplier)item.DataItem).CompanyName%></div>
	            <div class="item c3"><%= ((oboutSuite.Supplier)item.DataItem).City%></div>
            <%}),
        FooterTemplate = new OboutMvcTemplate<ListBoxFooterTemplateContainerInfo>((data) =>
            {%>
                Displaying <%= data.ItemsCount %> items.
            <%})
    }); %>
    
View - Razor
 
    @Html.Obout(new ListBox("ListBox1") 
    {                
        HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
            @:<div class="header c1">ID<</div>
            <div class="header c2">COMPANY NAME</div>
            <div class="header c3">CITY</div>
        ),
        ItemTemplate = new OboutMvcTemplate<ListBoxItem>(
            @:<div class="item c1">@(((oboutSuite.Supplier)item.DataItem).SupplierID)</div>
            <div class="item c2"><@(((oboutSuite.Supplier)item.DataItem).CompanyName)</div>
            <div class="item c3"><@(((oboutSuite.Supplier)item.DataItem).City)</div>
        ),
        FooterTemplate = new OboutMvcTemplate<ListBoxFooterTemplateContainerInfo>(
            @:Displaying @(item.ItemsCount) items.
        )
    })
    
CSS

    .item
    {
        position: relative !important;
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
        *display:inline;
        overflow: hidden;
        white-space: nowrap;
    }
        
    .header
    {
        margin-left: 2px;
    }
   
    .c1
    {
        width: 25px;
    }
        
    .c2
    {
        margin-left: 10px;
        width: 180px;
    }
        
    .c3
    {
        margin-left: 10px;
        width: 90px;
    }