Devextreme-reactive: How to use a custom row template when mouse click selection is enabled

[SergeyAlexeev]

According to the documentation, if you are using the selectByRowClick or highlightSelected property, the tableRowTemplate property is ignored.

Currently, there is no documented way to implement a custom table row template in this case. Yet, you can use our internal templating mechanism to achieve such a functionality.

This demo shows how to do this. Please take a look at the comments given in the code.

[dapozdnyakov]

Hi! How to use this mechanism now in beta.2, when TemplateRenderer has been removed?

[SergeyAlexeev]

Hi,
Please refer to the updated demo.

[dapozdnyakov]

@SergeyAlexeev Thank you!

[filippoitaliano]

@SergeyAlexeev the way described in the updated demo works perfectly but I have a further problem: the default summary row doesn't work anymore. The grid fails render with this console error:

TypeError: getRowLevelKey is not a function

I guess I missed to pass some params to the custom row, but I can't figure out which they can be.

Thanks in advance.

[SergeyAlexeev]

@filippoitaliano I've added a summary row to the example. It works fine.

[filippoitaliano]

Ok, You're right. It works. I was passing down the wrong selection property because I was accidentally overwriting it with my component state...

[slavavasylencko]

@SergeyAlexeev How can I add hover, like this https://codesandbox.io/s/rylk1x324o in table and highlight selection plugin with enabled TableSelection Plugin?

[lin-zy1229]

Hi,
Please refer to the updated demo.

@SergeyAlexeev
It doesn't work for dxgrid/core 1.10.0, only works for 1.7.2.

-

-
Please update for latest version of dxgrid, thanks.

[msteinmn]

@SergeyAlexeev @lin-zy1229 Are we talking about a workaround here for a bug that has not yet been fixed, or is this really the way it is supposed to be. I have not been able yet to get this to work with 1.10.0 and material-ui. Workarounds are great, but wait, are they really?

[lin-zy1229]

@SergeyAlexeev,
If I do <TableSelection selectByRowClick rowComponent={Row} />, instead of <Table rowComponent={Row} />, it works in latest version , (1.10.0)

However, RowStyle doesn't work.

Any way to get done this?

[msteinmn]

@lin-zy1229 Awesome, that worked.

[sentient-drone]

Type interface for <TableSelection selectByRowClick rowComponent={Row} /> has not been updated as of 1.10.3. And typescript errors that rowComponent does not exist on TableSelection

[SergeyAlexeev]

Hi,

And typescript errors that rowComponent does not exist on TableSelection

As you can see in our documentation, the TableSelection plugin doesn't contain a public rowComponent property.

I've updated the previously provided example to v.1.10.3 as well:

BS3 - https://stackblitz.com/edit/react-rxlvns?file=index.js
BS4 - https://stackblitz.com/edit/react-fk2ocn?file=index.js
MUI - https://stackblitz.com/edit/react-wagpnw?file=index.js

[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.

[LazyLahtak]

Hi all.
Let me explain what happens.
When you use the TableSelection with highlightRow or selectByRowClick properties, TableSelection overrides rowComponent from Table on its own.
https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/table-selection/#properties
You can use cellComponent instead of rowComponent in Table to process the onClick event (see this example).
You can also define rowComponent in TableSelection. However, it's an undocumented approach. If you want to use it with the selectByRowClick option, add the onToggle() call inside the onClick handler like in this example.