In a v-data-table, I have one column with a simple text field, this column containing the text field is sortable. The problem is that when I change the value in the text field, the data is immediately re-sorted and in my case the lines change and in the worst case the line change and the focused input changes too, like in this example: codepen reproduction
For reproduction:
click on the iron header to sort the iron column
change one input
see that the line changed its position and that you're not anymore in the same field
Expected behavior:
sort the iron column
change one input
see that the line didn't change its position and you can keep modify the input
click sort again to reorder the data once you're done.
Is there a way of behaving like in the expected behavior?
Thank you very much for the answers
It looks like you should use a different event on the <v-text-field> component to listen for changes instead of using v-model to bind changes automatically to props.items.iron. Text Field Event Docs here
You could do something like using the blur event so it only updates when your user focuses away from the text field:
<v-text-field
#blur="updateIron"
:rules="[max25chars]"
label="Edit"
single-line
counter
autofocus
></v-text-field>
then in your JS file you'd add a method like this:
methods: {
// ...other stuff here
updateIron(val) {
this.item.iron = val
}
}
Try experimenting with different events to update your values at the appropriate time.
So I found the answer to that, which consist of redefining the header:
I use the slot header.iron in order to redefine a sortIron method only on click : basic demo
What I'll have to do next is to redefine arrows, style, 'asc' and 'desc'
I'm still open to other ways of doing it!
But right now I can follow my wanted behavior which is :
sort the table via the iron column
change one field
press tab, on the next field enter a value
repeat previous step until you're done
finally re-sort the table only by clicking the header
Related
at this moment I have a input field, let say it's being :value bind to a data called apiData,
which will be covered by new data from api call every 10s.
Is there any way to prevent my input field data being changed if the input field is being focused? Cos if i'm typing in the input field while new data returned, what I typed would be gone and covered by the new data.
The input field is
<input
v-on:keyup.enter="$event.target.blur()"
#focus="$event.target.value=''"
#blur="$event.target.value=oddsCell['odds']"
:value="oddsCell['odds']"
/>
You can use the #focus event handlers to set a flag which indicates that the field is being edited right now and prevent the model variable from being overwritten. And the #blur event handler to reset the flag once editing is done.
I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/
Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit.
Here is my code
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="text"
item-value="customer.rating"
single-line
></v-select>
Note: If I use {{customer.rating}} it gives an output like this
{ "id": 1, "text": "Bad" }
and If I select a different element its perfectly change on database. So everything is fine. The only requirement is I want show this value Bad as a selected element when I click on Edit.
Here is the complete code of my project file https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue
Thanks in advance
It's and old question but Let me post my answer to help others as well, after alot of search I have come to this point, and I want to share it with others as well.
//This will load all your ratings in dropdown
<v-select
v-model="customer.ratings"
:items="ratings"
item-text="text"
item-value="id"
label="Rating"
dense>
</v-select>
Now Edit Part
Lets say you want to edit a record, so you will probably pass the record id in edit method of your vuejs then inside edit method of vuejs, you will do an edit axios call for that specific record to first show it inside fields and then you will update. But before update you need to do something inside edit method of your vuejs when you will have already loaded data for that specific id.
Now lets say you have received a record from database according to a specific id, you will see a dropdown id I mean to say a foreign key for a dropdown that you had saved during storing data.
Suppose you have ratings array which holds whole data for a dropdown. Inside this you are having an id and text fields. So you have this ratings array and an object from database during edit for a specific record. Now you are good to go with below code.
Inside Edit Method of vuejs
this.customer.ratings = this.ratings.find(item => item.id === parseInt(res.data.rating_id))
this.customer.ratings = parseInt(this.customer.ratings.rating_id)
Note: I am doing parseInt() it's because when you check in console the primary key is an integer like 1 but foreign key like rating_id is string i-e "1". You can also use two equals == if you are not using parseInt() but I haven't checked that.
For clearly understanding I am just sharing a sample edit code which might help you a bit
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}
I'm not sure what you mean by "... when Im click on Edit." but I will presume you mean when you click on the dropdown menu.
From what you have provided in your jsfiddle, your v-select should be like this:
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="ratings.text"
item-value="ratings"
single-line
></v-select>
This can be found here, in the API props section.
item-text: Set property of items’s text value
item-value: Set property of items’s value
The text is what you see, I believe that text which is the current value of item-text is either undefined or not declared. If this answer doesn't work, then you need to provide more of your code.
Take a look at this example. Here you can see multiselect field that allows user to select multiple rows by pressing CTRL key down.
I have tried to use the keyUp function to capture the CTRL key, in order to somehow prevent user from selecting more than 1 row. But I am not sure hot to do this with mulitiselect xtype.
You might think way would I want a single select instead of multiselect, it is just something I need for my app I am working on. I like the layout of the example and want to keep the structure the same. The only thing I want to change is from multi -> single.
Thanks for any help.
The following config needs to go in your multiselect config. This will set the config for the boundList which is where the multiselect is.
listConfig: {
multiSelect: false
}
I'm using Dojo 1.5 (including dojox). I have a dojox.grid.DataGrid where each row represents a user. When I click a row, I want to redirect to a URL like /users/USER_ID. The user ID is one of the fields in the grid, so all I need to do in my onRowClick callback is to grab the user ID for the row that was clicked.
The click event contains a rowIndex property, and, indeed, I found a (rather old) post elsewhere that suggested I should be able to do:
var row = dijit.byId('grid').model.getRow(e.rowIndex);
/* (Then grab the 0th field of the row, which is the user ID.) */
(Sorry, I've since lost the URL.)
But my grid object has no model attribute. What's up with that? Has the API changed? (My grid certainly is populated with data, which I can see, click, sort by column, et cetera).
So I'm stuck for now. Note, BTW, that it won't work to use rowIndex to directly access the grid's underlying dojo.data.ItemFileReadStore. That's because the grid is sortable, so there's no guarantee that the grid's rows will be in the same order as the store's.
Any hints would be deeply appreciated. I hope that the question is clear, and sufficiently general that any answers can help others in my predicament. Many thanks.
I have a similar scenario and I grab the value like this:
onRowClick: function(e) {
open_link(my_grid._getItemAttr(e.rowIndex, 'object_path'));
}
In this case my_grid is a reference to the datagrid and object_path is the column where I store the path to the object. open_link is of course a custom function of mine that as it implies, requests a server path.
So just change the specifics to suite your case and you should be fine.