Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143752 | Apr 3,2019 08:59 PM UTC | Apr 5,2019 04:32 AM UTC | Vue | 3 |
![]() |
Tags: Data Grid |
<ejs-grid ref='grid' id="grid" :data-source="gridSource" :query="query" :allow-paging="true"
:showColumnChooser='true' :action-begin="actionBegin"
>
<e-columns>
....
</e-columns>
</ejs-grid>
data() {
return {
current_folder: 0,
index : 1,
pageSettings: {
pageSize: 10,
pageSizes: ['5','10','25','50','100','All']
},
gridSource: new DataManager({
url: '/mails',
adaptor: new WebApiAdaptor(),
}),
query: new Query().addParams('folder', this.current_folder ),
}
}
But the issues I have: If I set the query in the data object with this.current_folder in it,
it's not adding the param at all. If i set it fixed it works.
So I tried to use a computed property instead of defining the query in the data attribute
computed: {
query(){
return new Query().addParams('folder', this.current_folder );
}
}
and listen to the change of the item and reload the data
watch:{
current_folder(newValue){
this.folder = newValue;
(document.getElementById('grid')).ej2_instances[0].refresh()
}
}
But here the param is always one behind. For example:
The initial value is 0. It's changed to 50 and the table is reloaded. It loads the data with the value of 0 - not 50.
Then I change it to 15 and reload it, it adds the param of 50 to it. [Expected 15]
Then I change it to 7 and reload it, it adds the param of 15 to it. [Expected 7]
I also tried the actionBegin event but this only contains this data:
}
So how can I set the query correctly that it's using the correct current value?
watch: {
current_folder(newValue){
this.folder = newValue;
(document.getElementById('grid')).ej2_instances[0].query = new Query().addParams('folder', newValue);
(document.getElementById('grid')).ej2_instances[0].refresh();
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.