ASP.NET MVC ListBox - Master / Detail with Unlimited Detail Levels


CUSTOMERS
  • Alfreds FutterkisteALFKI
  • Antonio Moreno TaqueríaANATR
  • Around the HornAROUT
  • Berglunds snabbköpANTON
  • Berglunds snabbköpBERGS
  • Blauer See DelikatessenBLAUS
  • Blondesddsl père et filsBLONP
  • Bólido Comidas preparadasBOLID
  • Bon app'BONAP
  • Bottom-Dollar MarketsBOTTM
  • B's BeveragesBSBEV
  • Cactus Comidas para llevarCACTU
  • Centro comercial MoctezumaCENTC
  • Chop-suey ChineseCHOPS
  • Comércio MineiroCOMMI
  • Consolidated HoldingsCONSH
  • Die Wandernde KuhWANDK
  • Drachenblut DelikatessenDRACD
  • Du monde entierDUMON
  • Eastern ConnectionEASTC
  • Ernst HandelERNSH
  • Familia ArquibaldoFAMIA
  • FISSA Fabrica Inter. Salchichas S.A.FISSA
  • Folies gourmandesFOLIG
  • Folk och fä HBFOLKO
  • France restaurationFRANR
  • Franchi S.p.A.FRANS
  • FrankenversandFRANK
  • Furia Bacalhau e Frutos do MarFURIB
  • Galería del gastrónomoGALED
  • Godos Cocina TípicaGODOS
  • Gourmet LanchonetesGOURL
  • Great Lakes Food MarketGREAL
  • GROSELLA-RestauranteGROSR
  • Hanari CarnesHANAR
  • HILARION-AbastosHILAA
  • Hungry Coyote Import StoreHUNGC
  • Hungry Owl All-Night GrocersHUNGO
  • Island TradingISLAT
  • Königlich EssenKOENE
  • La corne d'abondanceLACOR
  • La maison d'AsieLAMAI
  • Laughing Bacchus Wine CellarsLAUGB
  • Lazy K Kountry StoreLAZYK
  • Lehmanns MarktstandLEHMS
  • Let's Stop N ShopLETSS
  • LILA-SupermercadoLILAS
  • LINO-DelicatesesLINOD
  • Lonesome Pine RestaurantLONEP
  • Magazzini Alimentari RiunitiMAGAA
  • Maison DeweyMAISD
  • Mère PaillardeMEREP
  • Morgenstern GesundkostMORGK
  • North/SouthNORTS
  • Océano Atlántico Ltda.OCEAN
  • Old World DelicatessenOLDWO
  • Ottilies KäseladenOTTIK
  • Paris spécialitésPARIS
  • Pericles Comidas clásicasPERIC
  • Piccolo und mehrPICCO
  • Princesa Isabel VinhosPRINI
  • Que DelíciaQUEDE
  • Queen CozinhaQUEEN
  • QUICK-StopQUICK
  • Rancho grandeRANCH
  • Rattlesnake Canyon GroceryRATTC
  • Reggiani CaseificiREGGC
  • Ricardo AdocicadosRICAR
  • Richter SupermarktRICSU
  • Romero y tomilloROMEY
  • Santé GourmetSANTG
  • Save-a-lot MarketsSAVEA
  • Seven Seas ImportsSEVES
  • Simons bistroSIMOB
  • Spécialités du mondeSPECD
  • Split Rail Beer & AleSPLIR
  • Suprêmes délicesSUPRD
  • The Big CheeseTHEBI
  • The Cracker BoxTHECR
  • Toms SpezialitätenTOMSP
  • Tortuga RestauranteTORTU
  • Tradição HipermercadosTRADH
  • Trail's Head Gourmet ProvisionersTRAIH
  • VaffeljernetVAFFE
  • Victuailles en stockVICTE
  • Vins et alcools ChevalierVINET
  • Wartian HerkkuWARTH
  • Wellington ImportadoraWELLI
  • White Clover MarketsWHITC
  • Wilman KalaWILMK
  • Wolski ZajazdWOLZA
ORDERS
    PRODUCTS
      The ListBox provides a built-in master / detail feature, which allows you to organize data from multiple data sources in the same ListBox. Use the Detail property to set up a detail ListBox.

      The detail ListBox supports all the features available in a regular ListBox.

      You can set up any number of detail levels. This example showcases a ListBox with three levels, for continents, countries and customers.
      View - Aspx
      
          <% Html.Obout(new ListBox("ListBox1")
          {   
               HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
              {%> 
                  CUSTOMERS
              <%}),
              Detail = new ListBox("ListBox2")
              {
                  EnableLoadOnDemand = true,
                  OnLoadingItems = "ListBox/LoadOrders",
                  HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
                  {%> 
                      ORDERS
                  <%}),
                  Detail = new ListBox("ListBox3")
                  {
                      EnableLoadOnDemand = true,
                      OnLoadingItems = "ListBox/LoadProducts",
                      HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>((info) =>
                      {%> 
                          PRODUCTS
                      <%})
                  }
              }
          }); %> 
          
          
      View - Razor
      
          @Html.Obout(new ListBox("ListBox1")
          {   
              HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
                  @:CUSTOMERS
              ),
              Detail = new ListBox("ListBox2")
              {
                  EnableLoadOnDemand = true,
                  OnLoadingItems = "ListBox/LoadOrders",
                  HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
                      @:ORDERS
                  ),
                  Detail = new ListBox("ListBox3")
                  {
                      EnableLoadOnDemand = true,
                      OnLoadingItems = "ListBox/LoadProducts",
                      HeaderTemplate = new OboutMvcTemplate<ListBoxHeaderTemplateContainerInfo>(
                          @:PRODUCTS
                      )
                  }
              }
          })
          
          
      Controller
      
          public JsonResult LoadOrders(ListBoxLoadingItemsEventArgs args)
          {
              ListBoxItemList items = GetFilteredCountryNames(args.Text);
      
              JsonResult result = new JsonResult
              {
                  Data = new
                  {
                      Items = items
                  },
                  JsonRequestBehavior = JsonRequestBehavior.AllowGet
              };
      
              return result;
          }
      
          public JsonResult LoadProducts(ListBoxLoadingItemsEventArgs args)
          {
              ListBoxItemList items = GetFilteredCustomers(args.Text);
      
              JsonResult result = new JsonResult
              {
                  Data = new
                  {
                      Items = items
                  },
                  JsonRequestBehavior = JsonRequestBehavior.AllowGet
              };
      
              return result;
          }
          
          

      "First of all... loved the controls... its wonderful features and ease of use. Most of all, I would like to commend your support group. Even if we're still in evaluation mode, the support team has been great and very response. Keep up the great work!"

      James Gagni Jr.
      Aon Singapore

      Random testimonial   All testimonials