How to expand Master Detail in ag grid using separate button? - ag-grid

How do I show or hide master detail portion using separate button instead of clicking the arrow button in first column? thanks

You can get the row index of the master row you want to expand -
Call the below onClick of button.
showDetail(index) {
this.gridApi.getDisplayedRowAtIndex(index).setExpanded(true);
}
An example from docs where detail grid is expanded in onFirstDataRendered

Related

ag-grid change row-height of a specific row after button is clicked

I have an ag-grid where 1 of the columns is a button Cellrenderer. And after user click on the button, it shows user a multi-line info. It's cut-off now. And I want that specific row to become higher rowHeight. not changing other rows' height.
I have searched and read other ppl's solution on dynamically fit row to the content of the row, that's not helpful for me because my content doesn't show up unless user click on the button. Thanks.

Nattable - ButtonPainter on cell is going on edit mode on click ,

i am trying to follow class Rendereing_a_cell_as_a_button
https://github.com/eclipse/nebula.widgets.nattable/blob/master/org.eclipse.nebula.widgets.nattable.examples/src/org/eclipse/nebula/widgets/nattable/examples/examples/_102_Configuration/Rendering_cells_as_a_link_and_button.java
from Nattable example to create similar button , i have copied same example code.
Button is showing on the desired column, but on click the style is not getting change of button like clicked and also listener is not getting called, it is going to edit mode and showing the content of cell.
Before Click
After click
If your table also supports editing you need to ensure that cells in the column that shows buttons should be not editable. This can be done by registering an IEditableRule#NEVER_EDITABLE for that column.

jqgrid editGridRow selection list for each cell

In my case, I want the user to pickup the values by clicking on a ">" type image at the end of the cell and a modal window is opened. Within the modal window a dynamic way to pass the value selected back to the cell.
You should look into this answer..instead of having custom button you can have an image button with each cell, in this answer he's adding a custom button in pager, but you can have a custom button with each cell like this.
Now after adding a image button, on click function you can get the value of the column using getCol and open a dialog using jQuery like this and then you can use setCol property of jqGrid to set the value of column.
Now try to write code using this approach. If you get any difficulty let us know.

Correctly sink click event

I'm trying to create an expandable and selectable row element in GWT. This row contains an expand icon which I can click on to expand the row. I can also click on each row to select it.
My problem is that if I click on the expand icon I always trigger the row selection event too and I don't want that. How can I sink the click event so that if I click on the expand icon, only the expand will occur, but not the selection?
The green row is selected:
When I expand a row I also trigger the selection with the click and my selection move(bad):
This is what I want: I expand with the plus icon, without changing in the selection(yay!) :
I tried to use expandIcon.sinkEvent(Event.ONCLICK); but it didn't help. How can I do this?
To prevent the click event from bubbling up to the parent widget, you'd want to stopPropagation() when handling it at the expandIcon level.

How to add a Button to a HeaderSpan in SmartGWT?

I want to add a Button to a HeaderSpan in SmartGWT. At start, the title of the button will be + (Plus), when the user clicks the button, all the rows of the table are shown and the title of the Button becomes - (Minus). There are around 25 columns in the ListGrid hence I want this behaviour.
I have tried using the HeaderSpan.setAttribute("button", new Button("+")) method but it did not work. Please help.
Any other approach to hide/unhide columns will be very much appreciated.
I've watched this link. As per the overview given in the screen, it does provide hide/show of particular column as well as particular headerspan. On right side of each column a dropdown like button is given which is visible on mouse over & serves your purpose. If you want to change it's icon, you can try the following code, where headerMenuButtonIcon is the path of your image:
grid.setHeaderMenuButtonIcon(headerMenuButtonIcon);
Hope this helps you.