datatable.html revision 28ab732ad7743763a94f34d018067c184e17de96
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra font-family: sans-serif;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra font-size: smaller;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra padding: 5px;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra font-size:120%;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra background: #FFFCB6;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra border:1px solid #C9C675;
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p><input type="button" value="Run Tests" id="btnRun" disabled=true></p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<h3>Scrolling XY Datatable (Set columnwidths)</h3>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<P>A general XY scrolling datatable. Column widths are provided for all columns, table width and height is provided.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A X-scrolling datatable. Column A and B have specified widths. The rest of the columns do not have any widths specified. Only a height of 200px is specified.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A Y-scrolling datatable. Column widths are provided for all columns, table height is provided. Since all cols have specified width, you may see this table overflowing past its container div (the blue div in the background). </p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A Y-scrolling datatable, where only the first 2 columns have a specified width. Only the table height is provided.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<p>A XY-scrolling datatable, where only the first 2 columns have a specified width. Table height and width is provided. The table headers are of larger width than the table contents</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra(function() {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra filter: "debug",
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra logInclude:{"TestRunner":true},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra useConsole: true
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra }).use("console", "test", "dump", "datatable", "profiler","node","json", function(Y) {
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra // Set up the page
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var ASSERT = Y.Assert,
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra ARRAYASSERT = Y.ArrayAssert,
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra BTNRUN = Y.get("#btnRun");
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra BTNRUN.set("disabled", false);
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.on("click", function(e){
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var myConsole = new Y.Console().render();
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //large data set
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var large = [];
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra large[i] = {a: i+1, b:i+2, c:i+3, d: i+4, e: i+5, f: i+6, g:i+7};
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var small = [{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra {a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0}];
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra nestedcols: [
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra cols: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width: '120px'},{key:"c", width:'75px'},{key:"d", width:'150px'},{key:"3", width:'75px'},{key:"f", width:'150px'},{key:"g", width:'75px'}],
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra cols2: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width:'75px'},{key:"c"},{key:"d"},{key:"e"},{key:"f"},{key:"g"}],
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra cols3: [{key:"a", field:"a", label:"Lorem Ipsum Dolor SIt Amet", sortable:true, className: ["oneClass", "anotherClass"], width:'5px'},{key:"b", abbr:"Lorem Ipsum Dolor SIt Amet", className:"myClass", width:'75px'},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"}],
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //---------------------------------------------
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //---------------------------------------------
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //this.rs = new Y.Recordset({records:this.initialData});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //---------------------------------------------
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //---------------------------------------------
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra //ignore following tests (good to do if you are doing a large dataset)
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, caption:"Base"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtBase') + 'ms taken to display';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption: "ScrollingDataTable"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {width:"200px", height:"300px", scroll:"xy"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtXY') + 'ms taken to display';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, caption:"ScrollingDataTable"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {width:"150px", scroll:"x"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtX') + 'ms taken to display';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {height:"300px", scroll:"y"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtY1') + 'ms taken to display';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", scroll:"y"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtY2') + 'ms taken to display';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", width:"400px", scroll:"xy"});
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var msg = Y.Profiler.getAverage('dtHeaders') + 'ms taken to display';
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra var suite = new Y.Test.Suite({name:"Datatable Test Suite"});