[VUE] Need click drag + Add column feature in [VUE]

[Webethics]

HTML
https://webethics.online/largo_vue_grid_demo/
u - wes
p - wes

we have implemented the click drag + Ability to add Column using HTML. But we need to get this done using VueJs. Can we get this done using the VueJs package as well?

Thanks

[alex.l]

HI Webethics,

Did you check our Vue integration examples?
https://bryntum.com/examples/grid/#example-vue-javascript-advancedgrid
and our guide how to use our Vue wrapper?
https://bryntum.com/docs/grid/#guides/integration/vue.md
Just use our grid as a Vue component:

<grid
    ref              = "grid"
    :columns         = "columns"
    :data            = "data"
    @selectionchange = "onSelectionChange"
    :searchFeature   = true
</grid>

All the best,
Alex

[Webethics]

Hi Alex

Thank you for the quick response.

I already checked these Demos but I do not see the feature to Drag drop the row + Ability to add the column.
https://bryntum.com/examples/grid/#example-vue-javascript-advancedgrid

I also implemented the grid using the VueJs by following this URL:
https://bryntum.com/docs/grid/#guides/integration/vue.md

But Problem is only these two features:
Drag drop the row
Ability to add the column.

I need these two features on VueJs. Do your package provide this or I need to buy this to use this feature?

This is exactly how I need this: Currently it is on HTML using your Grid package.
https://webethics.online/largo_vue_grid_demo/
user - wes
pass- wes

Looking forward to a quick response.

Thanks

[pmiklashevich]

Hello,

To add a column just add a new column record to the columns property of the grid.
You can try it here: https://bryntum.com/examples/grid/vue/javascript/columntypes/dist/index.html

bryntum.query('grid').columns.add({ text : 'New column', field : 'name', width : 150 });

Note, bryntum.query('grid') is a debugging tool to reach the grid instance in console. Please use gridInstance in your app instead.

RowReorder is off by default. Just need to enable it. Please read how to do it here: https://bryntum.com/docs/grid/#guides/integration/vue.md#supported-options

<grid
    :rowReorderFeature   = true
</grid>

Both should work in trial. Please let us know if something doesn't work for you.

Best,
Pavel

[pmiklashevich]

I have checked the Vue wrapper and see the rowReorder feature is missing there. We're preparing auto-generator for all features and properties. Meanwhile please modify the wrapper and add there this line:
rowReorderFeature : { type : [Object, Boolean], default : undefined }
Then build the wrapper and the feature should be available after this.

[Webethics]

Great thanks

It worked for me.

[Webethics]

Hello

I need to use the grid component multiple times on the same page with vue js.
I have passed different ref properties for each grid. The grid is displayed well but some features of the grid not working like remove rows from a particular grid.

For removing the row from the grid I have used the below code
bryntum.query('grid').selectedRecord && bryntum.query('grid').selectedRecord.remove();

This remove functionality code is working fine for grid1 but not for grid2

Code for the grid: https://prnt.sc/zudosn
Output for the grid: https://prnt.sc/zud5x8

Thanks

[mats]

@Webethics Please start new thread for every question you have.