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

[Star-Dust]

In a VueTable I have set a field like Switch.

I'm trying to capture the event of when the value changes.

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

 

[Star-Dust]

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

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

 

[Mashiane]

VueTable1_columnname_Change

Change the columnname to be the field name you used to define the switch.

For example

VueTable1_active_Change

Recommendation

VueTable1_Change

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

 

[Star-Dust]

Change the columnname to be the field name you used to define the switch.

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

 

[Mashiane]

Masha

Please, its Mashy and not Masha.

I just put a convenient name for the example.

Noted. I didnt want to make assumptions.

If you want, I'll give you an example, but I think it's really a bugs

Please do that will help find where the issue is. In the mean time please just use vuetable_change(item as map), it does the same exact thing.

 

[Star-Dust]

Mashiane, here is the example with attachment

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

 

[Mashiane]

Awesome, I will check. Thanks.

 

[Mashiane]

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

I didnt see this.

 

[Mashiane]

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.

SwitchBug.gif

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

 

[Star-Dust]

I didnt see this.

I didn't have time to do it

 

[Mashiane]

@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)

 

[Mashiane]

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.

 

[Star-Dust]

When I select a field as a Combo-Box, the whole table disappears

 

[Star-Dust]

Done, but it gives me the same problem

 

[Mashiane]

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

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

 

[Mashiane]

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.

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.

 

[Mashiane]

It seems I need to update the error checking scheme.

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.

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

 

[Star-Dust]

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.

View attachment 124680

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

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

unfortunately this second method does not work for me

 

[Mashiane]

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

Perhaps thats the reason.

 

[Star-Dust]

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