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
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
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
All the best,
Alex
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
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
Pavlo Miklashevych
Sr. Frontend Developer
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.
Pavlo Miklashevych
Sr. Frontend Developer
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