I would like updates to the dstore appearing in the dgrid without having to call refresh.
do you know why the grid does not remove the old row?
my records has no id property but Ive setup the idProperty correctly.
My grid is expected to receive multiple updates and calling to refresh would probably have performance implications.
So if you can point a way to throttle refresh events it can also help.
Thanks,
Nimrod.
dgrid listens to change events if the store provides them. dstore's Trackable mixin adds change events to the store. Try mixing in Trackable to your store and you should see dgrid automatically render in response to any of the store's add/put/remove calls.
Related
im using this component to make a list of sortable items.
https://sortablejs.github.io/Vue.Draggable/#/simple
I have one array with the items in my view component data.
Then i use an v-for to pain the list, one row for each item in my array.
So everytime i move one item, the array of items gets sorted and change the order of the array items, thats the behaviour of this component.
But i have to make a post call to an api to save the new order fot the list.
So i defined a watcher over the array of items, and everytime it gets sorted by the draggable component, i make the request to the api if the array order has changed.
The problem comes when this request fails, i want to restore the old values in the view, so i dont have one order in the view an another different stored in database.
Inside my watcher i have prevValues and newValues, that i use to compare and check if there is any change in the items order, then make the request, and then, if the request fails, restore the datavalue with the prevValues array.
The problem is that could get to an infinite loop, because when i restore the old values, the watcher over the original array is triggered again, make the request, fails, restore values and so on.
Is there any way to restore old values passed to a watcher without triggering the watcher again?
Thank you
It would be more reliable to react to drag events to trigger your API calls, rather than watching the data. That way your code only does work in response to user action.
Alternatively, stash a copy of the original array and use something like deep-equal to compare it to the latest value to determine if changed before making a call.
I have started to build apps with vuejs recently and have one small issue that I can't get around:
I am using vue-router to jump between pages and lets say I have a huge list where additional items may be injected with ajax, user has to scroll, he click on item, see the details (is in new route) and when gets back list is reinitialized and has to scroll again to be at the point he was previously. Do I have some possibility to keep the state of given component (and view like scroll position) while using vue-router or do I have to keep some cache-instance in main app component and then map it on init?
Thank you.
Essentially, the issue is that your component stores state internally. Navigating away clears the state. There are two ways I see this could be handled.
1) (quickfix) instead of redirecting use another way of displaying the item details (modal, or expand come to mind). This way the state of the component is not lost
2) (the "proper way") store the state. Inevitably, you'll come up against this sooner or later and the best way to deal with storing a state is vuex. https://vuex.vuejs.org/en/intro.html Initially, this will require a bit of learning and add some complexity, but it is a worthwhile investment
I am using the vue-masonry plugin which let me create a masonry grid easily.
I created a system of infinite loading where you scroll to the bottom of the page and it append new pictures to an array binded with the vue-masonry plugin.
The problem happen when I created a system of polling for the new pictures that were upoaded by other users. Those new pictures need to be at the top of the masonry grid.
The plugin use two Vue Directive masonry (parent) and masonryTile (element). masonryTile has a v-for which loop through the array binded with my Vue instance (which does all the heavy lifting, preloading, sanityzing, etc...).
Is there a way in the directives to know the differences between something being appended or prepended? And try to react differently (I know masonry has some append/prepend method) but in here and with this plugin, the items where already added (at the beginning so the prepend works with Vue) but there's no masonry interaction nor redraw (I tried to use the prototype to trigger the redraw this.$redrawVueMasonry();).
So I don't know what's next to do. Continue finding a way to differentiate a prepend from a append and trying to bind it to the respective masonry's methods ? Or another method that I didn't think of...
Thanks in advance for you help
Ps : I don't think my code is really relevant since It's more a way to optimize the plugin. If you want some specific part of my code anymay, tell me in the comment !
This probably comes a bit too late, this being a 10 month old question.
However vue-masonry is able to handle situations where items are spliced anywhere in the array. But to properly update the grid this.$redrawVueMasonry() should be called inside this.$nextTick() like this:
this.$nextTick(() => this.$redrawVueMasonry());
Hope this helps, if not the original poster, someone else.
Here is my problem:
I typically have a paginated datagrid with a lot of rows. I want to be able to edit the data for each row of course but I have 2 constraints on this:
I need the edition form to replace the content of the page (I don't want a popup, modal dialog or side panel)
I don't want to lose the state of the datagrid: maybe I navigated down 5 pages in the datagrid and I don't want to be reloaded on the first page. And actually, I'd rather not reload the data I already had (the edited data will be updated automatically by my persistence layer anyway).
Ideally, I would have liked to have some kind of subrouter but I'm not sure how it would fit the first requirement. Otherwise, I could have a component that would be hidden by default and positions itself on top of the datagrid view when necessary but that feels quite hacky and forces me to have everything in the same template. And I will have to handle a stack of these components if I have several different 'full-screen panel'...
Any idea on a correct way to implement this?
Thanks!
I tried different solutions to no avail unfortunately. I had a long discussion with #Kukks on gitter and we agreed that using subrouters and viewports might be a bit overkill for my use case.
I reverted to my original idea of using absolutely positioned components to hide the previous one in a kind of "deck layout". This is not ideal as I would have liked completely separated views and using components forces me to declare them in the main view but it works well and is very easy to implement...
So: not as clean as I would have liked but much easier to implement and less convoluted.
Consider using Router View Ports
http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/9
When using an Observable store for a dGrid a call to the notify() method will update a record. See this example: Git Hub Drgid Example
However, when there is only one record, notify does not appear to notify the record. This can be seen in the above example by removing all but one stock in stocks.json.
Is this a known issue or is there a work around?
There is a work around for this. Set the cleanEmptyObservers: false on your dGrids. Thanks to https://github.com/SitePen/dgrid/issues/925