B4J Tutorial [BANano] Creating Connected Grid Tables with UOEGridTable

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.

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

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.

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, 56, False, mycountries.ALIGN_CENTER)
    mycountries.AddColumn("text","Name",mycountries.COLUMN_TEXT, 0, True, 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, 56, False, myplayers.ALIGN_CENTER)
    myplayers.AddColumn("Name","Name",myplayers.COLUMN_TEXT, 0, True, 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, 0, True, 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.

 

[Mashiane]

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

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