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

Prevent Partial Rows on When Scrolling

4 Answers 49 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 05 Mar 2014, 12:02 AM
I need the grid to scroll exactly one row with each mouse wheel click, or each click on the scroll bar arrows, and if I click in the scroll bar somewhere, it has to match up perfectly with the displayed rows without showing any partial rows. In short, I am required to never display a partial row.

Is there a way to enforce this with the kendoGrid? Or what is the basic approach that you might suggest for tackling this behavior in a general way?

Currently, each row is set to 15px height, and the content area is set to 240px, allowing for a total of 16 visible rows at a time. It looks great on load, but when I start to scroll down, the scroll does not match exactly with each row height. This means there might be a row that is partially displayed on both the top and bottom of the scrollable area.



Here's how I've configured the columns:

columns: [
                {field:"one",
                    title: "One",
                    attributes:{
                        style: "width:60px; height:15px; border: 0px;"
                    },
                    headerAttributes:{
                        style:"width:60px; height:20px; border-right:1px solid gray;"
                    }},

                {field:"two",
                    title: "Two",
                    attributes:{
                        style: "width:170px; height:15px; border: 0px;"
                    },
                    headerAttributes:{
                        style:"width:170px; height:20px; border-right:1px solid gray;"
                    }}
            ]

/*snip*/
$tableGrid.find(".k-grid-content").height(240);

4 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Rusev
Telerik team
answered on 06 Mar 2014, 08:55 AM
Hello Keith,

The Grid doesn't offer such functionality. The scroll bar you see in the grid is the native browser scroll bar and it is behaving as such.

You can intercept the `scroll` event for the `.k-grid-content` element and within that handler implement your requirement.

Regards,
Nikolay Rusev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Keith
Top achievements
Rank 1
answered on 10 Mar 2014, 08:10 PM
On a seperate post it had been mentioned that the grid does not autoscroll when using keyboard navigation if the virtual scroll is set.

http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#scrolling

Most of the grids in question are using virtual scrolling. How might it possibly effect the virtual scroll functionality if I were to intercept the scroll event as you suggest?
0
Accepted
Nikolay Rusev
Telerik team
answered on 11 Mar 2014, 12:04 PM
Hello Keith,

Indeed virtual scrolling and keyboard navigation is not supported. Unfortunately there isn't reliable way of handling the current (currently highlighted cell due to navigation) when the user scroll the grid and next batch of items is rendered in the grid.

Regards,
Nikolay Rusev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Keith
Top achievements
Rank 1
answered on 11 Mar 2014, 03:37 PM
Thanks for the confirmation.
Tags
Grid
Asked by
Keith
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Keith
Top achievements
Rank 1
Share this question
or