B4J Question BANANO + JavaGrid (SOLVED)

Kiffi

Well-Known Member
Licensed User
Longtime User
yes, this is possible.

Here's a simple code to get in (based on https://www.ag-grid.com/javascript-getting-started/#add-ag-grid-to-your-project):

B4X:
Sub Process_Globals
 
  Private BANano As BANano
 
End Sub

Sub AppStart(Form1 As Form, Args() As String)

  BANano.Initialize("BANanoAgGrid", "BANanoAgGrid", DateTime.Now)
 
  BANano.UseServiceWorker = False
  ' BANano.TranspilerOptions.UseServiceWorker = False
 
  BANano.Header.AddCSSFile("https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css")
  BANano.Header.AddCSSFile("https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css")
  BANano.Header.AddJavascriptFile("https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js")

  BANano.Build("C:\inetpub\wwwroot\BANano\") ' <- customize to your own needs

  ExitApplication

End Sub

Sub BANanoAgGrid_Ready()

  BANano.GetElement("body").Append($"<h1>Hello from ag-grid!</h1>"$)
 
  BANano.GetElement("body").Append($"<div id="myGrid" style="height: 600px;width:500px;" class="ag-theme-balham"></div>"$)
 
  Dim columnDefs As List
  columnDefs.Initialize
 
  columnDefs.Add(CreateMap("headerName": "Make", "field": "make"))
  columnDefs.Add(CreateMap("headerName": "Model", "field": "model"))
  columnDefs.Add(CreateMap("headerName": "Price", "field": "price"))

  Dim rowData As List
  rowData.Initialize
 
  rowData.Add(CreateMap("make": "Toyota", "model": "Celica", "price": 35000))
  rowData.Add(CreateMap("make": "Ford", "model": "Mondeo", "price": 32000))
  rowData.Add(CreateMap("make": "Porsche", "model": "Boxter", "price": 72000))

  Dim gridOptions As Map = CreateMap()
 
  gridOptions.Put("columnDefs", columnDefs)
  gridOptions.Put("rowData", rowData)
 
  Dim eGridDiv As BANanoElement = BANano.GetElement("#myGrid")
 
  Dim myGrid As BANanoObject
  myGrid.Initialize2("agGrid.Grid", Array(eGridDiv.ToObject, gridOptions))
 
End Sub

Greetings ... Peter
 
Upvote 0
Top