If you have questions or if you want to share your opinion about Aware IM post your message on this forum
#53137 by Pomegranate
Thu Feb 13, 2020 5:59 am
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 alljQuery('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.
#53138 by Jaymer
Thu Feb 13, 2020 6:16 am
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.
#53139 by Jaymer
Thu Feb 13, 2020 6:21 am
Have you tried it in a 'new tab' window, just for comparison?
#53140 by Pomegranate
Thu Feb 13, 2020 6:24 am
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 :(.
#53142 by Pomegranate
Thu Feb 13, 2020 9:14 am
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 allsetTimeout(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"

Who is online

Users browsing this forum: Google [Bot], MSN [Bot] and 22 guests