setCellValue not updating data for items which are not equal to selected filter

[Volodymyr]

Hi,

I'm trying to build real time dashboard with syncfusion grid with filtering functionality, when user filter something and data was changed using 'setCellValue' method there are no chance that items which are not equal to selected filter will be updated and visible if after update their value will be eaqul to selected filter.

Could you please advise how can i reach this?

App example:
https://stackblitz.com/edit/angular-166959-sample-gbe1rs?file=app.component.ts
Step to reproduce:
1.Select filter for 'ShipCountry' column as 'Sweden'.

2.Click 'Refresh column'

3.Unvisible rows should be visible as we updated their 'ShipCountry' fields as Sweden but it not and even their value was not updated as needed.

Br Volodymyr

[Vikram Sundararajan]

Hi Volodymyr,

Greetings from Syncfusion support,

We understand that you're looking to change the cell value after filtering. After reviewing your sample, we noticed that the cell value change was based on the currentViewRecords, which resulted in only the first three rows being affected after filtering for 'Sweden'. To address this, we have made modifications to the sample. Please refer the below code snippet and sample for more reference,

App.component.ts

 

 refreshColumn() {

   let rows = this.grid.getCurrentViewRecords();

    let Location: string[] = ['Sweden'];

    let field = 'ShipCountry';

    for (let i = 0; i < rows.length; i++) {

      const randomIndex = Math.floor(Math.random() * Location.length);

      const randomLocation = Location[randomIndex];

      this.grid.setCellValue(

        rows[i]['OrderID'],

        field,

        'randomLocation'

      );

      }

  }

Sample: https://stackblitz.com/edit/angular-166959-sample-pnz8be?file=app.component.ts

Please let us know if you have any further queries.

Regards,

Vikram S

[Volodymyr]

Hello, it's not exactly what I was looking for.

When a user applies a filter and then I attempt to update the grid data using the 'setCellValue' method, I've noticed that any items not matching the current filter criteria do not get updated.

Let's we have such datasource:

10248	Maria	7/4/1996	$32.38	7/16/1996	Sweden
10249	Ana Trujillo	7/5/1996	$11.61	7/10/1996	Sweden
10250	Antonio Moreno	7/8/1996	$65.83	7/12/1996	Brazil

User apply filtering by 'Sweden':

10248	Maria	7/4/1996	$32.38	7/16/1996	Sweden
10249	Ana Trujillo	7/5/1996	$11.61	7/10/1996	Sweden

Than in real-time websocket event call setCellValue method:

setCellValue('10250','Country','Sweden')

After that I'm expecting that user will see 3 lines:

10248	Maria	7/4/1996	$32.38	7/16/1996	Sweden
10249	Ana Trujillo	7/5/1996	$11.61	7/10/1996	Sweden
10250	Antonio Moreno	7/8/1996	$65.83	7/12/1996	Sweden

But it's not updated and user still see only two lines:

10248	Maria	7/4/1996	$32.38	7/16/1996	Sweden
10249	Ana Trujillo	7/5/1996	$11.61	7/10/1996	Sweden

So the data source wasn't updated.

My goal is for all relevant items to become visible if they match the filter criteria after an update, ensuring the dashboard accurately displays the current state of the data.

Could you provide any advice or guidance on how to solve this issue?

Br Volodymyr

[Vikram Sundararajan]

 

Hi Volodymyr,

 

We understand that your request to update data using setCellValue after filtering, even if the data is not available in the filtered records. Currently, our architecture supports updating only the datasource within the filtered records. Regrettably, updating data outside of these filtered records is not feasible within our current framework.

 

Regards,

Vikram S

[Volodymyr]

Thanks for your answer, what you can advise to do without setCellValue in my case?

Br Volodymyr

[Aishwarya Rameshbabu]

Hi Volodymyr,

Upon reviewing your inquiry, it appears that you are attempting to display filtered records and update them with new records with the same filter value updated using the setCellValue method. This request seems to be unique as the default behavior in Grid filtering is to only displays the filtered records in the user interface.

Kindly provide further clarification on the specific requirements for adding values using setCellValue after filtering and to show to them on the filtered records. Additionally, please share the code lines used for updating the records using setCellValue as because only the filtered records are visible on the user interface after filtering, yet you have indicated that you are updating non-visible records in the data source with the filter value.

Please share the requested details that would be helpful for us to assist you further in achieving the requirement.

Regards

Aishwarya R

             

[Volodymyr]

You totally misunderstand me.

Lets go simply.

What is the best way to edit data source of grid progrtamaticcally, visible and not visible items(after filtering was applied)?

I've seen 4 option:

-directly edit dataSource - is it good way for performance?

-setCellValue: I'm not ok with it as it edit only visible rows

dynamicData.forEach(user => {

const index = this.dataSource.findIndex(user => user.userId === user.userId);

if (index === -1)

this.userActivity.unshift(user);

else {

Object.keys(user).forEach(key => {

this.grid.setCellValue(

user.userId,

key,

user[key]

);

});

}

});

-updateRowValue: how to use it if my primary key value is string? And will it update not visible rows?

-updateRow: I'm not ok with it as it edit only visible rows, if I'm applying filtering getRowIndexByPrimaryKey(user.userId) return -1

dynamicData.forEach(user => {

const rowIndex = this.grid.getRowIndexByPrimaryKey(user.userId);

if (rowIndex && rowIndex !== -1)

this.grid.updateRow(rowIndex, user);

else

this.grid.addRecord(user)

});

this.grid.refresh();

Thanks for your help!

[Aishwarya Rameshbabu]

Hi Volodymyr,

Please refer to the below documentation on Performing CRUD action programmatically,

Documentation Link: Perform-crud-action-programmatically

By referring to the methods listed in the documentation topic above, you can update the values of the rows that are currently visible within the viewport based on the row index or primary key value. In cases where you need to update both visible and non-visible records after filtering, it is recommended to directly update the dataSource of the Grid. However, please note that after changing the dataSource directly, you should refresh the Grid to get the updated data, which may also lead to performance delays. But this is the only feasible method to update the non-visible records. We have made modifications to your sample to accommodate this requirement where the adding of records is done using the addRecord method of the Grid and updating of records through directly changing the dataSource. You can find the code example and the sample provided below also please refer to the attached video demonstration.

App.component.ts

    let gridData: any= this.data;    

    dynamicData.forEach(updateRow => {

      const index = gridData.findIndex((row) => row.OrderID === updateRow.OrderID);

      if (index !== -1) {

        gridData[index] = updateRow;

      }

      else  {

        this.grid.addRecord(updateRow);

      }

    });

    this.grid.refresh();

 

Sample: https://stackblitz.com/edit/angular-166959-sample-jrqip5?file=app.component.ts,data.ts,app.component.html

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R

Attachment: 187101Demo_556cb1ce.zip