B4J Tutorial [BANano] Creating Connected Grid Tables with UOEGridTable

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.

B4X:
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.

B4X:
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

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.

B4X:
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
 
Top