Does Collaborative Editing include cell highlighting?

Question

I am researching various React JS components to replace an existing Excel spreadsheet a client of mine is using to track orders. I have a prototype of another solution I built using a custom data grid that uses Web Sockets to notify subscribed users of changes in the cell data. My next task is to do the same with cell highlighting - a major part of why they use Excel. A simple use case is a CSR updates a cell for the 1st time, they manually change the cell background to yellow and if it changes after that, the text is also changed to red. This is to alert the other team members that a change was made to an order. Can the Spreadsheet component using collaborative Editing also notify all users of changes to the cell highlighting? I know that I will have to persist that change in a database but I have no idea if the args passed in the change event includes this data.

Sangeetha Priya Murugan · Answer

Hi Patrick,We have already provided the
collaborative editing support for our EJ2 Spreadsheet. And your requirement can
be achievable for more details, please refer the below link.https://ej2.syncfusion.com/react/documentation/spreadsheet/use-cases/collaborative-editing/Could you please check the above link and
get back to us, if you need any further assistance on this.Regards,Sangeetha M

Patrick Dezenzio · Answer

I already have viewed that documentation.  My question was for replacing your solution using SignalIR with just plain WebSockets and I was able to do that this past weekend.  The data that is contained in the packet sent to the server contains everything I need with one caveat.  My backend is node js using Sequelize and express JS interacting with a Postgres database.  I persist all changes a user makes to the Spreadsheet with the exception of cell highlighting.  I have yet to incorporate those changes because I haven't decided if I want to create new CellStyles table with the keys being the primary key + Row ID of the parent table and then join that table or add columns to the parent table for each column that allows highlighting.  They use an Excel worksheet that does all of that and to reproduce it using your Spreadsheet component seems like an ideal choice.  The issue is whatever columns I have in the select also render as columns in the spreadsheet, which I don't want.  I need the data but don't want to show the CSS style columns.  I'll need to take a look but I don't think Spreadsheet will allow me to choose what columns to render if I select them.  Is there a way to filter just the columns I need?

Sangeetha Priya Murugan · Answer

Hi Patrick,We suspect that you need to achieve cell
formatting (cell highlight) in collaborative editing, and it will work. When we
apply cell formats actionComplete event will trigger and it send the
action details to server to update other spreadsheets. We have done this
approach using signalR package in our end. Meanwhile, you need to display the
certain columns from the datasource instead of showing all column values. And
it can be achievable in our spreadsheet by using the query property. For
more details regarding this requirement. Please refer the below links.https://ej2.syncfusion.com/javascript/documentation/spreadsheet/data-binding/#remote-data
For your convenience, we have prepared
the sample based on our suggestion. In this we have render the selected column
using query property in range settings. Please find the link below.Sample Link: https://stackblitz.com/edit/react-kyj99k?file=index.js,data.jsCould you please check the above links
and get back to us with more details like video demonstration and detailed
description? If we misunderstood your requirement or need any further
assistance on this.Regards,Sangeetha M

Patrick Dezenzio · Answer

Thanks for the reply.  I understand the part where I can update all of the client's spreadsheets when another user changes the cell background.  I even have the code setting the appropriate data base column with the CSS data for that cell.  I need to do that so I can persist the cell's CSS when the user closes the application and opens it back up later.  It's easy to set the data on the spreadsheet but I would also need to set each cell's CSS based on any CSS that was persisted to the data base or their spreadsheet won't show any of the saved CSS since the last time they had the spreadsheet open.  Is there a way to build each cell's CSS during the initial load of the spreadsheet?

Sangeetha Priya Murugan · Answer

Hi Patrick,You can be able to achieve this
requirement by using the cellFormat method. In created event you can
update the CSS for each and every cell based on the database values using cellFormat
method. For more details regarding this, please refer the below links. https://ej2.syncfusion.com/react/demos/#/bootstrap5/spreadsheet/cell-formatting
https://ej2.syncfusion.com/react/documentation/spreadsheet/formatting/#text-and-cell-formattingCould you please check the above links
and get back to us, if you need any further assistance on this.Regards,Sangeetha M

Patrick Dezenzio · Answer

Thanks for the info, it helps a bit more. I do see an issue related to how your examples deal in absolutes. Your references to cells are in absolute ranges. The company I am working with has a variable number of orders, fluctuating sometimes by the minute. I wonder if I can set the cell range dynamically since it is a string. I also have one other issue to figure out and that in their case, the cell highlighting is determine not by the value contained in that cell but what is in another cell. Keep in mind I have to persist each cell's style so if a user closes the application and then reopens it later, they need to see the spreadsheet with all of the current cell styles. For now, I am adding a separate indicator column for every column they update. I will eventually create a new table and reference it. So if PERSON_NAME_IND has a value of 10, PERSON_NAME will have a yellow background. If it's 11+, it will have a yellow background and the text will be red. I am keeping 1-9 open for cases where they highlight columns in other color schemes. Is there a way to set the cell range so it's a column? I do see where you don't support row/column formatting, so I might have to build the cell range dynamically. Thanks!

Sangeetha Priya Murugan · Answer

Hi Patrick,Currently, we don’t have support to update
cell style for whole column. However, we can be able to achieve this by using
the queryCellInfo event and setCell method. In this event we have
send the row index and column index as an argument, by checking the index you
can update the style as like as below.Code Block:

queryCellInfo(args) {
      let sheet = this.spreadsheet.getActiveSheet();
      if (args.colIndex == 0) {
        setCell(
          args.rowIndex,
          args.colIndex,
          sheet,
          {
            format: '0.00E+00',
            style: {
              borderBottom: '1px solid #000000',
              borderLeft: '1px solid #000000',
              borderRight: '1px solid #000000',
              borderTop: '1px solid #000000',
              fontSize: '14pt',
              fontWeight: 'bold',
              backgroundColor: '#ffff00',
              textAlign: 'right',
            },
          },
          true
        );
      }
    }

For your convenience, we have prepared
the sample based on our suggestion. Please find the link below.Sample Link: https://stackblitz.com/edit/react-msayvs?file=index.js
For more details, please refer the
below link.https://www.syncfusion.com/kb/13185/how-to-apply-cell-formats-and-number-formats-globally-in-spreadsheet
Could you please check the above links
and get back to us, if you need any further assistance on this.Regards,Sangeetha M