Static Headers

[robhathome2]

Hi

I've found reference to creating a separate DIV to create static headers on here but it is for RPGsp and I'm not sure how to transpose this solution to PUI. See link http://www.profoundlogic.com/forums/php ... f=37&t=528

I have a requirement for a grid but with the grid fully expanded, rather than scrolling within the grid itself. So, ideally, I'd like the top section to stay static (where I will put the pseudo-headers for the grid) and the lower section to scroll.

Is this possible?

Thanks

[Scott Klement]

One idea might be to use two subfiles. The first one could contain the "headers" and be static. The second one might contain the data, and be "scrollable"

You'd want to set the styling the same between them, and line them up perfectly so they'd look like one big subfile to the user.

Will that work?

[robhathome2]

Hi Scott

Thanks for the reply.

I'm not sure I've explained myself so I'll attempt to do better this time.

Imagine a grid that has 400 visible rows (after using setNumberOfRows). The browser allows you to scroll (whilst the grid does not have a scroll bar as all are displayed). As you scroll down the page the upper part of the screen with the headings go off the screen.

Does that make more sense? I appreciate it may sound like I'm trying to reinvent the wheel.

Regards

Rob.

[Scott Klement]

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 888 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.

[robhathome2]

Hi Scott

Thanks for your very expansive reply. The key bit I was after was was the getObj("xxxx").style.position = "fixed" as I'd already gone along the lines of 2 grids (btw, the "heading" grid wasn't producing my labels until I put a dummy field in there although it may have been something else I did). I put all the fields in the "header" section in a field set which I wanted to achieve 2 things. Firstly, a non-opaque area for when the grid scrolls up, and secondly I was hoping to find the code that would enable me to set the field attributes via a "For...each" in the field set but I haven't found it yet. I have it working but will return to hone my JS.

I used 400 rows as an extreme example as my function will, in all probability, have a maximum of 15. It's a very complex screen function as it is, having almost 200 fields per row. I've attached an image of the function in my test environment which will hopefully give you a flavour of what (and maybe why) I was trying to achieve.

If you see anything that springs to mind, or if you have any questions, feel free to come back to me.

Thanks again

Rob.