Below is the code I have written to use scrollRowIntoView. I am using the resizer as I purposely want the grid to be the length of the browser window. Eventually I will get the record I want to scroll from the URL, but for now I have just hard coded a number as an example although in the code you can see I have a getUrlVars function. It seems to be truncating rows from the grid instead of scrolling to the row as expected. You can just paste this code and into a html file and see the results. Any help really appreciated as I am novice with this stuff. Best, Dave
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Player Summary</title>
<link rel="stylesheet" type="text/css" href="http://6pac.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" type="text/css" href="http://6pac.github.io/SlickGrid/examples/examples.css">
<link rel="stylesheet" type="text/css" href="http://6pac.github.io/SlickGrid/css/smoothness/jquery-ui.css">
</head>
<style>
</style>
<body>
<div style="position:relative">
<div style="width:1100px;">
<div class="grid-header" style="width:100%">
<label>August 18th Summary</label>
</div>
<div class="container">
<div id="myGrid"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://6pac.github.io/SlickGrid/lib/jquery.event.drag-2.3.0.js"></script>
<script src="http://6pac.github.io/SlickGrid/slick.core.js"></script>
<script src="http://6pac.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://6pac.github.io/SlickGrid/slick.dataview.js"></script>
<script src="http://6pac.github.io/SlickGrid/plugins/slick.resizer.js"></script>
<script>
var columns = [
{ id: "table", name: "Table", field: "table", sortable: true, minWidth: 50 },
{ id: "player", name: "Player", field: "player", sortable: true, minWidth: 50 },
{ id: "hand", name: "Hand", field: "hand", sortable: true, minWidth: 42 },
];
var options = {
enableCellNavigation: true,
enableColumnReorder: true,
multiColumnSort: true,
//autoHeight: true,
};
var data = [];
for (var i = 0; i < 50; i++) {
data[i] = {
table: "Table1",
player: "AnyName",
hand: i
};
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
vars[key] = value;
});
return vars;
}
var scrolltoHand = getUrlVars()["hand"];
var grid;
var dataView;
var data = [];
for (var i = 0; i < 50; i++) {
data[i] = {
table: "Table1",
player: "AnyName",
hand: i
};
}
$(function () {
dataView = new Slick.Data.DataView()
//grid = new Slick.Grid("#myGrid", data, columns, options);
grid = new Slick.Grid("#myGrid", dataView, columns, options);
// wire up model events to drive the grid
//dataView.onRowCountChanged.subscribe(function (e, args) {
// grid.updateRowCount();
// grid.render();
//});
//dataView.onRowsChanged.subscribe(function (e, args) {
// grid.invalidateRows(args.rows);
// grid.render();
//});
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
dataView.setItems(data, "hand");
dataView.endUpdate();
grid.scrollRowIntoView(48);
// create the Resizer plugin
// you need to provide a DOM element container for the plugin to calculate available space
resizer = new Slick.Plugins.Resizer({
container: '.container', // DOM element selector, can be an ID or a class name
// optionally define some padding and dimensions
rightPadding: 5, // defaults to 0
bottomPadding: 10, // defaults to 20
minHeight: 150, // defaults to 180
minWidth: 250, // defaults to 300
},
);
grid.registerPlugin(resizer);
})
</script>
</body>
</html>
scrollRowIntoView requires a valid grid row index and it must be a number, if you try to scroll into an index that doesn't exist (outside the dataset length) it will probably not work either.
But I think what you're missing in your code is grid.init() which should be just before the dataView.beginUpdate();, you can see it in this Example
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.init(); // <<--this line
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();