How to go to the Next Page on UnimDBListGrid

[Rafael P]

Hi Everyone!

UnimDbListGrid has a option that allow the users to navigate between pages in WebOptions -> Paged -> PageSize.

But, it will be much better if can display some buttons to go to the next and previously page, indeed. I already have tested UnimDBNavigator and unfortunately only have buttons to go to the last and first page. 

There's another option or workaround that implements a button to go to the next page (not the last one) using this component on UnimdbListGrid?

Thanks!! 

[Rafael P]

I already have tested this, but it's not working on 1.90.0.1535, here's the code:

 

function afterrender(sender, eOpts)
{
    var me = sender;
    
    me.view.getEl().on('scroll', function(e, t) {
        if (t.scrollHeight - (t.scrollTop + me.view.el.getHeight()) == 0) {
            if (me.pagingBar) {
                me.pagingBar.moveNext()
            }
        }
        else if (t.scrollTop == 0) {
            if (me.pagingBar) {
                me.pagingBar.movePrevious()
            }
        }
    });
}

 

[Sherzod]

9 hours ago, Rafael P said:

if can display some buttons to go to the next and previously page, indeed.

Hello,

Is it acceptable for you to replace Next/Prior buttons with NextPage/PriorPage?

[Rafael P]

6 hours ago, Sherzod said:

Hello,

Is it acceptable for you to replace Next/Prior buttons with NextPage/PriorPage?

Yes, it will be! But, how can i do that? Do you have any example or source code, please? 

 

Thank you so much! 

[Sherzod]

19 minutes ago, Rafael P said:

Do you have any example or source code, please? 

I will try a bit later.

[Rafael P]

12 minutes ago, Sherzod said:

I will try a bit later.

No problem, thanks again! 

[Sherzod]

2 hours ago, Rafael P said:

how can i do that? Do you have any example or source code, please? 

Please use this code as a temporary solution.
This code may not work in future versions.
And we will try to add these functionality in future releases.

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  UniSession.AddJS(
    'var me = '+ UnimDBNavigator1.JSName +';'+
    'var store = '+ UnimDBListGrid1.JSName + '.getStore();'+
    'var items = me.getDockedItems();'+
    'var nextBtn;'+
    'var priorBtn;'+

    'items.forEach(function(u) {'+
    '    if (u.uname === "uni_dbn_NEXT") {'+
    '        nextBtn = u'+
    '    } else if (u.uname === "uni_dbn_PRIOR") {'+
    '        priorBtn = u'+
    '    } else {'+
    '        return false'+
    '    }'+
    '});'+
    'if (nextBtn) {'+
    '    nextBtn.events.tap.clearListeners();'+
    '    nextBtn.addListener("tap", function() {'+
    '        if (store.currentPage < Math.ceil(store.totalCount/store.pageSize)) {store.nextPage()}'+
    '    });'+
    '}'+

    'if (priorBtn) {'+
    '    priorBtn.events.tap.clearListeners();'+
    '    priorBtn.addListener("tap", function() {'+
    '        if (store.currentPage > 1) {store.previousPage()}'+
    '    });'+
    '}'
  );
end;

 

[mhmda]

First of all Thanks goes to Sherzod I learned a lot from him he super master when it comes to client-side code 🙂

 

 

[Rafael P]

Thank you guys! Both of you are amazing and inspires me to keep up at learning and studying programming, also Delphi and uniGUI is my first language that i'm having contact everyday!

Thank you so much for the videos and the tips, really appreciate! 

[Rafael P]

3 hours ago, Sherzod said:

Please use this code as a temporary solution.
This code may not work in future versions.
And we will try to add these functionality in future releases.

procedure TMainmForm.UnimFormReady(Sender: TObject);
begin
  UniSession.AddJS(
    'var me = '+ UnimDBNavigator1.JSName +';'+
    'var store = '+ UnimDBListGrid1.JSName + '.getStore();'+
    'var items = me.getDockedItems();'+
    'var nextBtn;'+
    'var priorBtn;'+

    'items.forEach(function(u) {'+
    '    if (u.uname === "uni_dbn_NEXT") {'+
    '        nextBtn = u'+
    '    } else if (u.uname === "uni_dbn_PRIOR") {'+
    '        priorBtn = u'+
    '    } else {'+
    '        return false'+
    '    }'+
    '});'+
    'if (nextBtn) {'+
    '    nextBtn.events.tap.clearListeners();'+
    '    nextBtn.addListener("tap", function() {'+
    '        if (store.currentPage < Math.ceil(store.totalCount/store.pageSize)) {store.nextPage()}'+
    '    });'+
    '}'+

    'if (priorBtn) {'+
    '    priorBtn.events.tap.clearListeners();'+
    '    priorBtn.addListener("tap", function() {'+
    '        if (store.currentPage > 1) {store.previousPage()}'+
    '    });'+
    '}'
  );
end;

 

Thanks again for the fast reply @Sherzod. Works perfectly!