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.

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
Longtime 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
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…