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

Scroll to Column

5 Answers 77 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 25 Sep 2018, 01:32 PM

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

5 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 27 Sep 2018, 06:42 AM
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:



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.
0
Michael
Top achievements
Rank 1
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

0
Georgi
Telerik team
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:


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.
0
Michael
Top achievements
Rank 1
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);
         
    }
0
Georgi
Telerik team
answered on 04 Oct 2018, 06:21 AM
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
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.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Michael
Top achievements
Rank 1
Share this question
or