Documentation addresses only the event handling https://adazzle.github.io/react-data-grid/#/examples/cell-selection-events.
Are there any CSS classes that are assigned to the selected cell? Currently the selected cell has pale blue border but I would like to change this. Such change of style is not possible with ReactDataGrid.onCellSelected, because the formatter.render() event is fired first and only then onCellSelected event is fired. Yes, I can read the coordinates of the selected cell in onCellSelected, but I can not use those coordinates for formatting, because formatter.render() is executed before onCellSelected, i.e., coordintates of new newly selected cell are not available in the time moment when they should be read.
I do not consider this as bug, of course, there should be another mechanism how one can format the selected cell, but at present I can not find this mechanism in documentation. I went through the generated code in web console and I did not managed to find any additional class name that could have been added to the selected cell by the grid.
So, what is the right mechanism how to format the selected cell?
Maybe I can call (somehow) formatter.render() of the selected cell inside onCellSelected somehow? And that would solve my issue?
Related
Working with a NatTable, I would like the following behavior:
Single click on an unselected, editable cell - cell is selected
Double-click on a cell (at any time), do custom open action
Single-click on a selected cell triggers an edit
Do I need to write a custom IEditableRule that checks selection? If there a way to check the selection from w/i this rule, or do I need to also create a rule that can listen to the entire table selection and unify these concepts?
You need to register custom bindings for editing. The default bindings are registered via DefaultEditBindings. You need to replace them with bindings for double click to open the editor and some customized actions that check the selection. For the key bindings NatTable uses the same approach. It is not the default to check the selection because of abstraction and it should be possible to edit even if you have no SelectionLayer in place.
To check if the cell is selected you either need a reference to SelectionLayer or check the DisplayMode of the cell. Never tried to use a IEditableRule for this.
Maybe these posts give you some more information:
https://www.eclipse.org/forums/index.php/t/452759/
Stop NatTable from going into edit mode when an editable cell is left-mouse-clicked
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.
Requirement : implementing a drowdown functionality in an UIView
The known way is using a UIWebView.
My Q is can this be done via a TableView?
Is there any way which lets me select a section(just like selecting a row), so that I can implement a hide/show cells of a section when that particular section is selected?
Don't know if I am understanding you correctly, but it seems to me that what you want can be done like this:
have a UITableView with several sections;
each section has got just one row;
when a specific row for a section is selected (didSelectRowAtIndex), you change the data source associated to that section by adding more elements and reloadData on the table.
when a specific row for a section is selected you also modify the data source corresponding to any other section so that it only contains one row.
EDIT:
From your last comment, it seems to me that what you are trying to do is a generic dropdown menu: you click somewhere and it displays; now, in your specific case you are thinking of clicking on a table, but it could in principle be anywhere else. I am saying this (if I am not wrong), because if it is so, then you can find ready-made implementations, like WEPopover, and you could save some effort.
Going back to your asking, in the case you are mentioning, you can animate the height of the table view frame (or bounds), so that its content is displayed little by little, as the view height increases; have a look at this Tutorial about Core Animations.
I have a cell table that has several columns whose data may occasionally be wider than their column's width.
I have my css text-overflow set to ellipsis so it is obvious to the user that there is more to the cell's value when it exceeds the column's width.
With a "normal" widget, I would just use setTitle() to automatically display the full contents on mouse over, but the TextCell (and all other cell widgets) do not extend UiObject, so they do not have this method available.
A TextCell is implemented by a div within a td tag. Being able to set the title on either elements would give me the behavior I am looking for, but I cannot seem to find a way to get a handle on either of the elements.
What is the best way to get the HTML title behavior to work in a cell table widget?
Thanks,
Doug
you can write your own cell implementation and set the title in the html template yourself.
Take a look at a cell implementation. Basically they provide the html string for rendering.
Some of these kinds of issues have been "fixed" in GWT 2.3. But if you are stuck with using GWT 2.2, then writing your own cell implementation is the way to go.
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.