We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set the query correctly for dynamic parameter

Thread ID:

Created:

Updated:

Platform:

Replies:

143752 Apr 3,2019 08:59 PM UTC Apr 5,2019 04:32 AM UTC Vue 3
loading
Tags: Data Grid
Chris
Asked On April 3, 2019 08:59 PM UTC

Hello,

i need to reload the data of the grid, if a value changes which is externally set.


<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:
{
     isFrozen: false
     name: "beforeFragAppend"
     requestType: "refresh"
     rows: Array[{...},{...},...]
}

So how can I set the query correctly that it's using the correct current value?

Pavithra Subramaniyam [Syncfusion]
Replied On April 4, 2019 04:56 PM UTC

Hi Chris, 
 
Thanks for contacting Syncfusion support. 
 
We suspect that the issue may happen due to assign the value in nested object. So we suggest you to create the new query in watch to provide the newValue like as following code snippet, 
 
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(); 
        } 
    } 
 
Please get back to us if you have any concern. 
 
Regards, 
Pavithra S. 


Chris
Replied On April 4, 2019 08:33 PM UTC

Hello Pavithra,

I thought of that too and I was close to a solution, but had a few characters to much:

I tried it with:
(document.getElementById('grid')).ej2_instances[0].getQuery() = new Query().addParams('folder', newValue);

but yeaeh that function does not exist.

Thanks for the solution. Works as expected :)

Pavithra Subramaniyam [Syncfusion]
Replied On April 5, 2019 04:32 AM UTC

Hi Christopher, 
 
Thanks for your update. 

We are happy to hear that your requirement has been achived. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards, 
Pavithra S. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon