Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github

making datagrid row clickable with action menus , dropdown toolbar and checkboxes


Hello ,

Does the reusable datagrid tables support clickable rows with above enables i tries onRowClick but was not getting a stable behavior, it always caused the row to be clicked even when clicking checkboxes or buttons etc.
I am using react metronic 9.2 version.

i even tried this code below but even that didnt worked, please guide cause i didnt saw anything in reui docs too related to this.

<DataGrid
table={table}
recordCount={table.getFilteredRowModel().rows.length}
tableLayout={{
headerSticky: true,
headerBackground: true,
rowBorder: true,
stripped: true,
columnsVisibility: true,
cellBorder: true,
}}
onRowClick={(row: any) => {
const target = document.activeElement as HTMLElement; --> this always returned body element
if (!target.closest('td:first-child') || !target.closest('td:last-child')) {
onEditContent(row);
console.log(target);
}
}}
tableClassNames={{
bodyRow: "cursor-pointer"
}}
>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

Thank you for your feedback on this. We will check and fix this issue asap.
Could you please confirm are you using latest Metronic 9.2.x React with reui.io/docs/data-grid Data Grid component ?

Regards,
Sean



hello, i am using 9.2.0 version from theme forest.



just made an update with 9.2.1 and issue in it persists. The only workaround i found was to bind cells with clicks but its not real row click.

the expected behavior:
row click must ignore checkboxes and dropdown action menus, button actions etc
current behavior:
- row click works on everything and everywhere regardless

possible workaround:
either solve behavior like above or maybe if you generate a row id, cell id or include target with row data users will be able to override bypass by writing functions like this

onRowClick={(row: any) => {
const target = document.activeElement as HTMLElement; --> this always returned body element
if (!target.closest("td:first-child") || !target.closest("td:last-child")) {
onEditContent(row);
console.log(target);
}
}}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(