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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Refresh Grid does not work for some pages

Thread ID:





144291 Apr 29,2019 12:20 PM UTC May 8,2019 03:41 AM UTC Vue 5
Tags: Data Grid
William Morgenweck
Asked On April 29, 2019 12:43 PM UTC

In your demo https://ej2.syncfusion.com/vue/demos/#/material/grid/dialog-template.html I don't see where you need to refresh the grid so it will display the new data.  When I do it with a custom dialog box I need to use 

1. Object.assign(this.content[this.editedIndex], this.editedItem); 2. this.content = [...this.content];

However if the item is on anything other than page one then the display is not updated.

If I edit a value on page 2 if I have 5 items to the page it will not update the grid however
if I change the paging to 10 and then the item is on the first page it does update.


Pavithra Subramaniyam [Syncfusion]
Replied On May 1, 2019 06:00 AM UTC

Hi William, 
Thanks for contacting Syncfusion support. 
By default, the Grid will be automatically refreshed while we perform CRUD action. We have handled this refresh action in our Grid source. So you do not need to refresh the Grid after perform add/edit/delete action in Grid. Also, we would like to inform that the Grid will save the newly added record at always top of the first page or always bottom of the last page. This is the default behavior of the Grid. So please provide more details about your issue and full Grid code snippet to us. This will help us to provide the solution as early as possible. 
Pavithra S. 

William Morgenweck
Replied On May 1, 2019 11:24 AM UTC

Sorry- but I am not using the standard CRUD actions because of business rules and various items.  I am using a custom form with  Object.assign(this.content[this.editedIndex], this.editedItem);
this.content = [...this.content];.  

When this is used it the item is on the first page of display the grid updates but if it is on any other page it does not.  So if I have a grid with 5 items per page and I edit item number 8 and save it the Grid does not update.  If I change the number of items per page to 10 and then change it is does update.  You can imagine that it makes it a bit difficult to edit record number 500 

FYI- sometimes my data is coming from two or more different web API's and saving to the original source is not possible.

Pavithra Subramaniyam [Syncfusion]
Replied On May 6, 2019 10:49 AM UTC

Hi William, 
In our EJ2 Data Grid, you can perform the CRUD actions only for the current view records. This is the default behavior. So if you want to update the changes for the invisible rows, you can made the changes in “grid.dataSource” property while using the local data. Please refer to the below code example, documentation link and sample link for more information. 
new Vue({ 
              el: '#app', 
              template: ` 
    <div id="app"> 
         <ejs-button @click.native='update'>Update</ejs-button> 
        <ejs-grid   :pageSettings="pageSettings" :allowPaging='true'  ref="grid" :dataSource="data" > 
            <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> 
  .   .   . 
     this.$refs.grid.$el.ej2_instances[0].dataSource[8].CustomerID = "Changed"; 
    provide: { 
      grid: [Page] 
Or you can also use the suggestion of dynamically enabling the page while updating the cell as provided in the below sample. 

       this.$refs.grid.$el.ej2_instances[0].allowPaging = false;  
        this.$refs.grid.$el.ej2_instances[0].allowPaging = true;  
Pavithra S. 

William Morgenweck
Replied On May 6, 2019 10:58 AM UTC

Hi-- Thanks for the input but that's not is happening. 
If I have paging set for 5 items per page and I go to page 2 to edit record number 7.  I have my own edit form and when it is saved

 saveSearchData() {
      Object.assign(this.topGridContent[this.editedIndex], this.editedItem);
      this.topGridContent = [...this.topGridContent];

        method: "post",
        params: {
          value: JSON.stringify(this.editedItem)
          // value: this.editedItem
        .then(function(response) {
        .catch(function(error) {
is run--

If the item is one of the first five the grid is updated.  But if you are on the second page and records 6,7,8,9,10 are shown and you edit record 7 it does not update the visible grid.  I am only working with visible rows 

Pavithra Subramaniyam [Syncfusion]
Replied On May 8, 2019 03:41 AM UTC

We have prepared the sample with your code. But unfortunately the reported issue was not reproduced at our end. So we have attached our sample in the below link for your reference, 
Also, we would like to know the following details to provide the solution for this issue as early as possible, 
  1. Please ensure whether “this.editIndex” has the proper index value or not.
  2. Share your full Grid code.
  3. How do you provide the data source to the Grid (i.e local or remote data)?
  4. Share the video demo of your issue if possible.
  5. If possible, try to reproduce the reported issue in the above sample and send back to us.
Pavithra S. 


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