Unable to get grid data when row is in edit mode

[Cyril Ovely]

Hi Team,

We are working on a requirement where we are supposed to get grid data even if the row is in edit mode.

In the below screenshot I want to get grid's data even if the row is in edit-mode

Not able to get gridData with the getCurrentViewRecords() method

let gridData = this.$refs.SI_lineItem_Grid.getCurrentViewRecords()

console.log(gridData)

Thanks & Regards,
Cyril Ovely

[Rajapandiyan Settu]

Hi Cyril,

Thanks for contacting Syncfusion support.

In EJ2 Grid, the edited data will be updated to the dataSource only after the save action. So, it is not possible to get the dataSource (`grid.dataSource/getCurrentViewRecords()`) with edited values during the CRUD operations.

If you execute the getCurrentViewRecords method during the CRUD operation, it does not holds the edited values. Since the edited value is not saved yet to the Grid.

But you can get the currently edited cell values during the CRUD operation by using the getCurrentEditedData method.

 

    btnClick: function (args) {

      if (this.$refs.grid.ej2Instances.isEdit) {

        var formEle = this.$refs.grid.ej2Instances.editModule.formObj.element;

        var currentEditedRowData = this.$refs.grid.ej2Instances.editModule.getCurrentEditedData(formEle, {}); // get the edited data

        console.log(currentEditedRowData);

      } else {

        alert("Grid is in read mode");

      }

    }

 

Sample: https://codesandbox.io/s/vue-template-forked-yo2x4u?file=/src/App.vue

Please get back to us if you need further assistance with this.

Regards,

Rajapandiyan S

[Cyril Ovely]

Hi Rajapandiyan,


Thanks for your prompt reply. I think it serves the requirement but I also need more help from you.

On BtnClick, I also want to save the current row to the grid.

Regards,
Cyril Ovely

[Rajapandiyan Settu]

Hi Cyril,

Thanks for your update.

Query: On BtnClick, I also want to save the current row to the grid.

By using the toolbar’s Update button, you can save the edited data in Grid. If you want to save the data from external button click, you can achieve this by executing endEdit method of Grid.

endEdit: https://ej2.syncfusion.com/vue/documentation/api/grid/#endedit

 

    saveBtnClick: function (args) {

      if (this.$refs.grid.ej2Instances.isEdit) {

        this.$refs.grid.ej2Instances.endEdit(); // save the edited data to the Grid

      }

    }

 

Sample: https://codesandbox.io/s/vue-template-forked-yxxhhu?file=/src/App.vue

Please get back to us if you need further assistance.

Regards,

Rajapandiyan S

[Cyril Ovely]

Hi Rajapandiyan,

Thanks for your reply. It helped to save row in edit mode before submitting to API. But I am facing another challenge with endEdit().

In actionBegin() I am updating other variables of the row before saving to grid based. Here I want to submit grid if endEdit() event is successful. Please help me achieve this.

Please refer to updated example
Vue Template (forked) - CodeSandbox  

 

Regards,
Cyril Ovely

[Rajapandiyan Settu]

Hi Cyril,

We are unable to understand your requirement at our end. Kindly share the below details to provide a better solution.

1. Explain your requirement in detail with a video demo.
2. Share the complete code you have used.
3. Are you want to modify the edited data before executing the endEdit method?
4. Where you have executed the endEdit method?

Regards,

Rajapandiyan S

[Cyril Ovely]

Hi Rajapandiyan,

I want to restrict saving row if freight value is greater than 25, so I have added a condition in actionBegin method

 

Now when user is editing the row with Freight value more than 25 and clicks on save button
endEdit() is not successful but still we are getting grid instance after which I will submit grid

How can we get the status of endEdit() before submitting the grid?

Please refer to the attached CodeSandBox example
Vue Template (forked) - CodeSandbox

Regards,
Cyril Ovely

Attachment: syncfusion_cab6f07d.zip

[Rajapandiyan Settu]

Hi Cyril, 

Thanks for your update.

We have created a new ticket under your account for the reported query. We suggest you follow up with that ticket for further updates.

Regards, 

Rajapandiyan S