Scroll to Column

[Michael]

Hi, I have a grid with two frozen columns and numerous columns representing the months of the year starting from the previous year, and extending 5 years into the future.  What I would like to do, is on DataBound, have the column for January of this year be the first column the user sees (in the horizontal scrollable section).  I'm looking for some way to scroll the grid programmatically to a specific column.  Is that possible?  If so how?

 

Thanks,

Mike

[Georgi]

Hello Michael,

A possible solution is to scroll to the column using the animate method.

e.g.

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

Below you will find a small sample which demonstrates the above approach:

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

Regards,
Georgi
Progress Telerik

[Michael]

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

[Georgi]

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

[Michael]

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);

    }

[Georgi]

Hello Mike,

Since we already discussed how to scroll to a certain column and we are now investigating your exact case I would recommend you to open a support ticket.

Please provide us with the full configuration of the grid and additionally some dummy data to populate it. Once I am able to debug locally your exact scenario I will provide more to the point solution.


Regards,
Georgi
Progress Telerik