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