jQuery animate & scrollTop [Solved]

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,

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/

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.

Jaymer

Have you tried it in a 'new tab' window, just for comparison?

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

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:

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"