I need to know how to add a row to a grid. I declared ui-grid-b with 3 columns. I need 8 buttons in this grid in my footer. How to do this?
You should read about it in jQueryMobile docs. Basically "grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each." You should also read about toolbars. It may be usefull for a good start.
There is a full explaination:
http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html
Related
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
I'll be doing an Eclipse workspace-like menu. Basically,
the page will be split into 3 sections (columns)-- say LHS, MDDL & RHS sections.
all of these 3 sections will be resizable,
can be minimized/maximized.
Each of these 3 sections will have their own components,
depending on which menu item the user is on.
One other thing they'll have is that events will be triggered/passed to/from
between components in 2 different of these 3 sections.
Eg.: when the user clicks an entry in the accordion (or in the tree or tabs) on the LHS section,
en event will occur in the MDDL section.
Vaadin is managing the UI components hierarchically-- a component at the root, and each non-root component is contained in one other component by itself or with several other "sibling" components. From this view,
From what i've got so far, here are the ways i can design LHS, MDDL & RHS:
1.) a Layout (VerticalLayout or HorizontalLayout, or maybe a FormLayout(?))
or a Panel at the root, with 3 components in it for 3 sections (whatever those 3 components might be)
2.) A HorizontalSplitPanel at the root. On the right panel of this HorizontalSplitPanel, another
HorizontalSplitPanel to make up the 3 sections i'm looking for.
3.) A GridLayout of 3 columns, with a panels in each to make up the 3 sections
4.) 3 different Window-s.
Which of these options would be the best for my use?
Also - considering the go-between the sections (event-listeners and corresponding actions across sections), which design i should go for?
I'm looking to make the code decoupled. The 3 sections will have their own styles each (LHS: options, MDDL: data entries, RHS: control).
In another line - what exactly are the differences between a Panel and a Layout? Figure 6.1 of Vaadin book implies that the descendants of Layout are more sophisticated-- in what way?
I'm a backend developer - new to FE things. Excuse if this is a naive Q.
TIA.
A Panel is a single component container, layouts usually have more than one child component. The difference is what you can see: The panel provides a caption and border for the inner component, layouts like HorizontalLayout lay out components in a defined way, e.g. horizontally next to each other.
Your option 2 seems reasonable to me. Only the split panels provide a separator that is draggable out of the box.
Regarding the event handling: I recommend creating one class for each section, derived from CustomComponent. Then implement new events/listeners analogous to Vaadin's in these classes. After the 3 sections are created, each section needs to add listeners to other sections as required.
I've got an interesting problem that I'd like some advice and opinions on if you would be so kind. I'm not after code as I prefer to write that for myself. My background is J2ME and Android but I've recently taken up Blackberry.
What I need to write is something akin to the Android ListView albeit a little simpler.
Each row consists of 3 items. There's an image/icon, a multi-line (2 or 3 row) text element and an imagebutton of some form.
However, each row has only 2 columns. The icon/image & multi-line text are combined for the first column and are clickable (with both the column (0) plus the row ID identifiable). The next element in the row (1) is a clickable image (common to all rows - this also needs to have an identifiable row ID). There must be different actions for each column/row cell.
There is a need for multiple rows to be scrollable vertically and there may well be a lot of items.Each row needs to fit the screen width with the icon/multi-line text justified to the left and the clickable image justified to the right. Each row needs all of its components vertically justified (possibly centred) for neatness.
So what we have (for a row) is:
[clickable image/multi-line text combo][clickable image]
Ideally there will be a common background (gradient shaded) for each row once focussed. This should span both columns seamlessly.
Any thoughts would be most appreciated.
The simplest approach is probably to have a VerticalFieldManager for the list, populated by HorizontalFieldManagers for the row.
As for the inner part of the row (the columns) you can pass FIELD_LEFT to the first field and FIELD_RIGHT for the second for alignment. The image-multitext field you can create yourself by extending ButtonField and overriding the paint method. You can use the Graphics object to draw your image and text. A different approach (and perhaps a simpler one) is to extend the HorizontalFieldManager, add your components and make it clickable by capturing the click events.
One thing to realize about Blackberry is that there are many ways to do something, if one thing doesn't work quite the way you want it to, try something different. Hope this help you get started!
If I have a a number of elements in one table column and I drag them one at a time to another column utilizing jQuery UI, how do I make remaining items in the first column move up, i.e. fill the gap left by the items that were moved. Assuming table cell valign="top".
I think it has to do something with DOM. It seems that even after I drag the item is it still in the same column.
You might want to use jquery ui's sortable instead.
http://jqueryui.com/demos/sortable/#connect-lists
You can connect lists and anything moved from one list will move the remaining elements to fill any gaps
However you are not giving us any code/markup to work with so I can only guess. Hope this helps!
I understand that the layout in Orbeon Forms is grid-based, but even inside a grid of let's say 10 rows and 5 columns, If I happen to want to shift the 8th row to the 3rd row using the Visual Form Builder, how would I do that?
In general, is it possible to reorder the fields or sections within the Orbeon Designer using the MOUSE?
Currently you cannot reorder grid rows or columns, with or without a mouse (if by that you mean using drag-and-drop. But it's a great suggestion for the Orbeon Forms authors.
At this point, what you can do is this:
insert a new empty row
using the toolbox, "cut" the first control you want to move
using the toolbox, "paste" into the first cell of the new row
repeat the last 2 steps
It's painful but it will work.
Or, you can move the row directly within the source of the form, by moving the in the grid to the new place.
Note that while drag-and-drop would be great, it's not actually strictly needed: buttons and keyboard shortcuts can get you there too.