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. Quote 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, Quote 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 Quote 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 Quote 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; Quote 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! Quote 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? Quote 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 Quote 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 ?! Quote 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 Quote 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 Quote 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', []); } }) } Quote 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. Quote 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 ? Quote 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.