Okay, here's what I came up with... I made two subfiles. For both subfiles, I set:
- has header = false
- number of columns = 3 (or whatever you need)
- column width = 150,150,150 (or whatever you need)
- scrollbar = none
The first subfile is to be my "headings" so I set the following properties (though, you can do whatever you like for the colors, heights, etc)
- id = Grid1
- number of rows = 1
- odd row background = #0033FF
- odd row font color = #FFFFF
- top = 0px
- left = 0px
- row height = 26px
The idea was to have this Grid1 be at the top of my screen, styled so that it looks like it's a heading, and then to have it have a fixed position so that it does not scroll. (In a minute I'll get to the part about how to stop if from scrolling... bear with me.)
I dragged labels to each column in Grid1 to give them some text that looks like a column heading...
The second subfile will be my data, and is the part I want to scroll. So it has these properties:
- id = Grid2
- number of rows = 400
- top = 26px (matches height of Grid1)
- left = 0px (matches left of Grid1)
And of course, you want to populate Grid2 with your subfile data, etc. So drag fields into the columns, populate it froma program, etc, as you normally would.
The result should look something like this:
- 8-1-2013 4-04-21 PM.png (102.76 KiB) Viewed 887 times
Now you need Javascript to force the headings in Grid1 to stay in place when the user scrolls the screen. I also thought it'd be good to force it to always be on top of other elements so you can always see the headings.
To do that, I want to get the DOM object from the browser, and set it's "style.position" to "fixed" to keep it from scrolling, and set it's zIndex to keep it on top. To do that, I added this to the onload event (which is a screen-level property) so that this Javascript would load as soon as my screen is loaded.
Code: Select all
function setFixed(id) {
var obj = getObj(id);
if (obj !== null) {
obj.style.position = "fixed";
obj.style.zIndex = 10000;
}
}
setFixed("Grid1");
I wrote this up as a function so you can easily use it on other screen elements if you want to. For example, you may have a logo at the top that you dont want to scroll, or maybe a button or something besides just the subfile. For each thing that you don't want to scroll, you can just call the setFixed() again.
Code: Select all
setFixed("Grid1");
setFixed("MyImage");
setFixed("MyButton");
All of this would be done in the onload event -- and the parameter to setFixed() is the 'id' attribute of the widget... id's are case-sensitive, so make sure you get the upper/lowercase exactly right.
With this in place, I can scroll up and down across all 400 rows of my subfile, and the headings are always there at the top of my screen.
Having said that -- I should warn you that loading 400 rows to all be displayed on the screen at once is not going to perform especially well. PUI grids require a lot of different HTML elements to be drawn to the screen to make it possible to do things like drag/drop columns, have shaded rows, sort by column, resize columns, etc. All things not possible with a plain HTML table. The down side is that loading 400 rows on the screen all at once will be a lot of work for the browser, so you may hit performance snags (especially with less efficient browsers like IE.)
Anyway, give it a try and see what you think.