80078

Ag-Grid expand row

Question:

Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click. If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.

I already tried to find in the documentation any information about it, but cant find nothing.

Here is a example from the documentation. <a href="https://ag-grid.com/javascript-grid-tree/index.php" rel="nofollow">https://ag-grid.com/javascript-grid-tree/index.php</a>

example image: <a href="https://i.stack.imgur.com/B0MI7.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/B0MI7.png" data-original="https://i.stack.imgur.com/B0MI7.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Answer1:

You can listen to events on either a row or cell clicked, and expand nodes accordingly.

For example to expand a row based on a click you could do the following:

onRowClicked: (params) => { // update the node to be expanded params.node.expanded = true; // tell the grid to redraw based on state of nodes expanded state gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex) }

This should be in the documentation - I'll update it to reflect this information.

Answer2:

In the <a href="https://ag-grid.com/javascript-grid-column-definitions/index.php" rel="nofollow">column definition</a>, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.

Answer3:

We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...

This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.

onRowClicked(params) { params.node.setExpanded(!params.node.expanded); }

This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.

Recommend

  • Ping error return always equals 0
  • Angular 2 Typescript: TypeError: this.validator is not a function
  • Makefile Argument string comparision
  • How to download Appium Desktop in Ubuntu 16
  • Excel VBA Range object Error in Looping Through Worksheet
  • Progressive cart item fee based on state and on product category in Woocommerce
  • Core Data Optimize Fetch Request
  • XCode 5 crash on loading the project
  • Method chaining without parentheses, how to?
  • Alphabetical array sort - lowercase first
  • How to use template selector within a ContentPresenter in Windows 8.1
  • Get max bookings count in range
  • Javascript / jQuery not executing in IE until the body of the page is moused over
  • Slick: How can I combine a SQL LIKE statement with a SQL IN statement
  • Auto send email based on the time and email address in database
  • UIScrollView does not restore properly
  • Pandas time series data Index from a string to float [duplicate]
  • Pick Out Specific Number from Array? [duplicate]
  • AWS RDS Parameter Group not changing MySQL encoding
  • Why do you need 2 Javascript files for cross-platform Cordova plugin?
  • separate tokens in batch file
  • Debugging php script timeout?
  • Getting the type of a “Type” in C# reflection
  • ASP.NET MVC 2 actions for the same route?
  • How do I use libcurl to printf a remote FTP directory listing?
  • Ajax call on Multiple selection in Select box
  • Support of :after in IE7
  • Unable to create Access token grant type in wso2 API manager store to test API
  • How can I ssh into a server that requires 2 password authentication using python's paramiko mod
  • How to clear a browser cache in Protractor
  • Android: Unable to detect vertical plane
  • Bind selectedDates Aggregation for Calendar
  • Make checkout phone field optional for specific countries in WooCommerce
  • calling IO Operations from thread in ruby c extension will cause ruby to hang
  • How to call different template for different category archive page in woocommerce
  • Angular 4: Responsive Grid List
  • Firebase: How to read from external DB?
  • Write to .csv file with PHP (Commas in Data Error)