[Data Grid] Is it possible to get a page size dropdown?

Forge Component
(26)
Published on 31 Jul by OutSystems R&D
26 votes
Published on 31 Jul by OutSystems R&D

Hey guys,

Is it possible to get a built in page size dropdown? I've seen it on one of the demo pages but I'm unable to see if the option is in this outsystems version....

Currently I'm using a server side dropdown with an Ajax Refresh (using the data grid refresh throws an error....), however using an Ajax Refresh breaks this entire thing, unless I place it inside an iframe.

Is there a more elegant solution available? Perhaps add an option to allow it built in the component itself? (I could clone this component and fiddle around to do it myself, but then I can no longer update to any new features... so I'd rather not do that).

Hey Joey,

What do you mean when you you say "built in page size dropdown"? Do you think you could link the demo page?




Hey Joey,

I managed to create a webblock that does what you need, and I'll try to walk you through the steps.

1) From the demo page you linked, get the FlexGridPager.js file ( https://demos.wijmo.com/5/PureJS/FlexGridPager/FlexGridPager/scripts/FlexGridPager.js) and import it into your application as a resource (deploy to target directory);

2) Create a webblock with a GridId input and inject the JavaScript file that you loaded as a resource in the Preparation:

3) Add a text input to your webblock page, and give it an ID and a variable (this will be "taken over" by the Wijmo library and converted into your dropdown);

4) Put this Javascript into an expression and unescape it:

SyntaxEditor Code Snippet

"<script>

    var theGrid = GridOS.ComponentUtils.getGridObjectById('" + GridId + "').grid;
    var thePager = new wijmo.grid.FlexGridPager(theGrid, 8);
    var thePageSize = new wijmo.input.ComboBox('#" + DropdownInput.Id + "', {
        itemsSource: [0, 4, 8, 20, 5000],
        selectedItem: thePager.pageSize,
        selectedIndexChanged: function (s, e) {
            thePager.pageSize = s.selectedItem;
        }
    });
</script>"


Whenever you use this webblock, you should have your dropdown:


Since this is pure JS and one resource, you won't have to clone the Outsystems library, and can just create an application that extends functionality.

Hey Afonso, 

This is working great, thanks :) Saves me a bunch of trouble.

It seems there is still a problem, it seems to be breaking the paging control (the arrows with 1 to x of x)...

Any idea's on this?

Do you get any errors in your browser console?

It could be that shifting the pagination size requires you to have a custom pagination navigator, like in the demo page you linked. In that case, you might have to stop using the Outsystems provided navigator and instead use the pagination control example in the demo.

Hey Afonso, 

No browser errors/console errors no, you are correct, I have to stop using the Outsystems provided navigator and instead use a version made within the same web screen (so I can access it's id's and set it up on this page aswell).

Basically creating a duplicate of the existing page controls just so I can access it and use it for the page control.

Solution

Here's the javascript I used for anybody trying to create this:


"  
var theGrid = GridOS.ComponentUtils.getGridObjectById('" + GridWidgetId + "').grid;
var thePager = new wijmo.grid.FlexGridPager(theGrid, 25);
var thePageSize = new wijmo.input.ComboBox('#" + DropDownInput.Id + "', {
    itemsSource: [0, 10, 25, 50, 100, 200, 5000],
    selectedItem: thePager.pageSize,
    selectedIndexChanged: function (s, e) {
        thePager.pageSize = s.selectedItem;
    }
});

document.getElementById('"+ThePager.Id+"').addEventListener('click', function (e) {
    var btn = e.target;
    if (btn) {
        if (btn.id.indexOf('first') > -1) {
            thePager.moveToFirstPage();
        } else if (btn.id.indexOf('prev') > -1) {
            thePager.moveToPreviousPage();
        } else if (btn.id.indexOf('next') > -1) {
            thePager.moveToNextPage();
        } else if (btn.id.indexOf('last') > -1) {
            thePager.moveToLastPage();
        }
    }
});

thePager.stateChanged.addHandler(function (s, e) {
    updatePager(thePager, theGrid, '"+current.Id+"', '"+From.Id+"', '"+To.Id+"', '"+Total.Id+"');
});

updatePager(thePager, theGrid, '"+current.Id+"', '"+From.Id+"', '"+To.Id+"', '"+Total.Id+"' );

// update pager text
function updatePager(pager, grid, current, fromelement, toelement, totalelement) {
    var caption = 'Page ' + (pager.pageIndex + 1) + ' of ' + pager.pageCount;
    document.getElementById(current).textContent = caption;
    document.getElementById(current).value = caption;
    document.getElementById(fromelement).textContent = (pager._firstRow + 1);
    document.getElementById(toelement).textContent = (pager._lastRow + 1);
    document.getElementById(totalelement).textContent = grid.rows.length;
}
"

From, To and Total are expressions/spans to update with the counters.I have placed 5 buttons with names first, prev, current, next, last (this code is checking if the Id contains one of these strings), these are placed inside a div called ThePager.

Maybe somebody from Outsystems R&D can also include this in the original component? Please note you have to set the ResultsPage of the original widget to 0 to load all rows, this part basically overwrites the paging functionality, when exporting please keep in mind that all rows (not filtered) on the other pages will also be exported.

Solution

Thank you for sharing, Joey. Perhaps Outsystems R&D can integrate this with their own pagination solution.