B4J Question BANanoVuetifyAD3 - VueTable ShowSelect

Solution
Mashiane
You can implement it like this on your code.

After BaNano.Loadlayout.

B4X: 
vueTable.Bind("show-select", "mytableshowselect")

Then to show it at runtime

B4X: 
page.SetData("mytableshowselect", true)

and to hide it
B4X: 
page.SetData("mytableshowselect", False)
Sort by date Sort by votes
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Hi

In terms of the V-Data-Table API, the "show-select" is to Shows the select checkboxes in both the header and rows (if using default rows)

Let me first exlplain a little the use of check-boxes in the context of the view table.

Use Case 1 - Simple Tabls

1. When using a simple table, for example this "Task Manager", as per this URL, https://mashiane.github.io/BANanoVuetifyAD3/#/adsimpletable

1651957173258.png


What happens here is that when each task is marked as "complete", the task name is striked.

To find the source code for this example, first look at the browser address bar, it says,
1651957274201.png


Open the Kitchen Sink Source Code and do a search for the page name "adsimpletable", via Edit > Quick Search.

This provides you a list of found items.

1651957387931.png


We want the last one, so click on the last entry..

This open us the Class Module that has the code... "see that public name As string = adsimpletable"

1651957454542.png


Locate the Initialize subroutine, and find BANano.LoadLayout.

1651957516763.png


This tells you the layout name that creates the UI interface for that table,

Click the "Files" tab, bottom right..

1651957563940.png


Do a search for "mysimpletable"

1651957603322.png


Click Open designer, this opens the designer. Below I have also opened the Tools > Generate Members.

1651957663292.png



Now you will notice that the "simpletable", which is the name of this table, there are some events, "edit", "clone", "delete", "check". These events receive a map, which is the row being processed with fieldnames and values for each column in that row.

Also when you check the Property Bag of this table, you will note some properties, we have 4 columns, id, done, name and calories.

1651957800684.png


We have indicated that the "done" column should display "Checkboxes"

1651958203128.png


Thus, this on the table.

1651958237854.png


As that is the VSimpleTable, for the VueTable, this property is

1651960252134.png


Also note that one of the properties here has a condition. This expects a JSON, being the name of the column and the callback/subroutine to execute to apply to the class of that column on that row. So this means, whenever the subroutine "isitdone" is fired, the result should be applied to the "name" column for the row being processed.

1651958283037.png


There are 2 things that need to happen for the subroutine to fire, (a) it should be registered and (b), it should be defined.

In Initialize you will see the registration of the sub-routine..

B4X: 
Dim itm As Map
    about.SetMethod(Me, "isitdone", Array(itm))

What this does is to add "isitdone" as a method to a list of available callbacks that Vue/Vuetify should recognize. If we dont define this registration, you will find an error that say "isitdone" is not defined or does not have a reference.

The second leg is creating the sub-routine.

B4X: 
'we check if the task is done or not
'this will be applied to the name column depending
'on the value of done
Sub isitdone(item As Map) As String
    'read the done status
    Dim bDone As Boolean = item.GetDefault("done", False)
    'parse it just to be save
    bDone = BANanoShared.parseBool(bDone)
    'return the class to apply
    Return vuetify.LineThroughIfTrue(bDone)
End Sub

The subroutine is fired per row received, thus us passing the row map (key value having fields & values for that row) here.

So for that row i.e. item, read the "done" key. Depending on the Truthy / Falsy of that return LineThroughIfTrue, of course when false it returns ""
This has an effect of adding the returned class.

Just to understand what that class name is

B4X: 
'return line through if true
Sub LineThroughIfTrue(b As Boolean) As String
    If b Then
        Return "text-decoration-line-through"
    Else
        Return ""
    End If
End Sub

So this applies this class to that row, thus when clicking the check, which is true/false it completes the process. Remember, you defined "done" as a checkbox, it expects a boolean value true/false.

Thus in the events you wont see any code that actually does this..

B4X: 
Private Sub simpletable_Edit (item As Map)
    Log(item)
End Sub

Private Sub simpletable_Clone (item As Map)
    Log(item)
End Sub

Private Sub simpletable_Delete (item As Map)
    Log(item)
End Sub

Private Sub simpletable_Check (item As Map)
    Log(item)
End Sub

How ever, you can add any code that you want to be processed on these events for that row.

I hope this use case is clear enough.

Happy BVAD3 coding!
 
Last edited:
Upvote 0
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Use Case 2

The URL for this example is https://mashiane.github.io/BANanoVuetifyAD3/#/dtmulti as perKitchen Sink.

What happens here is that we have a checkbox on column 1. This is possible because on the VueTable property bag, we have checked this propety.

1651959733282.png


and because we want to be able to select multiple items, this next property is left unchecked.

1651959790446.png


1651959165888.png


Clicking the first checkbox on the header has an effect of..

1651959237040.png


Selecting everything on the table, because we have indicated that we need to "Show Select" and it should accept multiple selections on the table.

As the sam time, when you check the items, you will notice the Toast Message (top right). This says 50 items selected.

1651959369764.png


When you locate the code (explained in Use Case 1 on how to find the code)

You will notice that,

B4X: 
Private Sub VueTable1_SelectedItems (items As List)
    Dim tItems As Int = items.Size
    vuetify.ShowSwalToastInfo($"${tItems} items selected"$, 1000)
End Sub

Thus each time you check/uncheck anything on the table, whether at header or row level, this event gets fired, it receives all the rows checked, each item in the list being a map, so you can use

B4X: 
For each row as map in Items
Log(row)

To do whatever you want on the table.

Remember, because the table is set to multi-selection mode, you can check whatever rows you want as depicted below.

1651959655705.png


Happy BVAD3 coding!
 
Upvote 0
magdoz

magdoz

Member
Licensed User
Hi
Thank You for your quick answer.

My scenario is :
1. Add additional toolbar buttons to show/hide select checkbox column.
2. On click event:

Private Sub dtPackages_showselect_Click (e As BANanoEvent)
vuetify.ShowSnackBarError("Show Select")
dtPackages.ShowSelect = True
End Sub

Private Sub dtPackages_hideselect_Click (e As BANanoEvent)
vuetify.ShowSnackBarError("Hide Select ")
dtPackages.ShowSelect = False
End Sub

Not working for me. What I missed, I'm wondering ?
 
Upvote 0
You must log in or register to reply here.
Top