x123<div id="grid_master" style="float:left;"></div>45<div style="float:left;width:4%;"> </div>67<div id="grid_child" style="float:left;"></div>89<div style="clear:both;"></div>10
42123$(function () {45//get common options for both grids.6function getOptions() {7var rows = 500,8cols = 100,9toLetter = pq.toLetter,10data = pq.generateData(rows, cols),11colModel = [];1213for (var i = 0; i < cols; i++) {14colModel[i] = { title: toLetter(i), width: 70 };15}1617return {18colModel: colModel,19dataModel: { data: data },20width: '48%-2',21selectionModel: { column: true }22}23}2425//create first grid.26var grid1 = pq.grid("#grid_master", $.extend( getOptions(), {27title: "Master grid ( scroll this grid )"28}));2930//create 2nd grid.31var grid2 = pq.grid("#grid_child", $.extend( getOptions(), {32title: "Child grid"33}));3435//listen to scroll event of 1st grid36grid1.on("scroll", function(){37//and scroll 2nd grid.38grid2.scrollXY(this.scrollX(), this.scrollY());39});4041});42