summaryrefslogtreecommitdiffstats
path: root/examples/example11-autoheight.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/example11-autoheight.html')
-rw-r--r--examples/example11-autoheight.html131
1 files changed, 75 insertions, 56 deletions
diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html
index 885d60e..072bd60 100644
--- a/examples/example11-autoheight.html
+++ b/examples/example11-autoheight.html
@@ -1,65 +1,84 @@
<!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" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- <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>
- </div>
+<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;
+ }
- <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.0.min.js"></script>
+ body {
+ font: 11px Helvetica, Arial, sans-serif;
+ }
- <script src="../slick.core.js"></script>
- <script src="../slick.grid.js"></script>
+ #container {
+ margin: 10px;
+ border: solid 1px gray;
+ width: 480px;
+ background: white;
+ }
- <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
- };
+ #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>
+</div>
- 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)
- };
- }
+<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.0.min.js"></script>
- grid = new Slick.Grid("#container", data, columns, options);
- </script>
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
- </body>
+<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> \ No newline at end of file