Jump to content

DBGrid - Next & Previous page


Servant5166

Recommended Posts

Hi,

 

Also for "next" you can try to use this solution I think:

 

UniDBGrid -> ClientEvents -> ExtEvents -> function afterrender:

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()
            }
        }
    });
}
Link to comment
Share on other sites

For both:

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()
            }
        }
    });
}
Link to comment
Share on other sites

 

For both:

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()
            }
        }
    });
}

It works well. 

 

Thank you so much!

Link to comment
Share on other sites

  • 5 months later...
  • 2 months later...
9 hours ago, leons said:

Doesn't seem to work in version, extjs 6.6.0 :mellow:

Hello,

Maybe as a "workaround", try:

1. "pagingBar":

function pagingBar.beforechange(sender, page, eOpts)
{
    sender.isAfterScroll=false;
}

function pagingBar.change(sender, pageData, eOpts)
{
    Ext.defer(function() {
        sender.isAfterScroll=true;
    }, 200);
}

2. "panel":

function afterrender(sender, eOpts)
{
    var me = sender;
    
    me.view.getEl().on('scroll', function(e, t) {
      if (me.pagingBar.isAfterScroll) { 
        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();
            }
        }
      }
    });
}

 

Link to comment
Share on other sites

On 2/22/2018 at 3:41 AM, Sherzod said:

For both:


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()
            }
        }
    });
}

Is there a way to apply this approach on Mobile? Specifically in UnimDbListGrid? @Sherzod

Link to comment
Share on other sites

  • 1 month later...

Dear sir,

I am evaluating unigui and i haven't found a way to make unimdbgrid move to next and previous page using a form button. This is important for our company to move on buying unigui . Even if this can't be done UNIGUI is a unique component for delphi developers.

 

Link to comment
Share on other sites

1 hour ago, TNT23 said:

I am evaluating unigui and i haven't found a way to make unimdbgrid move to next and previous page using a form button. This is important for our company to move on buying unigui . Even if this can't be done UNIGUI is a unique component for delphi developers.

Which build are you using?

Link to comment
Share on other sites

On 10/26/2018 at 3:51 AM, Sherzod said:

Hello,

Maybe as a "workaround", try: 

1. "pagingBar":


function pagingBar.beforechange(sender, page, eOpts)
{
    sender.isAfterScroll=false;
}

function pagingBar.change(sender, pageData, eOpts)
{
    Ext.defer(function() {
        sender.isAfterScroll=true;
    }, 200);
}

2. "panel":


function afterrender(sender, eOpts)
{
    var me = sender;
    
    me.view.getEl().on('scroll', function(e, t) {
      if (me.pagingBar.isAfterScroll) { 
        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();
            }
        }
      }
    });
}

 

For the previous page, it worked ... But it did not work for the next page.

Link to comment
Share on other sites

  • 1 year later...
For the previous page, it worked ... But it did not work for the next page.


function afterrender(sender, eOpts)
{
    var me = sender;
    
    me.view.getEl().on('scroll', function(e, t) {
      if (me.pagingBar.isAfterScroll) { 
        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();
            }
        }
      }
    });
}
Link to comment
Share on other sites

  • 3 years later...
On 10/30/2018 at 6:19 AM, ainsama1 said:

Is there a way to apply this approach on Mobile? Specifically in UnimDbListGrid? @Sherzod

 

Is there solution for this question ? i need it badly too..

i found part of solution:

DBGrid.WebOptions.PageSize := DBGrid.WebOptions.PageSize + 10

I dont know where and how should i check scrolling position and use ajaxrequest for the code above.

Link to comment
Share on other sites

ok, solution found :

 

function afterCreate(sender) 
{
    let scroller = sender.getScrollable();

    if (scroller) {   
        scroller.on('scrollend', function(a, b, c) { 

            if (scroller.getMaxPosition().y <= c) {               
                ajaxRequest(sender, 'ScrollBottomEvent', []);
               
            }
        })
    }
}   

procedure TmForm.DBGridAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'ScrollBottomEvent' then
    begin
      DBGrid.WebOptions.PageSize := DBGrid.WebOptions.PageSize + 10
    end;

end;

Link to comment
Share on other sites

Can it be done without using ajax function ?

what i mean is: Can ,,DBGrid.WebOptions.PageSize := DBGrid.WebOptions.PageSize + 10"  be written in ,,function afterCreate" ? 

 

I want to simplify code as much as possible. 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...