Reusuable Grids

[Scott Klement]

Is this on a 5250 screen in Genie? Is it a grid you created/populated yourself, or one that was auto-detected? Is it database-driven?

[SrinivasSiripuram]

Hi,

Yes its 5250 screen in Genie.
I am applying indOptionColumn = 'false' to create the grid on subfile, and i am trying to customize by using the fallowing code.

var myGrid = getObj("CustomGrid");
myGrid.grid.setProperty("has header", true);
myGrid.grid.setNumberOfRows(8);
myGrid.grid.setProperty("header height", "30px");
myGrid.grid.removeColumn(0);
myGrid.grid.setProperty("column headings", "ColumnName1,ColumnName2");
myGrid.grid.setProperty("row height", "28px");
myGrid.grid.setProperty("scrollbar", "scrolling");
myGrid.grid.setProperty("top", "40px");
myGrid.grid.setProperty("left", "12px");
myGrid.grid.render();

[Scott Klement]

You didn't tell me if this is one of the automatically detected grids, or whether this is one that you inserted, or where the data is coming from. I'll assume that this is a grid that "consumes" 5250 data from the screen, which is what typically happens when you drag a grid widget onto the screen in Genie and let it pull its data from the existing screen data. It is also what happens when the grid is automatically detected. If not, and you're loading the data another way (such as from a web service, sql statement, or database driven) then this advice does not apply to you.

As I alluded to, above, Genie typically "consumes" output data from the screen. (It never consumes input fields, however.) What that means is that when a grid is positioned on the screen, it tries to find the underlying 5250 output fields that are in the same positions as the grid cells, and then it deletes the 5250 output field and instead inserts the text directly into the grid cells. That way the data is actually in the grid, and the stuff you do to the grid (such as hiding columns, etc) will work on the data.

This "consuming" of data occurs as the screen is first drawn, which is before your onload event. That is why the first row of the grid is disappearing -- you are changing the first row into a header row, so the data that had been consumed for that row is lost.

Because of this behavior, getting "has header" to work properly is a bit tricky. You'll need to get a bunch of details to work right, and there will be parts that need to be done as the screen is first drawn rather than in your onload event.

Here's what I would do:

1) I strongly recommend starting fresh, because getting all the details right can be much trickier if some have already been modified by previous attempts to fix this. to start fresh, go into the Genie Administrator, select your skin, go under "Screens", find the screen you're working on, and click "delete". This will destroy all of your previous changes so that you're starting fresh. This also means that if you've made any other changes aside from this grid code, you will want to write them down before you delete it, so that you can re-apply them after deleting it.

2) If you already have the skin open, after doing step 1, click "refresh" on the design toolbar to make it load the updated screen definitions... this will reload the configuration so that the updates you made in the Genie Administrator will be applied.

3) Navigate to the screen (if you haven't already.)

4) Find out your Genie skin's Y multiplier. The Y multiplier is how Genie determines which pixel position to put each row on. An easy way to do this is to (while on the appropriate screen) go into the browser's developer tools, go into the console, and type pui.multY -- this should print the current Y multiplier. In the default Hybrid skin, for example, this is 23.

5) Open the Genie designer, set the screen identifier appropriately.

6) If you added the grid manually, add it again. (If it's an automatically detected grid, it should already be there, so skip this step.) Save your changes, refresh the screen, go back into the Genie designer.

7) Click on the grid, subtract the Y multiplier from the top property so that the first row of the grid is one row higher. For example, if the grid's top position is 254px and the Y multiplier is 23, change it to 231px.

8) Change the "has header" property to true. Change the number of rows to 1 higher to compensate for the header. Change the row height and header height to match the Y multiplier (in a detected grid, the row height will already be the Y multiplier, but you'll still have to update the header height).

9) Save the screen and exit the designer. It should now show the header, and all of the data should be found in the grid, as expected. Note that steps 7-8 *must* be done by adjusting the settings in the Genie Designer because those settings are applied as the screen is loaded, whereas the code you are running in onload runs later. By doing it in the Genie designer, the subfile should consume the proper data and put it into the proper rows on the grid.

10) Now that the proper data is loaded into the grid, you can insert your code into the onload event. (the code you posted here, earlier.) This can still change the top, left, row height, remove columns, etc. That's okay to be done during onload now because the data has already been loaded into the appropriate cells of the grid, when you adjust them now it'll just move them to a different position on the screen, which is okay to do at this point.

11) Save the changes to the onload event and exit the designer, it should now run with your code properly.


One more note:

You are doing one line of code that I don't understand:

Code: Select all

myGrid.grid.setProperty("scrollbar", "scrolling");

The scrollbar property in 5250 has only two possible values, true and false. Rich Display is a little bit different, Rich Displays support values of paging, sliding and none. However none of them has the option "scrolling", so I don't know what you are trying to accomplish with that. I'm guessing you meant "sliding" (like Rich Displays have) but I don't think this can be used in 5250 mode.