<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>SlickGrid example 11: No vertical scrolling (autoHeight)</title> <link rel="stylesheet" href="../slick.grid.css" type="text/css"/> <link rel="stylesheet" href="examples.css" type="text/css"/> <style> html, body { margin: 0; padding: 0; overflow: auto; } body { font: 11px Helvetica, Arial, sans-serif; } #container { margin: 10px; border: solid 1px gray; width: 480px; background: white; } #description { position: fixed; top: 30px; right: 30px; width: 25em; } </style> </head> <body> <div id="container"></div> <div id="description"> <h2>Demonstrates:</h2> <ul> <li>autoHeight:true grid option</li> </ul> <h2>View Source:</h2> <ul> <li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example11-autoheight.html" target="_sourcewindow"> View the source for this example on Github</a></li> </ul> </div> <script src="../lib/jquery-1.7.min.js"></script> <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> <script src="../lib/jquery.event.drag-2.2.js"></script> <script src="../slick.core.js"></script> <script src="../slick.grid.js"></script> <script> var grid, data = [], columns = [ { id: "title", name: "Title", field: "title" }, { id: "duration", name: "Duration", field: "duration" }, { id: "%", name: "% Complete", field: "percentComplete" }, { id: "start", name: "Start", field: "start" }, { id: "finish", name: "Finish", field: "finish" }, { id: "effort-driven", name: "Effort Driven", field: "effortDriven" } ], options = { editable: false, enableAddRow: false, enableCellNavigation: false, autoHeight: true }; for (var i = 100; i-- > 0;) { data[i] = { title: "Task " + i, duration: "5 days", percentComplete: Math.round(Math.random() * 100), start: "01/01/2009", finish: "01/05/2009", effortDriven: (i % 5 == 0) }; } grid = new Slick.Grid("#container", data, columns, options); </script> </body> </html>