Refresh Grid does not work for some pages

[William Morgenweck]

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.

Thanks

[Pavithra Subramaniyam]

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. 

 

Regards, 

Pavithra S. 

[William Morgenweck]

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]

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. 

 

[Vue] 

 

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-columns> 

            <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> 

          </e-columns> 

        </ejs-grid> 

    </div> 

`, 

 

  .   .   . 

  methods:{ 

    update:function(args){ 

     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. 

 

  

    paging:function(args){  

      if(this.$refs.grid.$el.ej2_instances[0].allowPaging){  

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

      }  

      else{  

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

      }  

    },  

  

  

Sample : https://next.plnkr.co/edit/rkvM3h5rxotiCsQg   

 

Regards, 

Pavithra S. 

[William Morgenweck]

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];

      axios({

        method: "post",

        url:

          "https://restapi.azurewebsites.net/api/SaveSearchData",

        params: {

          value: JSON.stringify(this.editedItem)

          // value: this.editedItem

        }

       

      })

        .then(function(response) {

          console.log(response);

        })

        .catch(function(error) {

          console.log(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]

Hi William, 

 

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, 

 

Sample: https://next.plnkr.co/edit/qItbB5q9FAMj4AFu 

 

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.

 

Regards, 

Pavithra S.