JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › How to best integrate Vuex store with DataAdapter while keeping databinding
Tagged: datagrid binding
- This topic has 4 replies, 3 voices, and was last updated 3 years, 10 months ago by admin.
-
AuthorPosts
-
January 20, 2021 at 10:21 am #101341shelkovnikovdvMember
Hello, friends!
Before inventing a new bicycle, I would like to know your opinion.
We use Vue 2.x as the main engine and your library as the UI-interface.
The problem arose when we tried to connect Vuex store to the DataAdapter for the datasource grid and lost databinding 🙁
What, in your opinion, are the standard solutions?January 20, 2021 at 12:34 pm #101343yavordashewMemberHi Дмитрий Шелковников,
In your situation in order to give you the best solution it will the best to share some of your code and review it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/January 21, 2021 at 7:56 am #101348shelkovnikovdvMemberHello, friends. Made such an example with code.
1. We have a part in the Vuex storage where we store user data (store\modules\users.js )const state = { all: [] }; const mutations = { SET_ALL(state, payload) { state.all = payload.data; } } const actions = { setItems(context, data) { return context.commit('SET_ALL', { data }); } }
2. We have a Vue list component where we only display and edit usernames. How the data source acts $store.state.users.all
export default { name: 'user-list', props: { value: { type: Array, default: () => $store.state.users.all } } }
3. We have a Vue component with smart grid where you can view all information about users, add, change and delete.
For Smart.DataAdapter me also use $store.state.users.allexport default { name: 'user-grid', methods { getDataSource(data) { return new Smart.DataAdapter({ dataSource: $store.state.users.all, keyDataField: 'id', dataFields: [ 'id: number', 'name: string', 'nick: string', ] }); } } }
4. Now if something is changed in ‘user-list’ it will be reflected in ‘$store.state.users.all’, but ‘user-grid’ will not be automatically updated
Accordingly. If now if something is changed in ‘user-grid’ it will find not automatic reflection in ‘user-list’ and ‘$store.state.users.all’ in the Vuex store will not be updated either
This is our problem. But before rushing into battle, I would like to know if we are reinventing the wheel.January 26, 2021 at 12:43 pm #101381shelkovnikovdvMemberHello, friends!
In addition
1) I see in the debugger how DataAdapter notifies about data changes in Smart-Grid through DataAdapter._notify
2) I don’t see how Smart-Grid notifies that it has changed the data in DataAdapter
Is there something I don’t understand or are there no such notifications?
Best regards, Dmitry.January 26, 2021 at 1:06 pm #101382adminKeymasterHi Дмитрий Шелковников,
You can look at this example how to update data in the Grid dynamically: https://www.htmlelements.com/demos/grid/datagrid-update-data/. If you want to update the data set, you can create a new dataAdapter instance and set the Grid’s dataSource property to it. Alternatively, you can use the Grid API to make updates: https://www.htmlelements.com/demos/grid/live-update/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.