Hi. I have a grid displaying using the following code. As you can see, I have scrollable set to false and pageable set to true. The pagesize is 6... The problem is that even if I only have one row displaying in the grid, it still allows for scrolling. The reason this is particularly problematic is that when I touch the screen, I may accidentally scroll it. This has the unfortunate effect of making the keyboard pop up on the tablet device every time. I would like to be able to solve both of these issues. Please advise. Thanks!
<div id="clientsDb">
<div id="gridViewDiv"></div>
</div>
<style scoped>
#clientsDb{
height: 100%;
width: 100%;
margin 0px auto 0;
padding: 0px 0px 0 0px;
}
</style>
var dataSource = new kendo.data.DataSource({
data: viewModel.itemsArray,
pageSize: 6
});
//gridview div for the main grid
$("#gridViewDiv").kendoGrid({
dataSource: dataSource,
mobile: "tablet",
//height: kendo.support.mobileOS.wp ? "24em" : 430,
resizable: false,
//toolbar: ["create"],
columns: [
{ field:"ItemDesc", title: "Item" },
{ field: "QtyOrdered", title:"Qty", width: "35px" },
{ field: "ItemPrice", title:"Price", format: "{0:c}", width: "60px" },
{ field: "PriceUOM", title:"Per", width: "35px" },
{ field: "OrderAmount", title:"Order Amt", format: "{0:c}", width: "60px" },
{ command: [{text: "qty", click: editRow}, {text: "remove", click: deleteRow}], title: " ", width: "165px" }
],
editable: "inline",
filterable: true,
sortable: true,
height: 320,
pageable: true,
scrollable: false,
columnMenu: true,
dataBound: function () {
$('td').each(function(){if($(this).text()=='0' || $(this).text()=='$0.00'){$(this).addClass('gridCellClass')}})
}
});
<div id="clientsDb">
<div id="gridViewDiv"></div>
</div>
<style scoped>
#clientsDb{
height: 100%;
width: 100%;
margin 0px auto 0;
padding: 0px 0px 0 0px;
}
</style>
var dataSource = new kendo.data.DataSource({
data: viewModel.itemsArray,
pageSize: 6
});
//gridview div for the main grid
$("#gridViewDiv").kendoGrid({
dataSource: dataSource,
mobile: "tablet",
//height: kendo.support.mobileOS.wp ? "24em" : 430,
resizable: false,
//toolbar: ["create"],
columns: [
{ field:"ItemDesc", title: "Item" },
{ field: "QtyOrdered", title:"Qty", width: "35px" },
{ field: "ItemPrice", title:"Price", format: "{0:c}", width: "60px" },
{ field: "PriceUOM", title:"Per", width: "35px" },
{ field: "OrderAmount", title:"Order Amt", format: "{0:c}", width: "60px" },
{ command: [{text: "qty", click: editRow}, {text: "remove", click: deleteRow}], title: " ", width: "165px" }
],
editable: "inline",
filterable: true,
sortable: true,
height: 320,
pageable: true,
scrollable: false,
columnMenu: true,
dataBound: function () {
$('td').each(function(){if($(this).text()=='0' || $(this).text()=='$0.00'){$(this).addClass('gridCellClass')}})
}
});