Someone asked the question if we can use the 'Next' and 'Previous' grid buttons in Fluid similar to Classic?
In Classic, we use the 'Previous' and 'Next' buttons which are available on the Grid Navigation Bar to move past the number of rows defined in the grid 'occurs count'.
When I revisited my previous post on Fluid Grids (Part 2), I realized that I set the Grid Properties - 'Occurs Count' to 5 rows and as a result I could only see 5 rows even though there are 13 rows overall. As you can see in the demo video below, when I search/find a value that is not in the first 5 rows, I can still find them. Only issue is that I cannot freely navigate across the 13 rows.
So, how do we navigate across the various rows in the Fluid grid if we are limited by the 'Occurs Count' as shown in the above example? One way is to use, 'Unlimited Occurs Count' but that is cheating!
Lazy Scrolling
Fortunately for grids, we can enable "lazy scrolling" which will pull in the additional rows dynamically as we scroll down. This method of lazy scrolling (if you will) is aimed at improving the performance of fluid application pages.
PeopleBooks | Enabling Lazy Scrolling for Scrollable Grids
Demo of Lazy Scrolling
Environment Details
FSCM 9.2 PUM 30
PeopleTools 8.57.02
In Classic, we use the 'Previous' and 'Next' buttons which are available on the Grid Navigation Bar to move past the number of rows defined in the grid 'occurs count'.
When I revisited my previous post on Fluid Grids (Part 2), I realized that I set the Grid Properties - 'Occurs Count' to 5 rows and as a result I could only see 5 rows even though there are 13 rows overall. As you can see in the demo video below, when I search/find a value that is not in the first 5 rows, I can still find them. Only issue is that I cannot freely navigate across the 13 rows.
So, how do we navigate across the various rows in the Fluid grid if we are limited by the 'Occurs Count' as shown in the above example? One way is to use, 'Unlimited Occurs Count' but that is cheating!
Lazy Scrolling
Fortunately for grids, we can enable "lazy scrolling" which will pull in the additional rows dynamically as we scroll down. This method of lazy scrolling (if you will) is aimed at improving the performance of fluid application pages.
PeopleBooks | Enabling Lazy Scrolling for Scrollable Grids
Demo of Lazy Scrolling
Environment Details
FSCM 9.2 PUM 30
PeopleTools 8.57.02
Hi Sasanka,
ReplyDeleteThank You for sharing this information. We have utilized this in our current work. :)
Now, we are stuck in scenario and searching for a solution -
>> We have 2 Grids with the same columns (Name, Employee ID and Job Title) on the same Fluid Page.
>> They are placed one over the other.
Now, when we see the page, the columns are not aligned, i.e. Width of Name column of one grid is different then the other.
Can you help us in some way how we can resolve this?
Regards,
Sidd
@Sidd - I am not sure why that might be the case.
DeleteWhich option are you using out of the various examples from these two posts?
https://pe0ples0ft.blogspot.com/2017/09/fluid-ui-working-with-grids.html
https://pe0ples0ft.blogspot.com/2019/01/fluid-ui-working-with-grids-part-2.html
Hi Sasank,
ReplyDeleteIn a fluid page, I have a grid with Flex grid layout. I want to hide the grid lines, both vertical and horizonal. Since its a flex grid the column lines are all not visible and that's fine. But the row lines are not hidden. Is there a way to hide the row lines also?
thanks
Vasanthi
@Vasanthi - So sorry for the delay in responding.
DeleteTry removing/overriding the following CSS in PSSTYLEDEF_FMODE:
.ps_grid-flex td.ps_grid-cell, .ps_grid-flex .ps_grid-body th.ps_grid-cell {
border-bottom: 1px solid #ced4da;
}
Sasank
ReplyDeleteI have hug grids sometimes about 1000 lines
So I set the occurs Count is set to 50 , thus the screen only shows max 50,,, and when it users scrolls lower it loads more. This helps the speedup of loading to screen ..
But I have added button to show only errors ... (style=psc_hidden)
Problem is ... if the data is not loaded onto the Page yet I see the first 50 rec, and the errors maybe further down in the grid ,the grid shows nothing because the error is somewhere below..
I know the data is loaded into component but not on screen, So How do I load all data so all errors will show.
I wonder if you can write some peoplecode on the button event to filter and send back only those errors with errors to the client (browser)?
DeleteHi.. is there anyway out of freezing certain columns in fluid grid, like it’s feasible for scrollable grid layout grid in classic mode.
ReplyDeleteHi Binod - Good question! I have not tried that before. I will let you know if I find any options.
DeleteHi Sasank, did you get chance to try freezing columns in flex grid. Am also looking for this solution. TIA
Delete