jQuery animate & scrollTop [Solved]

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
Pomegranate
Posts: 33
Joined: Sun Jul 16, 2017 11:53 pm
Location: Mongolia, Ulaanbaatar

jQuery animate & scrollTop [Solved]

Post by Pomegranate »

Hi guys,

I'm using a checkbox grid inside a form and whenever I edit it, I want to automatically scroll down to the selected checkbox row, so I've come up with a jQuery script that picks up a class and scrolls down to it,

Code: Select all

jQuery('html, body').animate({
    scrollTop: jQuery('.defectComponentQuery table tr.k-state-selected:visible:first').offset().top
}, 1000);

/* .defectComponentQuery is the class of the Checkbox Grid, and since its a table, I've used table tr to single out the .k-state-selected class, as there might be other elements with the same class. */
Now, this works on JSFiddle, but I can't get it to work on AwareIM using the Render Script function, there's no error, it just doesn't work.

I've used $ instead of jQuery, no difference, I also created an HTML row and inserted the script in it, but then I get an error that says: 'Uncaught TypeError: Cannot read property 'top' of undefined' and the pop-up doesn't show up.

I'm using a modal pop-up as the editing window, any help would be appreciated, thank you for your time.

Here's the link to the JSFiddle: https://jsfiddle.net/2h6q4jav/
Last edited by Pomegranate on Fri Feb 14, 2020 1:17 am, edited 1 time in total.
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: jQuery animate & scrollTop

Post by Jaymer »

the problem is obvious...
Kendo uses English, and you've written the text in Latin, so it can't find the place to scroll to.
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: jQuery animate & scrollTop

Post by Jaymer »

Have you tried it in a 'new tab' window, just for comparison?
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Pomegranate
Posts: 33
Joined: Sun Jul 16, 2017 11:53 pm
Location: Mongolia, Ulaanbaatar

Re: jQuery animate & scrollTop

Post by Pomegranate »

Hi Jaymer,

I've tried out a pop-up window and it's the same, and there's a button to add a script on the pop-up window settings area, I've also used that and it's the same as before :(.
Pomegranate
Posts: 33
Joined: Sun Jul 16, 2017 11:53 pm
Location: Mongolia, Ulaanbaatar

Re: jQuery animate & scrollTop [Solved]

Post by Pomegranate »

Found a solution, so, the variables being declared wasn't finding the correct element, it seems Aware renders the table first and takes a while to populate it with data, so I added a timeout function and now it works,

I used this bit of code if someone wants to use it later:

Code: Select all

setTimeout(function (){

	var scrollContentOffset = $('.defectComponentQuery .k-grid-content tbody').offset().top;
    var selectContentOffset = $('.defectComponentQuery .k-grid-content .k-state-selected').offset().top;
    var distance = selectContentOffset - scrollContentOffset;

		$('.defectComponentQuery .k-grid-content').animate({
           scrollTop: distance
         }, 200);

}, 500);
I also added a class on the query, which is .defectComponentQuery and I added the above script in the query render script,

Cheers :)


EDIT: Can't find the edit title option to set this thread to "Solved"
Post Reply