VueTable - Creating Expansion Panels
From this...
To:
Reproduction
1. Create e VueTable in your layout.
2. Define the fields that it will display. Each row in the table is named an "item". For example
we have item.id, item.done, item.name, item.categories etc.
3. We create the expansion panel layout, this we will append to the table. For example, we add a text field to the layout.
and establish a bi directional two way binding
(v-model) of the text field to
item.name
Where we have used a label, we establish a link to the caption of the label with
4. After creating the expansion panel layout, we need to load the layout with the table and then append the one with the expansion panel.
4.1 Load layout with VueTable
For the expansion panel to work. We need to call .BindState of the table. This builds up the structure (HTML) of the table.
4.2 BindState of the table and
LoadLayoutAppend the expansion panel layout.
4.3 Adding Buttons
In the expansion panel, we added a button, and we want to know which item is being processed when that button is clicked, so after loading the expansion panel layout.
We need to link the click event to the "item" itself. Remember, events are automatically created but they dont link to items, so, we need to add..
'we have a click for each item
btnThisItem.OnClick("item")
And then we update the generated click event to receive the item as an arguement.
'clicking an item on any
Private Sub btnThisItem_Click (item As Map)
Log(item)
End Sub
#Happy Coding
PS:
This has been added to the Kitchen Sink "What's New" section..
www.b4x.com
