B4J Question [SOLVED] Banano Vuetify and GRID or TABLE

[Star-Dust]

I need to have a grid or table, of which I don't know the number of columns and rows until I get the data from the database.

VueTable is an interesting grid but you have to set the number of columns and name of columns in advance.

It was fine with Vue's HeatMap which is not in Vuetify. How can I fix it?

 

[Mashiane]

you have to set the number of columns and name of columns in advance.

True, but its NOT the only mode that you can, you can define your tables at run-time, without knowing what they will contain, fortunately it has been done before.

Before the table creation via the abstract designer existed, the example below was how everything was done in BVAD3, pure code. Now the abstract designer approach just "abstracts" this code for you. You can see that when you open the VueTable.BuildSchema method on the source code.

How I do it, I get the schema of the table I want to get data for, i create the vue table headers, I read the data and add it to the data-table, but you just have to code that.

Here is an old example of how you can do it.

In Class_Globals

Private vetable As VueTable

'On Initialize, we use a table thats put on a layout, you can also just use veTable.Initialize(?, ?, ?) without using a layout.

    vtables.Matrix(1, 1).LoadLayout("vetable")
    '
'add tables to the toolbar
    vetable.ParentComponent = tables
    vetable.AddDivider
    vetable.AddNew
    vetable.AddDivider
    vetable.AddClearSort
    vetable.AddDivider
    vetable.AddFilter("primary--text")
    vetable.AddDivider
    vetable.AddClearFilter
    vetable.AddDivider
    vetable.AddPDF
    vetable.AddDivider
    vetable.AddExcel
    '
'  add columns with headings
    vetable.AddColumn1("name", "Dessert (100g Serving", vetable.COLUMN_TEXT, 0, True, vetable.ALIGN_LEFT)
    vetable.AddChip("calories", "Calories", "item.color")
    vetable.AddColumn("fat", "Fat (g)")
    vetable.AddColumn("carbs", "Carbs (g)")
    vetable.AddColumn("protein", "Protein")
    vetable.AddColumn("iron", "Iron (%)")
    vetable.AddAction("mashy", "Mashy", "mdi-vuetify")
    vetable.SetFilterable(Array("name", "calories"))
'add action buttons
    vetable.AddEdit
    vetable.AddDelete
    vetable.AddClone
    vetable.AddPrint
    vetable.AddSave
    vetable.AddCancel
    vetable.AddDownload
    vetable.AddMenuV
'specify properties of the action buttons
    vetable.SetIconDimensions("edit", "", vuetify.COLOR_GREEN)
    vetable.SetIconDimensions("delete", "", vuetify.COLOR_RED)
    vetable.SetIconDimensions("clone", "", vuetify.COLOR_AMBER)
    vetable.SetIconDimensions("print", "", vuetify.COLOR_BLUE)
    vetable.SetIconDimensions("save", "", vuetify.COLOR_BLUEGREY)
    vetable.SetIconDimensions("cancel", "", vuetify.COLOR_BROWN)
    vetable.SetIconDimensions("download", "", vuetify.COLOR_CYAN)
    vetable.SetIconDimensions("menu", "", vuetify.COLOR_INDIGO)
    vetable.SetIconDimensions("mashy", "", vuetify.COLOR_DEEPPURPLE)
  
    'add data
    vetable.AddRow(CreateMap("name": "Frozen Yogurt", "calories": 159, "color":"green", "fat": 6.0, "carbs": 24, "protein": 4.0, "iron": "1%"))
    vetable.AddRow(CreateMap("name": "Ice cream sandwich", "calories": 237, "color":"orange", "fat": 9.0, "carbs": 37, "protein": 4.3, "iron": "1%"))
    vetable.AddRow(CreateMap("name": "Eclair", "calories": 262, "color":"orange", "fat": 16.0, "carbs": 23, "protein": 6.0, "iron": "7%"))
    vetable.AddRow(CreateMap("name": "Cupcake",    "calories": 305, "color":"orange", "fat": 3.7, "carbs": 67, "protein": 4.3, "iron": "8%"))
    vetable.AddRow(CreateMap("name": "Gingerbread", "calories": 356, "color":"orange", "fat": 16.0, "carbs": 49, "protein": 3.9, "iron": "16%"))
    '
    'vetable.SetColumnTotal("calories", "sumfield('calories')")
    'vetable.SetColumnAttr("calories", ":color", "getcolor(item.calories)")
    'vetable.SetColumnAttr("calories", ":color", "item.color")
  
tables.BindVueTable(vetable)

If you want to code your way around BVAD3, it will mean you need to watch the old videos...

 

[Mashiane]

Just to add, if you watch this video, all we do it take fields from a db and add them to the VueTable. Basically, we are executing .AddColumn underneath but via the abstract designer. So you would get the table schema which gives the field names and then execute .AddColumn but via code as explained above.

 

[Star-Dust]

Thank you, but this method seems to work if I set the columns by code during initialization. Is it possible to change the columns from code after creating the table?

I need that at the time of the onmount event, after accessing the database, you dynamically set the number of columns.

I cannot know yet at the time of initialization, because only after having accessed the data do I know how many and which columns I have to represent

 

[amorosik]

Just to add, if you watch this video, all we do it take fields from a db and add them to the VueTable. Basically, we are executing .AddColumn underneath but via the abstract designer. So you would get the table schema which gives the field names and then execute .AddColumn but via code as explained above.

Great job, congratulations
Is it possible to use other db servers via native drivers or via odbc?
(Firebird, Sql Server, PostreSql)

 

[Star-Dust]

Great job, congratulations
Is it possible to use other db servers via native drivers or via odbc?
(Firebird, Sql Server, PostreSql)

Please open the specific thread for your question. this request is OT

 

[Mashiane]

Great job, congratulations
Is it possible to use other db servers via native drivers or via odbc?
(Firebird, Sql Server, PostreSql)

Thank you, but please start a new thread for your question.

 

[Mashiane]

Thank you, but this method seems to work if I set the columns by code during initialization. Is it possible to change the columns from code after creating the table?

I need that at the time of the onmount event, after accessing the database, you dynamically set the number of columns.

I cannot know yet at the time of initialization, because only after having accessed the data do I know how many and which columns I have to represent

NOT only on initialize, you can use the code anywhere, just use Reset after you initialize the table.

See this: https://www.b4x.com/android/forum/t...a-music-store-sqlite-database.129668/#content

 

[Star-Dust]

I used the reset all last night and this morning with bad results ... I will have missed something else. I'll look at your example.

Thanks

 

[Star-Dust]

I understood the mistake. I had to put back after the reset adding the new columns and finally BindVueTable again.
I thought it was not necessary since it was already there in the initialization of the page.

Of course, documentation would be needed. However as soon as I can I will post an example in this thread

 

[Mashiane]

Yes documentation would help, thing is, BVAD3 is open source and doesn't kinda pay the bills. I have done all sorts of videos in my spare time to explain the concepts, I think with the approach you are following more than 70 video tutorials of coding your way around.

As the library evolved and changed and the abstract designer was starting to be used, I had to start a new series to explain new concepts and ways of doing things. That's fairly new and still slow and done during spare time.

Some of the things you are asking have already been asked and answered, and mostly on the tutorials thread or other forms, however I do agree with you, documentation is needed and it's something I'm thinking of.

For now people will just have to do with asking questions, watching the videos, one on one support or other means as my priority is client projects than the hobby at the moment.

 

[Star-Dust]

Yes documentation would help, thing is, BVAD3 is open source and doesn't kinda pay the bills. I have done all sorts of videos in my spare time to explain the concepts, I think with the approach you are following more than 70 video tutorials of coding your way around.

As the library evolved and changed and the abstract designer was starting to be used, I had to start a new series to explain new concepts and ways of doing things. That's fairly new and still slow and done during spare time.

Some of the things you are asking have already been asked and answered, and mostly on the tutorials thread or other forms, however I do agree with you, documentation is needed and it's something I'm thinking of.

For now people will just have to do with asking questions, watching the videos, one on one support or other means as my priority is client projects than the hobby at the moment.

You are absolutely right, OpernSource does not pay the bills. I understand you perfectly because you know most of my libraries are free. And giving assistance is not always easy.

Unfortunately, how the questions are arranged are not always reachable and the videos require a good knowledge of spoken English. The written one we help with Google.

Consider that there are several versions and updates and you often find yourself following an old tutorial. You don't always get it. Sometimes I have followed BananoVueMaterial tutorials and only at the end do not get the error.

Having said that, the basic concept is the first expressed. It is open source and therefore you have to choose how to use the time you dedicate to the library as it is free of charge. I'm sure you made it available for free to use and would be happy if it had a great success. Much depends on the tutorials, others will be followed only by those who started this path with you, others will be cut off

 

[Mashiane]

Just for reference: https://www.b4x.com/android/forum/t...m-database-schema-data-solved.121559/#content

 

[Star-Dust]

One last question about the tables. You have entered the coloring of rows and columns with the condition.

I saw on the Vuetify website that it is possible to color even a single cell. (here)
Has it been implemented in your library?

 

[Mashiane]

Wow, I'm impressed and happy that you are skimming the Vuetify Website.

A definite yes, we have conditional styles, conditional classes and off course the conditional color. We used this feature extensively on this project.

ICT Asset Manager [FREE] Source Code

Ola Download IMPORTANT: Please run the MySQL Connection Tester Excercise First THIS IS A LEGACY PROJECT AND WORKS WITH BVAD3 VERSION 604 AVAILABLE IN THE DOWNLOAD Join our Telegram Channel here. Keep Track of your ICT Assets.. Sneek Peek... 1. As an ICT Manager of your company, who did...

www.b4x.com

 

[Star-Dust]

Wow, I'm impressed and happy that you are skimming the Vuetify Website.

A definite yes, we have conditional styles, conditional classes and off course the conditional color. We used this feature extensively on this project.

ICT Asset Manager [FREE] Source Code

Ola Download IMPORTANT: Please run the MySQL Connection Tester Excercise First THIS IS A LEGACY PROJECT AND WORKS WITH BVAD3 VERSION 604 AVAILABLE IN THE DOWNLOAD Join our Telegram Channel here. Keep Track of your ICT Assets.. Sneek Peek... 1. As an ICT Manager of your company, who did...

www.b4x.com

Thanks, I had started studying Angular which is powerful but very complex.Vue at the moment I am getting simpler and I am browsing here and there.

I would like to contribute in some way to your interesting work. Unfortunately I am slow to understand (I am a diesel).
To help other novices like me I have created a small example of a Dynamic Table. I am attaching it to this post hoping it will be useful to someone

 

[Mashiane]

Thanks for the code, I have quickly reviewed it and whilst understanding that you are still new to this. I would greatly recommend that you follow the approach that was provided in micros question, on this thread:

[BANanoVueMaterial] How to create dynamic data-table from database schema & data [SOLVED]

Hi the next step .....but always with the same problem of updating the component (VMDataTable) dt1 = VMDataTable in a module gestDatiArc is show and only the indication of the number of records in the pagination is updated but it does not show the name of the columns and records I read as you...

www.b4x.com

Anyway, with version 6.05, this is how I recommend this be done.

Things to note: The BindState/BindStateOnpp methods are recommended above .BindVueElement as these are more powerful and have extra functionality.

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    home.Initialize(Me, name)
    home.vuetify = vuetify
    'make this the start page
    home.Path = "/"
    path = home.path
    '
    'build the page html here
    banano.LoadLayout(home.Here, "home")
    VContainer1.BindState(home)
 
    ' btn
   btnNew.BindState(home)
 
    ' Color conditional
    VueTable1.SetRowColorOnCondition("rowcolor")
    VueTable.BindState(home)
 
    home.SetMounted(Me, "onmounted", Null)
 
    'add this route component to the app
    vuetify.AddRoute(home)
End Sub

 

[Mashiane]

The adding of rows done here is adding 1 row at a time, however you can add all rows in one go by just changing your code a little.

From

Sub onmounted 'ignore
    For i=1 To 10
        Dim TableRow As Map =  CreateMap()
        TableRow.Put("f1","A" & I)
        TableRow.Put("f2","B" & I)
        TableRow.Put("f3","C" & I)
        VueTable1.AddItem(TableRow)
    Next
End Sub

To

Sub onmounted 'ignore
Dim lst as List
lst.Initialize
    For i=1 To 10
        Dim TableRow As Map =  CreateMap()
        TableRow.Put("f1","A" & I)
        TableRow.Put("f2","B" & I)
        TableRow.Put("f3","C" & I)
    lst.add(tablerow)    
Next
vuetable1.Reload(lst)
End Sub

 

[Mashiane]

I will mark the lines with * and comment something in brackets on this one, those added with suffix with (added)

Private Sub btnNew_Click (e As BANanoEvent)
    Dim Head As Map = CreateMap()

    *VueTable1.Clear (this clears the rows on the table ONLY this line can be removed as .Reset below also does it)
    VueTable1.Reset 'this clears everything on the table including the row data and headers
    
    Dim CasualAsciiValue As Int = Rnd(1,20)
    Dim Letter As String = Chr(64+CasualAsciiValue)
    For i=1 To Rnd(5,15)
        Dim NameField As String = Letter.ToLowerCase & i
        Dim title As String = Chr(64+i)
        Head.Put(NameField, title)
        VueTable1.AddColumn(NameField,title)
    Next
    
    * home.BindVueTable(VueTable1) (because vuetable1.BindState is used on initialize, this can be removed)
    vuetable1.UpdateHeaders (added)
    * VueTable1.GetData.Clear (this is not necessary as it has been called twice, with .Clear and .Reset above, .Reset will suffice)

'as the code below adds 1 row at a time, lets create a list and use that to add rows in one go. There is nothing wrong / amiss im just indicating another option.
'If you want to add many many rows, DONT use the .AddItem method, use the List first approach. .AddItem is very useful where for example one would have a table that 'will be updated in real-time e.g. a stock data view etc where you want to see changes as and when they happen in realtime.

dim lst as List (added)
lst.Initialize    (added)
For i=1 To 10
        Dim TableRow As Map =  CreateMap()
        For Each field As String In Head.Keys
            Dim V As String = Head.Get(field) & I
            TableRow.Put(field, V)
        Next
        VueTable1.AddItem(TableRow) (replace with lst.add(TableRow))
    Next
vuetable1.Reload(lst)
End Sub

Overall, this is very good progress, congrats.

 

[Mashiane]

Thanks, I had started studying Angular which is powerful but very complex

Me too but I only did AngularJS 2 and my curiosity took me not so far, https://www.b4x.com/android/forum/t...banano-curiosity-has-taken-me.130300/#content

I still find Vue very easy to learn and adapt to. I thought of ReAct but then time will tell.