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.
Related
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
I need to put an HTML code on dragging event. Like there is some HTML text that gets dragged with Cursor.
By default first column of ListGrid goes with Cursor. But I want to generate separate Text for it.
So, is it possible to do that?
Or Is there any other option to do that?
Please help me in this.
Thanks.
Whats displayed (by default) during a drag event in ListGrid is defined by ListGrid.dragTrackerMode and ListGrid.titleField.
ListGrid will default to first field to obtain the description to be shown during a drag, based on titleField.
If you already have another field in the grid from which you can obtain the text, use listGrid.setTitleField("other-field-name");
A custom title can be defined by overriding ListGrid.getDragTrackerTitle
If multiple records are selected, and dragged, drag tracker/title/etc. will be based on first selected record.
Check other ListGrid methods that allow drag tracker customizations as well.
I am looking to add a label and image to a CellTable column, with following requisites:
- Label should be followed by an image.
- Click on the column (anywhere on label or image), toggles the image.
I am thinking of creating a custom widget containing an HorizontalPanel. Which in itself contains the Label and Image. Before putting substantial time on the same, just want an confirmation whether this approach is proper ?
No, you cannot put a widget in a CellTable. You will have to make a custom cell (extend AbstractCell) and generate HTML directly.
Take a look at GWT's implementation of different cells to see how they achieve clicking, etc. There are no nice ClickEvents, for example - you have to respond to the browser events directly.
To toggle an image you will have to re-draw the entire table, or use crazy javascript that you don't want to use.
I'm trying to come up with way to animate a page change on a CellTable in GWT which would work the same way as changing tabs on (http://gwt.google.com/samples/Showcase/Showcase.html#!CwTabLayoutPanel). In other words the new table page would slide in from the top (or bottom for that matter).
The CellTable uses a SimplePager to initiate the page change at the moment.
Thanks, Matyas
There's no way to do that in simple way, because to make slide animation you have to have at least 2 already rendered pages: first one that is shifted out and second one that replaces first. In showcase example with animated tabset all tabs are rendered and are ready to use, but CellTable with SimplePager has no rendered pages except visible one - new page is simply rendered just directly into CellTable body.
So, if you really want to create such effect using CellTable and Pager, you have to implement your own pair of CellTable and Pager that will do following:
Keep 2 containers with rendered rows: one is visible, second is hidden.
CellTable body should have viewport (just a <div> with "overflow:hidden" CSS rule) that will have both containers inside.
When pager change page, you have to force CellTable to render new rows into hidden container.
When new data was rendered, place your hidden container into proper position to make illusion that it continues visible one, and make it visible;
Provide animation that will move both containers into new positions. I'd recommend do not use coding for animations (e.g. Timer) - much better and effective to use CSS3 transformation rules (see "CSS3 transform Property" and/or "CSS3 transition Property").
When animation finished, make first container hidden and switch pointers to visible and hidden containers - so that you return to initial state.
Hope this helps.
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.