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.
Related
I have a form where a certain field is a radio selector with 3 options. Let's say this represents Good, More-or-Less, and Bad.
I managed to put them in the same line with InlineRadio, like this:
self.helper.layout = Layout(InlineRadio(field_name))
Now, I need to 2 things:
1) replace each option, that is rendered as a radio-button and its label with a pre-defined image.
2) Add 2 images, one to the left and one to the right of the radio buttons. So, at the end, I'll have 5 images in a row. From left to right: Image of Smile (just the image) - Image of selector (Good) - Image of selector (More-or-Less) - Image of selector (Bad) - Image of Sad face (just the image)
Is it possible to achieve them with django-crispy? If not, how can I achieve this?
Thanks in advance.
I'm the lead developer of crispy-forms. You could do this using Field layout object and using a custom template.
Field('field_name', template="custom_inline_radio.html")
Other option you have is to create your own layout object subclassing InlineRadio. That way you would only have to do:
CustomInlineRadio('field_name')
Actually, what you try to do is basically override the output of a default widget in Django and that probably makes more sense if you use a custom widget in your Django form, crispy-forms will play great with it. I wrote an article on widgets and Django forms that might interest you.
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 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.
I am creating table with AjaxFallbackDefaultDataTable. I want to add image to each column and when user clicks any column for sorting, I want to change this image.
Is this is possible?
This is probably best handled by css.
If you look at this example of an AjaxFallbackDefaultDataTable, you'll note that with no work at all, the headers change background color when clicked.
This happens because of wicket-defined css classes "wicket_orderUp", "wicket_orderDown", and "wicket_orderNone" on the header set by the callbacks when you click on columns, and some default css supplied by wicket.
If you create css that sets a background image for these classes, possibly qualified by other css hierarchy if you don't want it everywhere, you should be able to get changing images with no Java code.