B4J Question [SOLVED] BANanoVuetifyAD3 how set grid

[Lello1964]

Hi,

i 'm using BANanoVuetifyAD3,

i have a grid of 2 col ,

first 1 row, 1 col
second 2 row, 1 col


I want this layout :

+---------------------------------------------------------------------------------------------------------------------------+
|                                                                       col 1 row 1                                         |
+------------------------------------------------------------------------------+--------------------------------------------+
|                                          col1 row2                           |        col 2  row 2                        |
+------------------------------------------------------------------------------+--------------------------------------------+

i use this code, from tutorial :

    vuetify = pgIndex.vuetify
    'initialize the component
    tables.Initialize(Me, name)
    path = tables.path
    'load the template
    banano.LoadLayout(vuetify.PlaceHolderName, "vtables")
    vtables.Matrix(1, 1).LoadLayout("vetable")
    vtables.Matrix(1, 2).LoadLayout("vetable1")

i think must use this script :

 <b-row>
    <b-col sm="8">col-sm-8</b-col>
    <b-col sm="4">col-sm-4</b-col>
  </b-row>

but i don't kwnow where put in view file

Thanks


Raffaele

 

[Mashiane]

You have to build your grid via code or do it in the abstract designer.

Option 1 (code it - untested)

1. Create a new layout.
2. Set the tagname to v-container
3. Give it a name, for example, mygrid
4. Generate members on the code module you want.
5. Call LoadLayout from your code after you initialize the VueComponent.
6. Then build the grid, just after loadlayout.

Then on your code...

banano.LoadLayout("#placeholder", "myrid")
mygrid.AddRows(1).AddColumns12
Mygrid.AddRows(1).AddColumns8p4
mygrid.BuildGrid
vueComponent.BindVueElement(mygrid)
vuecomponent.AppendPlaceholder

Option 2

Design it with the abstract designer

Off course, you can create the rows via the abstract designer completely. Following that approach would be.

1. Inside the mygrid element you added, add 2 other vueelements, one after another inside the v-container
2. Name one mygridr1 with a tagname = v-row, Also the second one tagname it v-row and give it a name of mygridr2.
3. mygridr2 is just below mygridr1.
4. Inside mygridr1, add a vueelement, name it mygridr1c1, tagname it v-col, on attributes add cols=12.
5. Inside mygridr2, add 2 vueelements, name one mygridr2c1 and the other mygridr2c2, with tagname = v-col.
6. For mygridr2c1, on attributes set cols=8, on mygridr2c2, set attributes cols-4.

Then load the complete layout.

This will help you also, Vuetify Grid System Reference

TheMash

 

[Lello1964]

I've triyed solution 2, i like it, but doesn't work,

I probably didn't understand how to do it.

This if my .bjl


and this is code :

    vuetify = pgIndex.vuetify
    'initialize the component
    tables.Initialize(Me, name)
    path = tables.path
    'load the template
    banano.LoadLayout(vuetify.PlaceHolderName, "vtables")
    vtables.Matrix(1, 1).LoadLayout("vetable")
    vtables.Matrix(2, 2).LoadLayout("vetable1")

I don't know how must do ?

 

[Mashiane]

I'd rather just run a tutorial about this so that its covered once and for all.

As we are still in beta, please note that for this im re-prioritising stuff that I need urgently and will follow on the requests asap, fortunately the grid is next in line.

Ta!

 

[Lello1964]

Hi again,

i have some textfield in a grid, i want know if i can use and how, same layout for all textfield :

es:

    vclienticontainer.Matrix(1, 1).LoadLayout("txtLastName")
    txtLastName.NewTextField("cognome", "Cognome", "", True, "", 0, "Inserire il cognome")
    txtLastName.Filled = True
    clienti.BindVueElement(txtLastName)
    
    vclienticontainer.Matrix(1, 2).LoadLayout("txtFirstName")
    txtFirstName.NewTextField("nome", "Nome", "", True, "", 0, "Inserire il nome")
    txtFirstName.Filled = True
    clienti.BindVueElement(txtFirstName)

may i use : vclienticontainer.Matrix(1, 2).LoadLayout("txtFeld") and vclienticontainer.Matrix(1, 1).LoadLayout("txtFeld"), same layout for all EditTextField ?

Raffaele

 

[Mashiane]

i have some textfield in a grid, i want know if i can use and how, same layout for all textfield :

Please see the textfields module on the BVAD3 demo part 19. I have used the .NewTextField method to load the same layout to different matrix positions. This is via load layout array. Thats the only way I have been able to make it to work with BVAD3.

Ta!

 

[Lello1964]

I've saw, but cannot use for text field.

 

[Lello1964]

[ SOLVED ] work, thanks Mashy.

    Dim txtcognome As BANanoElement = BVAD3.NewTextField(clienti, "txtcognome", "cognome", "Cognome ", "", False, "", 0, "", CreateMap("single-line":True, ":hide-details":True))
    vclienticontainer.Matrix(1, 1).Append(txtcognome.GetHTML)

    Dim txtnome As BANanoElement = BVAD3.NewTextField(clienti, "txtnome", "nome", "Nome ", "", False, "", 0, "", CreateMap("single-line":True, ":hide-details":True))
    vclienticontainer.Matrix(1, 2).Append(txtnome.GetHTML)

    Dim txtindirizzo As BANanoElement = BVAD3.NewTextField(clienti, "txtindirizzo", "indirizzo", "Indirizzo", "", False, "", 0, "", CreateMap("single-line":True, ":hide-details":True))
    vclienticontainer.Matrix(1, 3).Append(txtindirizzo.GetHTML)

 

[Lello1964]

I'd rather just run a tutorial about this so that its covered once and for all.

As we are still in beta, please note that for this im re-prioritising stuff that I need urgently and will follow on the requests asap, fortunately the grid is next in line.

Ta!

Hi Mashy,

i'm working with grid, i have to reduce space between rows, i think must use nogutters but don't know how use it.

Have you information about grid tutorial ?

Raffaele

 

[Mashiane]

Use ":hide-details:true" as a property on your components. Yes, no-gutters helps but for the parent container.

You can also try and decrease the margin by adding this class, "ma-0", this applies margin all of 0 (zero) on the components when applied to the components.

You will help yourself a great deal by reading about the grid from the documentation as I will not touch on everything on the documentation due to the volume of the library, its massive and truly I am expecting people to beef their knowledge up and upskill themselves on this.

Again, here is the link for more information.

This will help you also, Vuetify Grid System Reference

You can also check the documentation about styling etc, and try those out.

PS: Unfortunately I have been busy with work. And honestly I will not do a tutorial about everything on the library. I will avail the grid tutorial as soon as possible.

Ta!

 

[Lello1964]

Hi, this link help to understand set spacing

Spacing — Vuetify

Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5.

vuetifyjs.com