Error On Grid when updating RowData & has checkbox column for selection

[carlos mendez]

HI, the issue was this 

1.- I have Created a GRID using local data it has checkbox column for make selection  the data is loaded  & select only per checkbox. 

const gridSettings = {

editSettings: { allowEditing: true, allowAdding: true, allowDeleting: false, mode: 'Normal' },

loadingIndicator: { indicatorType: 'Spinner' },

selectionOptions: { type:'Multiple', mode:'Row', persistSelection: true, checkboxOnly: true, checkboxMode: "ResetOnRowClick" },

resize: { mode: 'Auto' },

allowSelection: true, allowPaging: false, allowSorting: true, allowMultiSorting: false, allowUnsort :false,

}

the grid has. fields    id, employee_ID, employee_fullName,  amount and processed . 

amount and processed  are null by default  and use template for show values 

2.- I select the Rows i need 

3.- i make ajax request to serverside and send only IDs of the selected rows 

4.- when i finish the request. i get the data processed and make a loop for update the row data  

5.- After getting the new data 

grid.clearSelection();

newData.forEach( (item) => {

var idUse = item.personal_id

const rowIndex = grid.getRowIndexByPrimaryKey(item.personal_id);

        const rowElement = grid.getRowByIndex(rowIndex);

        const rowInfo = grid.getRowInfo(rowElement);

        var recordNewData = {...rowInfo.rowData}

recordNewData.importe_mvt_success = true

recordNewData.amount = item.amount

grid.setRowData( idUse, recordNewData)

})

so when finished the GRID seems to lose all CSS classes that makes the visual grid  also if i try to remove the checkbox column, which is no longer needed then breaks the same way  (before or after updating columns) 

var grid = this.$refs.gridMovtos.$el.ej2_instances[0]

var checkColumn = grid.columns.find(col => col.type === 'checkbox')

var useVal = false

if (checkColumn){

checkColumn.visible = useVal;

}

grid.refreshColumns()

So my unique solution so far is to destroy the grid while updating a new copy of data and afterwards create it again, with other column Configuration  (without checkbox)  but doesn't seem to be a nice solution. 

The grid is inside Quasar project. and the screen  i have 4 tabs  (this one resides in the second TAB), also the second tab has a STEPPER  and the grid resides in the 3rd Step  tab component and stepper have :keep-alive="true"

any pointers or suggestions ? 

[Santhosh Iruthayaraj]

Hi Carlos Mendez,

Greetings from Syncfusion Support.

Based on the information you have provided, we have created a Quasar project where the Grid component is rendered inside a Stepper, which is placed within a Tab component. The "keep-alive" feature has been enabled. During our testing, we observed that after updating the Grid records, the styles were retained as expected, records were updated correctly with the fetched data and the checkbox column has been hidden as expected.

For your reference, we have attached a GIF demonstration of the behavior along with the sample project below.

However, we understand that you are experiencing difficulties in your implementation. Therefore, to help us investigate further, please try to reproduce the issue using the provided sample. Alternatively, you may share a sample project that replicates the issue. This will allow us to identify the root cause and provide an accurate solution.

We look forward to your response.

Regards,

Santhosh I

Attachment: quasargridapp_db876d9f.zip

[carlos mendez]

Thanks for the reply,  I'm gonna prepare the case / code sample cause  i been digging deeper and has to be something related with updating times cause at the end i modify the code to  

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


var grid = this.$refs.gridMovtos.$el.ej2_instances[0]
grid.clearSelection();

await sleep(500) 

newData.forEach( async (item) => {
    var idUse = item.personal_id
    const rowIndex = grid.getRowIndexByPrimaryKey(item.personal_id);
    const rowElement = grid.getRowByIndex(rowIndex);
    const rowInfo = grid.getRowInfo(rowElement);
    var recordNewData = {...rowInfo.rowData}
    recordNewData.importe_mvt_success = true
    recordNewData.amount = item.amount
    grid.setRowData( idUse, recordNewData)
    await sleep(500) 
})
var checkColumn = grid.columns.find(col => col.type === 'checkbox')
var useVal = false
if (checkColumn){
   checkColumn.visible = useVal;
}
await sleep(1000) 
grid.refreshColumns()

And  definitely stop doing the  loss of css 

The part i tried  and i sure had issues was  if i use this code  

    grid.setRowData(idUse, { importe_mvt_success : true , amount: item.amount }) 
    // Try to modify only some fields only instead of passing the whole record again 

but anyway gonna try to replicate the CSS and the same estructure i have in a sample proyect  for send you 

[Santhosh Iruthayaraj]

Hi Carlos Mendez,

We have validated your query regarding CSS related issue by passing only the two fields that were modified, excluding the rest from setRowData. During our testing, we did not observe any CSS-related issues. We also verified the behavior with and without the specified delays. Modified sample has been attached below for your reference.

However, when using the "setRowData" method, if only the modified fields are provided and the remaining fields are omitted, the missing fields may be overwritten with empty values. This behavior occurs because the method replaces the entire row object. To ensure accurate row updates, it is recommended to supply the complete row data, including both unchanged and updated fields.

This can be achieved by the approach that you are previously using, which involves retrieving the entire row data, updating only the necessary fields, and then updating the row data using the "setRowData" method. Please refer to the code snippet below:

 

newData.forEach(async (item) => {

  var idUse = item.personal_id

  const rowIndex = grid.getRowIndexByPrimaryKey(item.personal_id)

  const rowElement = grid.getRowByIndex(rowIndex)

  const rowInfo = grid.getRowInfo(rowElement)

 

  var recordNewData = { ...rowInfo.rowData }

 

  recordNewData.importe_mvt_success = true

  recordNewData.amount = item.amount

 

  grid.setRowData(idUse, recordNewData)

})

 

We suspect that the CSS issue you are experiencing might be specific to your application's implementation. Without a reproducible sample, it is difficult to perform a thorough validation. We would appreciate it if you could either reproduce the issue using the provided sample or share a sample that demonstrates the behavior.

We will be waiting to hear back from you.

Regards,

Santhosh I

Attachment: quasargridapp_73ee8f35.zip