B4J Tutorial [BANano] Creating Connected Grid Tables with UOEGridTable

Discussion in 'B4J Tutorials' started by Mashiane, Apr 29, 2019.

  1. Mashiane

    Mashiane Expert Licensed User

    Hi there

    This tutorial about the UOEGridTable is based on the BANano based lib, https://www.b4x.com/android/forum/t...-interesting-grid-that-you-might-like.105225/

    Connected tables are two or more tables that have a relationship. One selects a record in one table and another table's content is updated. This is depicted below. A country is selected and then players for that country are loaded on the Players grid.

    ConnectedGrid.gif

    This is possible because of the RowSelect method of the grid.

    Code:
    Sub mycountries_RowSelect (e As BANanoEvent, row As Object, id As String, record As Map)
        
    'we are selecting a country
        'get the latest list of players
        RefreshPlayers
        myplayers.autoLoad = 
    False
        myplayers.AddParamater(
    "CountryID",id)
        myplayers.SetDataSource(players)
        myplayers.refresh
    End Sub
    1. For both grids we define the data sources and the structure of the grid columns.

    Code:
    Sub Initialize
        BANano.GetElement(
    "#body").empty
        BANano.LoadLayout(
    "#body","vConnected")
        BANano.GetElement(
    "#body").SetStyle($"{"padding": "8px"}"$)
        
        RefreshCountries
        
        
    'define the master details
        mycountries.PrimaryKey = "id"
        mycountries.AddColumn(
    "id","#",mycountries.COLUMN_TEXT, 56False, mycountries.ALIGN_CENTER)
        mycountries.AddColumn(
    "text","Name",mycountries.COLUMN_TEXT, 0True, mycountries.ALIGN_LEFT)
        mycountries.AddColumn(
    "population","Population",mycountries.COLUMN_TEXT,0,True,mycountries.ALIGN_RIGHT)
        mycountries.AddColumn(
    "checked","Checked?",mycountries.COLUMN_CHECKBOX,100,False,mycountries.ALIGN_CENTER)
        mycountries.SetDataSource(countries)
        mycountries.refresh
        
        
    'define players
        myplayers.PrimaryKey = "id"
        myplayers.AddColumn(
    "id","#",myplayers.COLUMN_TEXT, 56False, myplayers.ALIGN_CENTER)
        myplayers.AddColumn(
    "Name","Name",myplayers.COLUMN_TEXT, 0True, myplayers.ALIGN_LEFT)
        myplayers.AddColumn(
    "CountryName","Country Name",myplayers.COLUMN_DROPDOWN,200,True,myplayers.ALIGN_LEFT)
        myplayers.AddColumn(
    "PlaceOfBirth","Place of Birth",myplayers.COLUMN_TEXT, 0True, myplayers.ALIGN_LEFT)
        myplayers.AddColumn(
    "DateOfBirth","Date of Birth", myplayers.COLUMN_DATE,150,False,myplayers.ALIGN_CENTER)
        
    'set the column data format
        myplayers.SetColumnFormat("DateOfBirth","dd.mm.yyyy")
        
    'uoegrid.AddColumn("tmpl","Template", uoegrid.COLUMN_String,0,False,uoegrid.ALIGN_LEFT)
        myplayers.AddColumn("IsActive","Active?",myplayers.COLUMN_CHECKBOX,80,False,myplayers.ALIGN_CENTER)
        myplayers.refresh
    End Sub
    From above, we only load the countries data and not the players data as we only need to load players when a country is selected. This we set the autoload of the players to false on the designer.
     
    joulongleu likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    2. The data sources for each of the datasets are just list of records in a format that can meet JSON when converted.

    Code:
    Sub RefreshCountries
        countries.Initialize
        
    'countries.Add(CreateMap("id":"1","text":"Asia","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
        countries.Add(CreateMap("id":"12","text":"Brazil","population":207350000,"flagUrl":"https://code.gijgo.com/flags/24/brazil.png","checked":False,"hasChildren":False))
        countries.Add(CreateMap(
    "id":"14","text":"Colombia","population":49819638,"flagUrl":"https://code.gijgo.com/flags/24/colombia.png","checked":False,"hasChildren":False))
        countries.Add(CreateMap(
    "id":"15","text":"South Africa","population":Null,"flagUrl":Null,"checked":False,"hasChildren":False))
        countries.Add(CreateMap(
    "id":"16","text":"England","population":54786300,"flagUrl":"https://code.gijgo.com/flags/24/england.png","checked":False,"hasChildren":False))
        countries.Add(CreateMap(
    "id":"17","text":"Germany","population":82175700,"flagUrl":"https://code.gijgo.com/flags/24/germany.png","checked":False,"hasChildren":False))
        countries.Add(CreateMap(
    "id":"18","text":"Bulgaria","population":7101859,"flagUrl":"https://code.gijgo.com/flags/24/bulgaria.png","checked":False,"hasChildren":False))
        countries.Add(CreateMap(
    "id":"19","text":"Poland","population":38454576,"flagUrl":"https://code.gijgo.com/flags/24/poland.png","checked":False,"hasChildren":False))
    End Sub

    Sub RefreshPlayers
        
    'lets create the players records
        players.Initialize
        players.Add(CreateMap(
    "id""1""Name""Hristo Stoichkov""PlaceOfBirth""Plovdiv, Bulgaria","CountryID":"18","CountryName""Bulgaria"))
        players.Add(CreateMap(
    "id""2""Name""Ronaldo Luis Nazario de Lima""PlaceOfBirth""Rio de Janeiro, Brazil""CountryID":"12","CountryName""Brazil"))
        players.Add(CreateMap(
    "id""3""Name""David Platt""PlaceOfBirth""Chadderton, Lancashire, England","CountryID":"16","CountryName""England"))
        players.Add(CreateMap(
    "id""4""Name""Manuel Neuer""PlaceOfBirth""Gelsenkirchen, West Germany""CountryID":"17""CountryName""Germany"))
        players.Add(CreateMap(
    "id""5""Name""James Rodríguez""PlaceOfBirth""Cúcuta, Colombia""CountryID":"14""CountryName""Colombia"))
        players.Add(CreateMap(
    "id""6""Name""Dimitar Berbatov""PlaceOfBirth""Blagoevgrad, Bulgaria""CountryID":"18""CountryName""Bulgaria"))
        players.Add(CreateMap(
    "id""7""Name""Robert Lewandowski""PlaceOfBirth""Warsaw, Poland""CountryID":"19""CountryName""Poland"))
        players.Add(CreateMap(
    "id""8""Name""Mashy""PlaceOfBirth""East London, Eastern Cape""CountryID":"15""CountryName""South Africa"))
    End Sub
    You can get your information from an API or database as you please.

    That's all folks!

    #HelpingOthersToSucceed
     
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice