Tim Posted October 30, 2017 Share Posted October 30, 2017 In my project i have a TUniScrollBox onto which rows of dynamically generated controls are placed. For performance reasons, when the frame is first displayed we only show the first 15 rows. At the bottom of the list there is a "more" button that the user can click to fetch the next 15 rows. What we would like to happen instead is for the next 15 rows to be fetched automatically when the user scrolls to the bottom of the list. To accomplish this, we need to be able to detect somehow when the vertical scrollbar of the TUniScrollBox is at or near its bottommost position. The TUniScrollBox control itself doesn't seem to have any properties or events relevant to the scroll position. Is there some way to do this? Ideally i would be able to call some function on a regular basis that would return the vertical scrollbar position as a percentage (0% = topmost position, 100% = bottommost position). I tried to see if it might be possible to accomplish this using Javascript, but when i run the following code UniSession.AddJS( 'alert(' + UniScrollBox1.JSName + '.inputEl.dom.scrollY); '); i get an error message: Unable to get property 'dom' of undefined or null reference alert(O13.inputEl.dom.scrollY); So TUniScrollBox doesn't have a corresponding DOM element? Is there any extJS documentation i can refer to? I would appreciate any help on this. Link to comment Share on other sites More sharing options...
Sherzod Posted October 30, 2017 Share Posted October 30, 2017 Hi, Can you make a simple testcase for this? Best regards, Link to comment Share on other sites More sharing options...
Tim Posted October 30, 2017 Author Share Posted October 30, 2017 Thanks for the reply. I have attached a zip file containing a simple example project. Every time you click on "...more..." it adds another 15 rows to the list. How can i change it so that it automatically adds another 15 rows when the user scrolls to the end of the list? TestCaseForForum.zip Link to comment Share on other sites More sharing options...
Sherzod Posted October 30, 2017 Share Posted October 30, 2017 Thanks for the testcase, I will check this Link to comment Share on other sites More sharing options...
Sherzod Posted October 30, 2017 Share Posted October 30, 2017 How can i change it so that it automatically adds another 15 rows when the user scrolls to the end of the list? Maybe like this ?!: 1. UniScrollBox1 -> ClientEvents -> ExtEvents -> function afterrender: function afterrender(sender, eOpts) { var me = sender; me.el.dom.addEventListener('scroll', function(event) { var element = event.target; if (element.scrollHeight - element.scrollTop === element.clientHeight) { ajaxRequest(me, 'scrolledToBottom', []); } }) } 2. UniScrollBox1 -> OnAjaxEvent: procedure TMainForm.UniScrollBox1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName = 'scrolledToBottom' then begin AddSomeMoreRows end; end; Link to comment Share on other sites More sharing options...
Tim Posted October 30, 2017 Author Share Posted October 30, 2017 thanks, it works perfectly! Link to comment Share on other sites More sharing options...
shawdown Posted January 25, 2018 Share Posted January 25, 2018 Maybe like this ?!: 1. UniScrollBox1 -> ClientEvents -> ExtEvents -> function afterrender: function afterrender(sender, eOpts) { var me = sender; me.el.dom.addEventListener('scroll', function(event) { var element = event.target; if (element.scrollHeight - element.scrollTop === element.clientHeight) { ajaxRequest(me, 'scrolledToBottom', []); } }) } 2. UniScrollBox1 -> OnAjaxEvent: procedure TMainForm.UniScrollBox1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName = 'scrolledToBottom' then begin AddSomeMoreRows end; end; Perfect solution for UniScrollBox. I tried with UniHTMLFrame but it does not work. Any suggestion? Link to comment Share on other sites More sharing options...
Sherzod Posted January 25, 2018 Share Posted January 25, 2018 Hi, Ok, I will check Link to comment Share on other sites More sharing options...
Sherzod Posted January 25, 2018 Share Posted January 25, 2018 Hi, I tried with UniHTMLFrame but it does not work. Any suggestion? Sorry, can you make a simple testcase for this ?! Link to comment Share on other sites More sharing options...
shawdown Posted January 25, 2018 Share Posted January 25, 2018 Following is an example. TestCaseForForum.zip Link to comment Share on other sites More sharing options...
Sherzod Posted January 25, 2018 Share Posted January 25, 2018 Thanks for the testcase, I will check and let you know Link to comment Share on other sites More sharing options...
Sherzod Posted January 25, 2018 Share Posted January 25, 2018 me.body.el.dom.addEventListener... function afterrender(sender, eOpts) { var me = sender; me.body.el.dom.addEventListener('scroll', function(event) { var element = event.target; if (element.scrollHeight - element.scrollTop === element.clientHeight) { ajaxRequest(me, 'scrolledToBottom', []); } }) } Link to comment Share on other sites More sharing options...
shawdown Posted January 25, 2018 Share Posted January 25, 2018 me.body.el.dom.addEventListener... function afterrender(sender, eOpts) { var me = sender; me.body.el.dom.addEventListener('scroll', function(event) { var element = event.target; if (element.scrollHeight - element.scrollTop === element.clientHeight) { ajaxRequest(me, 'scrolledToBottom', []); } }) } Perfect My need was to capture when the scroll bar was at the top. Here's an example. var me = sender; me.body.el.dom.addEventListener('scroll', function(event) { var element = event.target; if (element.scrollTop === 0) { ajaxRequest(me, 'scrolledToBottom', []); } }) Thanks Friend. Link to comment Share on other sites More sharing options...
Sherzod Posted January 25, 2018 Share Posted January 25, 2018 So, have you got what you wanted ? Link to comment Share on other sites More sharing options...
shawdown Posted January 25, 2018 Share Posted January 25, 2018 Yes. Worked perfectly. Thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now