material-ui DataGrid - how to separate selecting the row checkbox from onRowClick - datagrid

I am using a DataGrid to manage a service configuration. I would like to use the auto-generated row checkboxes to manage multiple delete operations, but would like to use the onRowClick event to feed row data to a modal dialog form for editing. My onRowClick handler works just fine and populates the modal exactly the way I want it to. Unfortunately, clicking on the row also selects the row -- in other words, the checkbox for the row clicked is selected. I would like the row to be selected only when the checkbox itself is clicked, not when the row is clicked.
My DataGrid declaration looks like this.
<DataGrid
columns={this.columns}
rows={fmConfigs}
pageSize={10}
checkboxSelection
autoHeight
onRowClick={(rowData) => this.handleClickOpenFmConfigForm(rowData.row)}
/>
Normally, I would expect there be a second argument to the onRowClick handler to represent the event, so I could call something like e.stopPropagation(), but the only thing passed is an object of type GridRowParams, for which there is no documentation. I was hoping that maybe the event object was buried in there somewhere but I can't find it. When I print the object to the console, I can see that there is a lot of data -- that's how I was able to find the row data I needed to pass to my form -- but I do not see the event.
Does anyone have any idea how this can be done?

add disableSelectionOnClick={true} to the DataGrid component and according to the doc, the selection on click on a row or cell would be disabled.
<DataGrid
disableSelectionOnClick={true}
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
/>
sandbox

Related

Using bindings with BrazosUI buttons

I'm used to using boolean bindings with IBM buttons to track if a button is clicked. The button in Brazos UI can be bound to any variable type but doesn't make automatic updates to booleans. How do I use bindings with Brazos UI buttons to track which was last-clicked?
The binding of a button is really only useful in tables. The acceptance of ANY variable type for the binding of a button stems from the use of determining the index of a selected row or obtaining the entire row object:
If you bind and integer to the button in a table, the binding will update with the index of the row when the button is clicked.
If you bind a variable of the same (singular) type as the table's binding, then clicking the button will update the binding with that row's data.
Both of those are handy interactions with the table control but don't work for tracking which button is clicked when used elsewhere on a coach. For that, you want to utilize the 'Button Control ID' configuration option. The most direct method is to bind the same string variable to all of the buttons you need to track. When clicked, a button will update that shared variable to match its own control ID. You can then use that unique ID in various scripting checks to take button-specific actions.
See the BP3 Help Center article for greater detail about this, including some examples: https://support.bp-3.com/hc/en-us/articles/217985767-Using-Button-Binding-with-Brazos-UI

How to get the selected rows in ASPxGridView?

I have a grid with ASPxCheckBox in Data Item Template. How to get KeyFieldValue of all rows whose checkbox is checked. I am trying to do this using client-side code and do it for whole grid not on visible index. Is it possible?
Note: I cannot use simple row selection command column as I am using it for some other purpose.
if you dontuse client-side code, you should use detailrow in aspxgridview. And you must use beforeperformdataselect event. if you really need checkbox, you can add checkbox a new field in asapxgridview.

GWT: Identify which Button in a Table was clicked

I am struggling with something which I think should be extremely easy.
I have a Grid in GWT, which I populate its cells with some textual data; at the last column I want to place a Button (or Image) which when clicked, I would like to take some action using the specific/associated data for that row.
I want to use a single ClickHandler for all the buttons. How can I then identify which button (and subsequently which row) has been clicked? Can I associate some sort of tag/identity value to a button (or Image) widget in GWT? With this identity/tag value, then I would be able to identify which row data I am working with.
Any clues?
In the handler use method getCellForEvent(ClickEvent event) of your Grid object. It will return HTMLTable.Cell object which has both row and column index. You pass the event object that has been delivered to the handler method. It works even if you have embed widgets in the cell and you get the click event for that widget.
Actually the method is defined in base HTMLTable, so you can use it also in FlexTable.

Need An Event To Fire After Leaving A Grid Control Filter DevExpress

Is there an event that fires after leaving a cell in a grid controls row filter?
The first row of my grid is a filter row, when I type something in the cell of and column in the filter row then select a row I want an event to fire.
What is happening is I have a lot of code in the gridView1s FocusedRow changed event, but when I use the filter then select the first row the Focusedrow event does not fire. If I select anything but the first first row returned the Focusedrow event fires and everything is fine, but I need to capture an event after you type something in a filter cell and select the first row in the grid.
I've tried to reproduce this issue using XtraGrid 9.3.4. but to no avail. Everything works as expected in my tests. So, I would suggest that you create a new ticket in the support center and upload a sample project. We will find the cause of the issue and let you know how to resolve it.

how to loop over a datagrids rows in flex

I have a DataGrid which contains a DataGridColumn with a textinput and DataGridColumn with a Button.
The DataGrid is bound to some XML which displays values in the text box.
When the button for a row is clicked I need to get the value out of the text box and save it into the relevant XML node.
My solution was just to pass the id of the row to the button click event then loop over the rows until I find the id then just grab the text box value. Simple.
However the only advice I can find on looping over the rows is via the underlying dataProvider, which is nonsense as the two aren't the same thing.
Is this even possible? or is there a better way?
NOTE I would prefer not re-writing the markup, unless I have to.
Thanks
You are probably using an itemRenderer for your DataGridColumn to show the textBox (aka, TextInput component). I suggest that you dispatch a custom event out of the TextInput itemRenderer when you have a TextInput.dataChange event (or some other TextInput.Event that suits when you are ready to save the value).
http://livedocs.adobe.com/flex/3/langref/mx/controls/TextInput.html
Please remember that you need to bubble this event handling outside of the itemRenderer (e.g., the DataGrid) -- itemRenderers don't handle events well.
Also, one reason that a button to save your TextInput value is not a good idea, is because they are both itemRenderers, and it is hard to communicate between itemRenderers -- it is hard because Adobe deems it unclean code.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
Also, this is another solution that changes the dataProvider for a ComboBox (in your case, it's a TextInput instead of ComboBox):
http://www.switchonthecode.com/tutorials/simple-datagrid-item-editor-in-flex
listData.rowIndex from the itemRenderer returns the current row index. You can read it from the click handler as:
private function clickHandler(event:MouseEvent):void
{
var listData:BaseListData = IDropInListItemRenderer(event.target).listData;
var clickedRowIndex:Number = listData.rowIndex;
}

Resources