I am new to Material UI and React in general, but as a 10 yr HTML UI vet I am so perplexed right now. We are using XGrid component with rows and columns. When you hover over rows they highlight by turning light blue, but I am at a loss as to how this is happening. When I inspect the row with regular inspector, I don't see any class changes when hovering over the row. When I force hover state, it does not highlight the row. I am guessing two things
It's a mouseenter event, not hover
It's using some built in browser highlight, not a class
Anyway what I'm trying to do is manually highlight a row and it would make sense to use the same class/colour or call some API function, but I cannot find either.
There's documentation here: https://material-ui.com/api/table-row/
Here's an example: How to change the text color of the selected row in material ui table
Related
When I drag the elements inside the ListView component, in the new UI Toolkit system, the element selected get white background but I want it to be transparent.
I just want to drag the elements like a list but without changing the elements background color.
I've tried a lot of things with the new API but could not figure it out.
I tried change the element background, disable listview general properties, research in google but nothing
I would like if you guys can help. Thanks!
I'm trying to make a line graph change color on mouse click by using the select.lineStyle.color attribute.
I'm able to trigger a colour change for the points upon mouse click using select.itemStyle.color and I'm expecting the select.lineStyle.color attribute to change the color of the graph but , it doesn't seem to work despite the documentation saying that select should work for all series.
I even programmatically fired the "select" event (not in the sandbox) but no changes were observed in my line graph.
My code sandbox
Extract from the docs
In addition, we've added click to select to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the selectchanged event to get all the selected shapes for further processing. As with emphasis and blur, the selection style can also be configured in select.
Please help me. I've been working on this for a week and found no solutions here. Is there something I'm missing?
Got my answer directly via posting an issue on their Github page.
Apparently, select is only applicable for data object, not series objects(or whatever you call it). So this feature is not available.
What I did, like most people, is to listen to the mouseclick event and update the series-line.lineStyle.opacity property in options directly to blur out other lines. Set triggerLineEvent:true so that clicking any part of the line will fire the mouseclick event, instead of just the data points.
I want to remove a style from a previously selected row of a gwt DataGrid when clicked on a new row.
Im able to do it by redrawing the grid, is it possible to do it without redrawing the grid.
You can do that with gwtquery, just capture the event and use gquery to select the element in the dom you want to modify using css3 selectors.
If you put some code with the place where you want to capture the action, and the dom structure of your grid, I could help with the snippet.
My question is: I've an Eclipse RCP table in my view. The table has gridlines Visible and everything is fine. But I want all the cells of first row of the table to be merged as a single row in run-time GUI. How can I achieve this functionality ? Please, I don't expect something like adding a text over the first row obstructing it. If any API level functionality or any clues to do this are welcome.
The swt table is a native widget and does not allow you any span, neither in columns nor in rows. Even OwnerDraw (custom cell rendering) does not support this. The only way I see that could allow you to achieve this kind of hack is the swt table editor which allows you to place controls above cells:
http://www.eclipse.org/swt/snippets/#tableeditor
The table editor tracks the position of single cells and positions controls above them. It hides controls when a cell is not in edit mode, show's them when the cell is in edit mode. You'd have to deactivate this default behavior and make sure the controls are always shown - this should be fairly easy.
The more challenging part would be that you'd have to find out how to place the controls above 2 or more (and not a single) cells.
The only swt control I know to support span is the nebula grid. Grid is a custom control (no native widget) and therefore offers far more possibilites.
http://eclipse.org/nebula/widgets/grid/grid.php
http://dev.eclipse.org/viewcvs/viewvc.cgi/org.eclipse.swt.nebula/org.eclipse.swt.nebula.snippets/src/org/eclipse/swt/nebula/snippets/grid/GridSnippet2.java?root=Technology_Project&view=co
u can use GC api to do the needs in table. u can span between two columns.
http://www.java2s.com/Tutorial/Java/0280__SWT/Maketextspanmultiplecolumns.htm
I have a cellTable with 5-6 columns. I want to put a plus icon in each row on clicking of which will display the details maybe in a disclosure panel. I have been looking around for a while now and I cannot find any information on how to achieve this. Could someone point me in the right direction?
i suspect i probably have to add a cellTree to the column? how do i go about this?
Thank you for your response in advance.
There is work in progress to allow expandable rows in CellTable among other features (maybe GWT 2.3). You can see more details here:
http://groups.google.com/group/google-web-toolkit-contributors/browse_thread/thread/b4a8a6e3c98ac061#
If that is not enough or you can not wait untill it is released I can think of two ways to achieve it:
As you said, using a CellTree.
Creating a custom cell that stores
state (open/close). Depending on the
state the cell will render
differently. In same way it is
similar to how EditTextCell works, in
"edit" state it renders an input
field while in "normal" state it renders
simple text.
I'm trying to do that too ... I managed to mimic that functionality toying with the html and a custom cell class that allows clickable pictures.
It is working for normal content such as text but if you'd like to get an asynchronous data to show in the expended line, I don't know how to do it ... (I'm trying to do exactly that).
Also, it doesn't look good because the columns don't align well ...
So what I've done is:
- create a custom cell class to display a picture (right pointing triangle, looking like the triangle in the disclosure panel)
In the click event get the HTML code of the selected row and copy it. Replace the content of the row (all cells) in the table with only one cell with its colspan set to number of columns. In the cell, add a table with first line the copied row and second line the content to display as expanded.
Get the image to sink an event for closing. In event, reset the original row that we copied.
I hope it helps.