Ways to update the style of the row (or cell) during runtime (e.g. CxGrid has CustomDrawCell and Invalidate(False))

[alex153410]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid
• [ ] React Chart
• [ ] React Scheduler

Description

Here is my example https://codesandbox.io/s/pyzw2z6zzx :

import React from "react";
import { render } from "react-dom";
import // State or Local Processing Plugins
"@devexpress/dx-react-grid";
import {
  Grid,
  Table,
  TableHeaderRow
} from "@devexpress/dx-react-grid-bootstrap3";

class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      columns: [
        { name: "name", title: "Name" },
        { name: "sex", title: "Sex" },
        { name: "city", title: "City" },
        { name: "car", title: "Car" }
      ],
      rows: [
        { sex: "Female", name: "Sandra", city: "Las Vegas", car: "Audi A4" },
        { sex: "Male", name: "Paul", city: "Paris", car: "Nissan Altima" }
      ],
      appState: 1
    };

    this.handleCommandClick = this.handleCommandClick.bind(this);
  }

  handleCommandClick(data) {
    this.setState({
      appState: 2
    });
    alert(JSON.stringify(this.state.appState));
  }

  Row = ({ style, ...restProps }) => (
    <Table.Row
      style={{
        ...style,
        backgroundColor:
          this.state.appState === 1 ? "LightBlue" : "DarkSeaGreen"
      }}
      {...restProps}
    />
  );

  render() {
    const { rows, columns } = this.state;

    return (
      <div>
        <button
          type="button"
          onClick={this.handleCommandClick}
          className="btn btn-success form-control btn-sm"
        >
          Update data
        </button>
        <Grid rows={rows} columns={columns}>
          <Table rowComponent={this.Row} />
          <TableHeaderRow />
        </Grid>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

So, I have custom Table.Row component, which formats the rows according to the page state this.state.appState. Formatting currently impacts the background only, but, of course, it can format the text or borders (of the particular row) as well. When the user clicks button, then this.state.appState changes to another value (in reality it happens on the second click only, I don't know why the delay is, but that is irrelevant now) and one hopes that the background of the rows will be updated to DarkSeaGreen. But nothing changes. Apparently this is because the Table.Row style is evaluated during the build-up of the page and there is no mechanism how the already-built CSS can feel the data of the row, or the updates of the data of the row.

Well, there is no distinction between rows in the my example, all the rows have the same style and that is why it is possible to use CSS variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties to control the common style of all the rows.

But my question is about possibility for each row (or even cell) to have its own style that depends on the data of this row/cell. And one should take into account the fact, that the data can change during lifetime of the page. E.g. consider list of share prices: grid can contain share prices and each row can be green or red depending how well the particular share behaves in the current session in the real time.

So - what are mechanisms to achieve this. I know DevExpress CxGrid for desktop programms (C# or Delphi) and that grid has OnCustomDrawCell for dynamic evaluation of the style for the cell and grid has Invalidate(...) function for repainting the while grid for the cases when some global variable changes and those changes impact the style of each cell (i.e. this global variable is used in the body of OnCustomDrawCell).

So - I am seeking some analogue behavior for React Grid. I guess, I should seek the solution in the 3 directions:

• maybe ReactGrid has some plugin that dynamically updates the style of the row depending on the data changes in the row. I am aware of the DataTypeFormatter https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/data-formatting/ but I guess it (similarly to Row component in the example) defines style during loading time only and it does not update style when that data are changed. So - maybe there is some undocumented event listener for rows or cells?
• maybe ReactGrid has some analogue of invalidate(...) function, that requests ReactGrid to recompute styles of all the rows (as defined in the Row component of DataTypeFormatter).
• I know tableRow.rowId for the rows for which I need to update the style. Maybe I can select programmatically those rows by rowId and add/remove style classes as needed?

I know that ReactGrid has some mechanisms how to dynamically select and update the style of some row(s), but how those mechanisms are exposed? I am aware of the SelectionState, IntegratedSelection, TableSelection - plugins that apparently uses those mechanisms. So, how those mechanisms are accessible for other scenarious?

Environment

"@devexpress/dx-react-core": "1.10.5", "@devexpress/dx-react-grid": "1.10.5", "@devexpress/dx-react-grid-bootstrap3": "1.10.5", "react": "16.8.3", "react-bootstrap": "0.32.4", "react-dom": "16.8.3"

[alex153410]

As I see, then final markup of the tabel rows is quite simple: <tr class="">...</tr> Maybe I can ask ReactGrid that ReactGrid adds the value of some column (with the key values) as the value for the id or name attribute of the element. And afterwards I can select in code the particular row with the particular id/name value and I can add additional styles to this row and its child elements.

[ushkal]

Hi @alex153410,  

When the user clicks button, then this.state.appState changes to another value and one hopes that the background of the rows will be updated to DarkSeaGreen. But nothing changes.  

This happens because the data rows, the Row component and other variables remain the same when a state is updated and the Grid doesn't know that it should repaint rows. So to fix this, create a new Row component on each state change. Here's an updated project.  

this.state.appState changes to another value (in reality it happens on the second click only, I don't know why the delay is  

The setState() function is not invoked immediately and schedules updates to the state. To perform an action after the state is updated, use a callback function as a second parameter.  

maybe ReactGrid has some plugin that dynamically updates the style of the row depending on the data changes in the row.  

We recommend you override a row/cell components with your own components where the styling logic is implemented.  

maybe ReactGrid has some analogue of invalidate(...) function, that requests ReactGrid to recompute styles of all the rows  

The Reactive Grid is based on the React declarative approach so all updates are handled by the React framework. The closest alternative is the forceUpdate() function but it will decrease performance.  

Maybe I can select programmatically those rows by rowId and add/remove style classes as needed  

It is not recommended to manipulate DOM directly.  

E.g. consider list of share prices: grid can contain share prices and each row can be green or red depending how well the particular share behaves in the current session in the real time.  

Here's an example of how to implement it.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.