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

Prevent Partial Rows on When Scrolling

4 Answers 38 Views

Grid

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

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

Accepted