B4J Question BANanoVuetifyAD3 - VueTable ShowSelect

You can implement it like this on your code.

After BaNano.Loadlayout.

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

Then to show it at runtime

page.SetData("mytableshowselect", true)

and to hide it
page.SetData("mytableshowselect", False)


Licensed User
Longtime User

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


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,

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.


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"


Locate the Initialize subroutine, and find BANano.LoadLayout.


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

Click the "Files" tab, bottom right..


Do a search for "mysimpletable"


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


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.


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


Thus, this on the table.


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


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.


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

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.

'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

'return line through if true
Sub LineThroughIfTrue(b As Boolean) As String
    If b Then
        Return "text-decoration-line-through"
        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..

Private Sub simpletable_Edit (item As Map)
End Sub

Private Sub simpletable_Clone (item As Map)
End Sub

Private Sub simpletable_Delete (item As Map)
End Sub

Private Sub simpletable_Check (item As Map)
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


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.


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



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


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.


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

You will notice that,

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

For each row as map in Items

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.


Happy BVAD3 coding!
Upvote 0


Licensed User
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