I have a page with a search form and I use vuetify's data-table for the search results, which can be sorted by columns.
If I click on an item in the table, I'm forwarded to that item's edit page. Then, if I click on the back button (this.$route.go(-1)) all the search terms, search results and sorting is gone and I have to do the same search again.
So the question is, how do I retain all the results and sorting selection in the data table?
I guess I can use localStorage with the search form input values?
You could use the localStorage indeed with :value or use and implement the Vuex to centralise your data source.
This would make your data persistent to navigation but not to hard refresh as local storage would.
I ended up using vuex module for storing search form input and url for storing column sorting data. So when I go back, I can fill the form from the vuex store and set sorting from the route query.
Related
I am new to Vue and I am trying to understand some concepts. So I have a website that is a mix of server-side and front-end rendering. When the index is first loaded it will return the first 10 products which are rendered by the server-side. Then the user will use a search filter to search for specific products or just scroll down so more products are loaded. This searching and loading will be done by Vue. Now the question is how to bind the data that is rendered initially by the server with the current data object of Vue?
The documentation says
v-model will ignore the initial value, checked or selected attributes
found on any form elements. It will always treat the current active
instance data as the source of truth. You should declare the initial
value on the JavaScript side, inside the data option of your
component.
So one can load the index without any data, then fire a second request to load the initial data but why waste one HTTP request on that?
I have below two vuejs page. I created filters in my list page like search by user name and email. The filter is working fine, but the issue is when I type something in my search box and search it's working but after that when clicking on the edit user link and after that comes back to the list page the filter is removed and it shows me all data. My question is how can I remember the search I just need suggestions on how can I achieve that.
localstorage or vuex possible solution for that?
1. List of users
2. Edit User
The solution is to save the filter in a vuex state that way it doesnt change when u go back as long as you're still in the same tab and didnt close it.
If you don't refresh the page and navigate between the route's components, it's best to use Vuex, and on the other hand, if you want the same search results to be stored and retrieved even after refreshing the page, use the localStorage.
Furthermore, Vuex would be good to store large lists of data instead of localStorage.
Take a look at this pictures and description that I'm going to describe in the most understandable way possible.... These are my router-links
and on the side is the router-view / ProfileView.vue component that will display the details of that person, just don't mind the reds, it's just that those are very private keys to be displayed online
How do you disable /fix this specific default behavior wherein after you refresh the whole webpage the specific router-link is still selected and the router-view is invisible. Refreshing the page returns like this
Best way is to update the url with the unique identifier (UUID) once the item get selected. Now when you refresh the page just identify the item using the (UUID) in url and apply the specific item using active state. As per the router-view case you can easily handle it with the url defined case - make /profile:id expect a parameter, which will only provided when you click any of the router-link else redirect back to items page with the last selected UUID to highlight the last selected item
I have JQGrid loading data from WCF OperationContract with paging and sorting working fine. I am using "multiselect: true" so that I get the checkbox column and ability to select multiple rows. I've implemented gridComplete:, onSelectAll: and onSelectRow: to capture when checkboxes are checked/unchecked and to maintain checked state upon pagination. I am able to save the checkbox state to the DB via another WCF method call.
What I cannot figure out how to do is load the saved checkbox state for each row along with the other fields specified in colModel:.
Any ideas? I realize I can make a separate WCF service call to get the values, loop through them and set state manually, but that seems like a huge waste and overly clunky.
Thanks in advance.
The simplest way, which I imagine me immediately after reading of your question, is to have additional hidden column (hidden: true property in the colModel for the column) and the checkboxes inside. You can load the selection state from the database an fill the hidden checkboxes. Inside of loadComplete or gridComplete you can use the information to select the rows.
If you would use loadComplete instead of gridComplete you can even eliminate the need to hold hidden row. The callback method loadComplete has data parameter which are initialized with the data originated from the ajax call. So if your server response contain more information as jqGrid need the data will be ignored by jqGrid, but you can see the data in the loadComplete and use the information to set row selection.
I want to query the data from content type without using content query webpart. How could I do this?
My scenario is, I have a page layout, from the page layout I have created a page that contains some site columns values. After clicking on the save button I need to update the field in the page library column. How can I query the data in item updating event of the Site Pages Library.
Any help would be appreciated.
The ItemUpdating event method is passed an SPItemEventProperties parameter named property. This object contains information about the item responsible for firing the event handler. You can access this by calling properties.ListItem[Fieldname] or properties.AfterProperties[fieldname].
Something to note. The value of the SPItemEventProperties.BeforeProperties and SPItemEventProperties.AfterProperties as well as the properties of the SPItemEventProperties.ListItem, varies depending on the Event you are overriding and the type of SP List (List or Document Library). This chart shows these relationships.