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;
          }