This is a migrated thread and some comments may be shown as answers.

Scroll to Column

5 Answers 80 Views

Grid

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 30 Sep 2018, 01:59 PM

Hi Georgi, thank you for your reply. It did not, however, work for me.

setTimeout(function () {
$('#AssignmentsGrid .k-grid-content').animate({ scrollLeft: $('#AssignmentsGrid .k-grid-content tr td:eq(25)').offset().left })
}, 3000)

If I use this in either $(document).ready or along in the script section as you show in your example, I'm getting an unable to get property left of undefined or null. If I put this line in the OnDataBound function, I don't receive an error, but it doesn't scroll either.

The only difference I can tell between what you have and what I have, is I have groups and aggregates, so the first row is a grouping row? Could that be the problem?

Thanks, Mike

answered on 02 Oct 2018, 12:09 PM

Hello Mike,

I have tested the sample with a group and aggregates within the group footer. Yet I was able to scroll to the cell using the same logic. Below you will find a modified version of the sample:

http://dojo.telerik.com/iqiRURaY/3

Nevertheless, could you please try to select the first row with data-uid attribute and let me know if the issue still occurs?

e.g.

$('#grid .k-grid-content').animate({scrollLeft:$('#grid .k-grid-content tr[data-uid]:eq(0) td:eq(COLUMN_INDEX)').offset().left})

Having said that, sharing a demo that clearly replicates the issue would definitely help us fully understand the case and we will be able to provide further assistance to the best of our knowledge.

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 02 Oct 2018, 01:17 PM

Sorry Georgi, still no go. Perhaps I'm doing something wrong in the syntax. I've included my entire DataBound function here for you to see. With the UID, I get the error, unable to get property 'left' of undefined. If I leave it as you have it in your example, in the databound function, I get no error, but no scrolling either. If I put it in Document Ready or just in the script tags directly, it get the undefined error.

I'm afraid creating a new project to show you would be very time consuming so instead, I've tried to show the relevant info. Would it be easier for me to open a private ticket and then I can share with you more of the code I have?

function AssignmentsGridDataBound(e) {

var grid = this;

var datasource = this.dataSource;

var items = datasource.view();

for (var i = 0; i < items.length; i++) {

if (items[i].value == "") {

this.tbody.find("tr[data-uid='" + items[i].items[0].uid + "']").hide();

this.lockedContent.find("tr[data-uid='" + items[i].items[0].uid + "']").hide();

}

//Update column headers

var counter = 1

grid.tbody.find("tr[role='row']").each(function () {

if (counter == 1) {

var model = grid.dataItem(this);

$("#AssignmentsGrid thead [data-field=Month1Value] .k-link").html(model.Month1Title)

$("#AssignmentsGrid thead [data-field=Month2Value] .k-link").html(model.Month2Title)

$("#AssignmentsGrid thead [data-field=Month3Value] .k-link").html(model.Month3Title)

$("#AssignmentsGrid thead [data-field=Month4Value] .k-link").html(model.Month4Title)

$("#AssignmentsGrid thead [data-field=Month5Value] .k-link").html(model.Month5Title)

$("#AssignmentsGrid thead [data-field=Month6Value] .k-link").html(model.Month6Title)

$("#AssignmentsGrid thead [data-field=Month7Value] .k-link").html(model.Month7Title)

$("#AssignmentsGrid thead [data-field=Month8Value] .k-link").html(model.Month8Title)

$("#AssignmentsGrid thead [data-field=Month9Value] .k-link").html(model.Month9Title)

$("#AssignmentsGrid thead [data-field=Month10Value] .k-link").html(model.Month10Title)

$("#AssignmentsGrid thead [data-field=Month11Value] .k-link").html(model.Month11Title)

$("#AssignmentsGrid thead [data-field=Month12Value] .k-link").html(model.Month12Title)

$("#AssignmentsGrid thead [data-field=Month13Value] .k-link").html(model.Month13Title)

$("#AssignmentsGrid thead [data-field=Month14Value] .k-link").html(model.Month14Title)

$("#AssignmentsGrid thead [data-field=Month15Value] .k-link").html(model.Month15Title)

$("#AssignmentsGrid thead [data-field=Month16Value] .k-link").html(model.Month16Title)

$("#AssignmentsGrid thead [data-field=Month17Value] .k-link").html(model.Month17Title)

$("#AssignmentsGrid thead [data-field=Month18Value] .k-link").html(model.Month18Title)

$("#AssignmentsGrid thead [data-field=Month19Value] .k-link").html(model.Month19Title)

$("#AssignmentsGrid thead [data-field=Month20Value] .k-link").html(model.Month20Title)

$("#AssignmentsGrid thead [data-field=Month21Value] .k-link").html(model.Month21Title)

$("#AssignmentsGrid thead [data-field=Month22Value] .k-link").html(model.Month22Title)

$("#AssignmentsGrid thead [data-field=Month23Value] .k-link").html(model.Month23Title)

$("#AssignmentsGrid thead [data-field=Month24Value] .k-link").html(model.Month24Title)

$("#AssignmentsGrid thead [data-field=Month25Value] .k-link").html(model.Month25Title)

$("#AssignmentsGrid thead [data-field=Month26Value] .k-link").html(model.Month26Title)

$("#AssignmentsGrid thead [data-field=Month27Value] .k-link").html(model.Month27Title)

$("#AssignmentsGrid thead [data-field=Month28Value] .k-link").html(model.Month28Title)

$("#AssignmentsGrid thead [data-field=Month29Value] .k-link").html(model.Month29Title)

$("#AssignmentsGrid thead [data-field=Month30Value] .k-link").html(model.Month30Title)

$("#AssignmentsGrid thead [data-field=Month31Value] .k-link").html(model.Month31Title)

$("#AssignmentsGrid thead [data-field=Month32Value] .k-link").html(model.Month32Title)

$("#AssignmentsGrid thead [data-field=Month33Value] .k-link").html(model.Month33Title)

$("#AssignmentsGrid thead [data-field=Month34Value] .k-link").html(model.Month34Title)

$("#AssignmentsGrid thead [data-field=Month35Value] .k-link").html(model.Month35Title)

$("#AssignmentsGrid thead [data-field=Month36Value] .k-link").html(model.Month36Title)

$("#AssignmentsGrid thead [data-field=Month37Value] .k-link").html(model.Month37Title)

$("#AssignmentsGrid thead [data-field=Month38Value] .k-link").html(model.Month38Title)

$("#AssignmentsGrid thead [data-field=Month39Value] .k-link").html(model.Month39Title)

$("#AssignmentsGrid thead [data-field=Month40Value] .k-link").html(model.Month40Title)

$("#AssignmentsGrid thead [data-field=Month41Value] .k-link").html(model.Month41Title)

$("#AssignmentsGrid thead [data-field=Month42Value] .k-link").html(model.Month42Title)

$("#AssignmentsGrid thead [data-field=Month43Value] .k-link").html(model.Month43Title)

$("#AssignmentsGrid thead [data-field=Month44Value] .k-link").html(model.Month44Title)

$("#AssignmentsGrid thead [data-field=Month45Value] .k-link").html(model.Month45Title)

$("#AssignmentsGrid thead [data-field=Month46Value] .k-link").html(model.Month46Title)

$("#AssignmentsGrid thead [data-field=Month47Value] .k-link").html(model.Month47Title)

$("#AssignmentsGrid thead [data-field=Month48Value] .k-link").html(model.Month48Title)

$("#AssignmentsGrid thead [data-field=Month49Value] .k-link").html(model.Month49Title)

$("#AssignmentsGrid thead [data-field=Month50Value] .k-link").html(model.Month50Title)

$("#AssignmentsGrid thead [data-field=Month51Value] .k-link").html(model.Month51Title)

$("#AssignmentsGrid thead [data-field=Month52Value] .k-link").html(model.Month52Title)

$("#AssignmentsGrid thead [data-field=Month53Value] .k-link").html(model.Month53Title)

$("#AssignmentsGrid thead [data-field=Month54Value] .k-link").html(model.Month54Title)

$("#AssignmentsGrid thead [data-field=Month55Value] .k-link").html(model.Month55Title)

$("#AssignmentsGrid thead [data-field=Month56Value] .k-link").html(model.Month56Title)

$("#AssignmentsGrid thead [data-field=Month57Value] .k-link").html(model.Month57Title)

$("#AssignmentsGrid thead [data-field=Month58Value] .k-link").html(model.Month58Title)

$("#AssignmentsGrid thead [data-field=Month59Value] .k-link").html(model.Month59Title)

$("#AssignmentsGrid thead [data-field=Month60Value] .k-link").html(model.Month60Title)

$("#AssignmentsGrid thead [data-field=Month61Value] .k-link").html(model.Month61Title)

$("#AssignmentsGrid thead [data-field=Month62Value] .k-link").html(model.Month62Title)

$("#AssignmentsGrid thead [data-field=Month63Value] .k-link").html(model.Month63Title)

$("#AssignmentsGrid thead [data-field=Month64Value] .k-link").html(model.Month64Title)

$("#AssignmentsGrid thead [data-field=Month65Value] .k-link").html(model.Month65Title)

$("#AssignmentsGrid thead [data-field=Month66Value] .k-link").html(model.Month66Title)

$("#AssignmentsGrid thead [data-field=Month67Value] .k-link").html(model.Month67Title)

$("#AssignmentsGrid thead [data-field=Month68Value] .k-link").html(model.Month68Title)

$("#AssignmentsGrid thead [data-field=Month69Value] .k-link").html(model.Month69Title)

$("#AssignmentsGrid thead [data-field=Month70Value] .k-link").html(model.Month70Title)

$("#AssignmentsGrid thead [data-field=Month71Value] .k-link").html(model.Month71Title)

$("#AssignmentsGrid thead [data-field=Month72Value] .k-link").html(model.Month72Title)

}

counter = counter + 1;

});

setTimeout(function () {

$('#AssignmentsGrid .k-grid-content').animate({ scrollLeft: $('#AssignmentsGrid .k-grid-content tr[data-uid]:eq("23394453-8cde-4372-98b7-9e3979e96120") td:eq(25)').offset().left })

}, 6000);

}