B4J Question [SOLVED] [Vuetify] VueTable - Switch and Combo-Box

Star-Dust

Expert
Licensed User
Longtime User
In a VueTable I have set a field like Switch.

I'm trying to capture the event of when the value changes.
B4X: 
Private Sub VueTable1_columnname_Change (item As Map)
    vuetify.ShowSwal(banano.ToJson(item))
End Sub

But this event is not raised. Did I get the event wrong? Isn't it Change?

I would like to set a field as Combo-Box, but as soon as I enter the name of the field the table goes into error and displays nothing
 
Sort by date Sort by votes

Star-Dust

Expert
Licensed User
Longtime User
I solved it, it looks like you don't have to put the field name, obviously it's a problem if you have multiple Switch fields
B4X: 
Private Sub VueTable1_Change (item As Map)
    vuetify.ShowSwal(banano.ToJson(item))
End Sub
Maybe it's a BUGS

There remains the problem of the Combo-Box .... we'll see
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Star-Dust said:
VueTable1_columnname_Change
Click to expand...
Change the columnname to be the field name you used to define the switch.

For example

Star-Dust said:
VueTable1_active_Change
Click to expand...

Recommendation

Star-Dust said:
VueTable1_Change
Click to expand...
Its always better & recommended just to use this method as it gives you the item including anything changed data on that row and you don't have to have change events per field specified.

Below are the other events where you need to change ColumnName to be your field name

  • OwnColumn (item As Map) - change OwnColumn with the field name
  • ColumnName_Change (item As Map)
  • ColumnName_Minus (item As Map)
  • ColumnName_Plus (item As Map)


    Other events of Interest when Inline Editing

    CancelItem (item As Map) - fired when an edit dialog is cancelled e.g. pressing escape/ clicking cancel
  • CloseItem (item As Map) - fired when an edit dialog is closed.
  • OpenItem (item As Map) - fired when edit dialog is about to open
  • SaveItem (item As Map) - fired when OK is clicked in the edit dialog
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Mashiane said:
Change the columnname to be the field name you used to define the switch.
Click to expand...
Mashy that's a matter of course, I just put a convenient name for the example.

The field is called 'able' and the VueTable1_able_Change event ... but it doesn't work.

If you want, I'll give you an example, but I think it's really a bugs
 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Mashiane, here is the example with attachment
B4X: 
Sub onmounted 'ignore
    VueTable1.Clear
    For i=1 To 5
        Dim Row As Map = CreateMap("name":"Name_" & I, "active":False)
        VueTable1.AddItem(Row)
    Next
End Sub

Private Sub VueTable1_name_Change (item As Map)
    vuetify.ShowSwalToastInfo(item.Get("name"),2000)
End Sub

Private Sub VueTable1_active_Change (item As Map)
    vuetify.ShowSwalToastInfo("Active_change " & item.Get("active"),2000)     ' Don't Work
End Sub

Private Sub VueTable1_Change (item As Map)
    vuetify.ShowSwalToastInfo("Change " & item.Get("name"),2000)
End Sub
 

Attachments

  • TableBug.zip
    22.9 KB · Views: 222
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Updated: In the attached example, because the switch is set to be "readonly", no event is registered and no event will fire. I will ensure that in the next release the readonly property is not mutually exclusive with the change event.

Dropbox

www.dropbox.com

I can safely confirm that without the "readonly" property, the switch change event fires without any issues, when used with vuetable_change.
 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
@Star-Dust , thanks for the heads up about this. I have updated the code for this to work like this.

Example 1:

If one does not define the _ColumnName_Change event, the VueTable_Change event will receive the change event. In this example, the actual ColumnName_Change is set and the VueTable_Change event, whilst it exists, it wont be fired (as there is only 1 column that hase a change event)

 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Example 2

In this example both the ColumnName_Change and the VueTable_Change event exists on the same table. As there is no rating change / linear progress change event, the fallback is the vuetable_change event whilst the checkbox has an individual change event.



These will be available on the next run.

PS: When you can, lets please look at the combobox issues.

?
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
When I select a field as a Combo-Box, the whole table disappears
 

Attachments

  • TableComboBox.zip
    22.8 KB · Views: 229
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
Done, but it gives me the same problem
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
It seems I need to update the error checking scheme. The table is indeed not rendering due to this error

B4X: 
<v-combobox :items="" item-text="" item-value="" clearable=""
                                            :return-object="false" v-model="props.item.um" :label="props.header.text"
                                            dense="" class="mt-2" outlined=""></v-combobox>

This is the generated HTML code for the combo from above.

what is missing is the items, item-value, item-text.

I will update your source and push a running version.
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
I have updated your source a little to use the VForm, VFields, DataSource. This is the recommended methodology.



This is what I did.

1. Added a VForm to the layout. I placed this on the column next to the data-table. These are the properties I set for it,



2. Added 2 VFields inside the VForm, these are txtarticle and cboum. I set the field names to be 'article' and 'um', gave them titles. For the txtarticle, I specified



This will show a text field on the form and also a text field for inline editing on the table.

3. For the combo box, I specified the field name and caption, title. and set



This will show a combo on the form and also a combo on the table during inline editing. I left the key & value fields untouched.



These indicate which fields should be used for the key (item value) and value (item text)

4. Added a data-source. Didn't specify any property for it.
5. Update the data table Manual property to be true and removed all the other properties you had set. That is all is needed for the automatic binding of the form to the data-table and data-source.



6. Added some items to the combo on mounted.

Note that is is using the item-value & item-text indicated above.

B4X: 
Dim um As List = page.NewList
    um.Add(CreateMap("id":"LT", "text":"LT"))
    um.Add(CreateMap("id":"PZ", "text":"PZ"))
    cboum.SetItems(page, um)

The final result



Source code attached!

PS: I know you are not a fan of videos so much , but this methodology can be watched in simple short videos from

Creating Vuetify Forms using BANanoVuetifyAD3 - Part 1, where we look in details step by step how to create forms and we look at all the options of the data-table, form controls etc.

All the best.
 

Attachments

  • TableComboBox.zip
    25.8 KB · Views: 193
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
Mashiane said:
It seems I need to update the error checking scheme.
Click to expand...
Played around and fixed the error checking scheme and applied an autofix to this. Using your original code without the VField, VForm, VDataSource.

We have this.



All that is needed to be done to your original source is to add this code on mounted.

B4X: 
'add the combo items
    Dim um As List = page.NewList
    um.Add(CreateMap("id":"LT", "text":"LT"))
    um.Add(CreateMap("id":"PZ", "text":"PZ"))
    page.SetData("umitems", um)

Terms and conditions Apply:

  • umitems is based on the field name specified, suffixed with the word items. This will be the name of your list to store the dropdown items.
  • The id and text are the default key value pairs that are automatically bound with this methodology you have used.
  • There is no Combo on the layout..
If you add a combo linked to this column in the layout. The data-source should be umitems, the item-value should be id and item-text should be text.

Again, thanks for these reported issues, they help improve the code a great deal.

I have attached the source code. You will need the latest update of the BVAD3 library for this method. I will upload to github later today.
 

Attachments

  • TableComboBox1.zip
    22.9 KB · Views: 178
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
unfortunately this second method does not work for me
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
With the latest update I have solved both problems.

Now the ComboBOx inside the VTable works correctly and the SWITCH raises the _ColumnName_Change event.


Great thanks
 
Upvote 0
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…