How to set the query correctly for dynamic parameter

[Chris]

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]

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]

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]

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. 

[Manzur Alahi]

Hello, How can I achieve this same functionality for your spreadsheet component? There is no reload function like gird.refresh(); 

[Thaneegairaj Sankar]

Hi Manzur,

We have validated your reported query. You can be able to achieve your requirement in spreadsheet component. Please find the below code snippet,

     

var spreadsheet = this.$refs.spreadsheet.$el.ej2_instances[0];

spreadsheet.refresh();

 

For your convenience, we have prepared the sample on your requirement. Please find the link below.

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-867866913-511788827

Please contact us if you need any further assistance.

Regards,

Thaneegairaj S