dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
879 lines (875 loc) • 27.5 kB
HTML
<html dir="ltr">
<head>
<title>Test all plugins of dojox.grid.EnhancedGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel=stylesheet href="support/common.css"/>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-right: 5em;
}
.title {
text-align:center;
margin:1em;
}
.supporter {
display: block;
border: 3px solid #ccc;
width: 100em;
padding: 1em 3em;
cursor: default;
radius: 8pt;
background: #fff;
-moz-border-radius: 8pt 8pt;
}
.selectReport {
display: inline-block;
}
.tutor h2{
font-weight: bolder;
}
.tutor td:first-child{
font-weight: bolder;
}
#gridContainer{
width: 100em;
height: 35em;
border: 1px solid #D5CDB5;
}
/*Sample - overwrite default cell style
.claro .dojoxGridCell{
border-color: transparent #D5CDB5 #D5CDB5 transparent !important;
}
.dj_ie6 .claro .dojoxGridCell{
border: 1px solid #F1F1F1 !important;
}*/
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit._WidgetsInTemplateMixin");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.DateTextBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.Filter");
dojo.require("dojox.grid.enhanced.plugins.exporter.CSVWriter");
dojo.require("dojox.grid.enhanced.plugins.Printer");
dojo.require("dojox.grid.enhanced.plugins.Cookie");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.Selector");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojox.grid.enhanced.plugins.DnD");
dojo.require("dojox.grid.enhanced.plugins.Search");
dojo.require("dojox.grid.enhanced.plugins.CellMerge");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojox.grid.enhanced.plugins.GridSource");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.parser");
var startGridIndex = 0,
initialShowGrid = false,
hideCtrlPanel = false,
repeatCount = 100000,
repeatInterval = 500;
gridAttrs = {
rowsPerPage: 5,
keepSelection: true,
//sortFields: [{attribute: "Genre"}],
plugins: {
}
};
</script>
<script type="text/javascript" src="support/test_write_store_music.js"></script>
<script type="text/javascript" src="support/test_layout_music.js"></script>
<script type="text/javascript" src="support/test_repeat.js"></script>
<script type="text/javascript">
var plugins = {
"nestedSorting": {},
"indirectSelection": {
headerSelector: true
},
"menus": {
headerMenu: "headerMenu",
rowMenu: "rowMenu",
cellMenu: "cellMenu",
selectedRegionMenu: "selectedRegionMenu"
},
"exporter": {},
"printer": {},
"filter": {
closeFilterbarButton: true,
ruleCount: 0
},
"cookie": {},
"selector": {},
"dnd": {
copyOnly: true
},
"cellMerge": {
"mergedCells": [
{row: "3", start: 1, end: 10, major: 3}
]
},
"search": {},
"pagination":
{
pageSizes: ["5", "10", "20", "50", "All"], // Array, custom the items per page button
// itemTitle: "entrys", // String, custom the item' title of description
description: true, // boolean, custom weather or not the discription will be displayed
sizeSwitch: true, // boolean, custom weather or not the page size switch will be displayed
pageStepper: true, // boolean, custom weather or not the page step will be displayed
gotoButton: true,
maxPageStep: 10, // Integer, custom how many page step will be displayed
position: "bottom" // String, custom the position of the paginator bar
// there're three options: top, bottom, both
// ,descTemplate: "${1} ${0}" // A template of the current position description.
}
};
var gridFeatures = {
"canSort": {
label: "disable canSort",
value: function(colIndex){
return false;
}
},
"rowSelector": {
value: "20px"
},
"autoHeight": {
value: true
},
"autoWidth": {
value: true
},
"singleClickEdit": {
value: true
},
"selectionMode": {
label: "single selectionMode",
value: "single"
},
"columnReordering": {
value: true
}
};
function getTableString(){
var sb = ["<table><tbody>"];
for(var featureName in gridFeatures){
sb.push("<tr>");
sb.push("<td><input id='cbid", featureName,
"' dojoType='dijit.form.CheckBox' dojoAttachPoint='cb", featureName,
"'><label id='lbl", featureName, "' for='cbid", featureName, "'>",
gridFeatures[featureName].label || featureName, "</label></input></td>"
);
sb.push("</tr>");
}
sb.push("<tr><td><hr/></td></tr>",
"<tr><td><button onclick='selectAll()'>Select All</button>",
"<button onclick='deselectAll()'>Deselect All</button></td></tr>"
);
for(var pluginName in plugins){
sb.push("<tr>");
sb.push("<td><input id='cbid", pluginName,
"' dojoType='dijit.form.CheckBox' dojoAttachPoint='cb", pluginName,
"'><label id='lbl", pluginName, "' for='cbid", pluginName, "'>",
pluginName, "</label></input></td>"
);
sb.push("</tr>");
}
sb.push("</tbody></table>");
return sb.join('');
}
dojo.declare("PluginTable", [dijit._Widget, dijit._TemplatedMixin, dijit._WidgetsInTemplateMixin], {
templateString: getTableString(),
widgetsInTemplate: true,
_onChangePlugin: function(pluginName, cb, e){
var checked = cb.get("checked");
gridAttrs.plugins[pluginName] = checked ? plugins[pluginName] : false;
var nd = dojo.byId(pluginName + "Support");
if(nd){
dojo.style(nd, "display", checked ? "" : "none");
}
},
_onChangeFeature: function(featureName, cb, e){
var checked = cb.get("checked");
if(checked){
gridAttrs[featureName] = gridFeatures[featureName].value;
}else{
delete gridAttrs[featureName];
}
},
postCreate: function(){
var cb;
for(var featureName in gridFeatures){
cb = this["cb" + featureName];
this.connect(cb, "onChange", dojo.hitch(this, "_onChangeFeature", featureName, cb));
}
for(var pluginName in plugins){
cb = this["cb" + pluginName];
this.connect(cb, "onChange", dojo.hitch(this, "_onChangePlugin", pluginName, cb));
}
}
});
function selectAll(){
for(var pluginName in plugins){
dijit.byId("cbid" + pluginName).set("checked", true);
}
}
function deselectAll(){
for(var pluginName in plugins){
dijit.byId("cbid" + pluginName).set("checked", false);
}
}
function exportCSV(){
var g = dijit.byId("grid");
g && g.exportGrid("csv", {
writerArgs: {
separator: dojo.byId('sep').value
}
}, function(str){
dojo.byId("csvResults").value = str;
});
}
function exportSelected(){
var g = dijit.byId("grid");
if(g){
dojo.byId("csvResults").value = g.exportSelected("csv", {
separator: dojo.byId('sep').value
});
}
}
function printGrid(){
var g = dijit.byId("grid");
if(g){
// g.setExportFormatter(function(data, cell, rowIndex, rowItem){
// if(cell.field === "Year"){
// return parseInt(data, 10) * 2;
// }else{
// return data;
// }
// });
g.printGrid({
title: dojo.byId('print_title').value,
cssFiles: ["support/print_style1.css","support/print_style2.css"]
});
}
}
function printSelected(){
var g = dijit.byId("grid");
g && g.printSelected({
title: dojo.byId('print_title').value,
cssFiles: ["support/print_style1.css", "support/print_style2.css"]
});
}
function printPreview(){
var g = dijit.byId("grid");
g && g.exportToHTML({
title: dojo.byId('print_title').value,
cssFiles: ["support/print_style1.css", "support/print_style2.css"]
}, function(str){
var win = window.open();
win.document.open();
win.document.write(str);
g.normalizePrintedGrid(win.document);
win.document.close();
});
}
function mergeCells(){
var rowIndex = parseInt(dojo.byId("inputRow").value, 10) - 1;
var start = parseInt(dojo.byId("inputStart").value, 10);
var end = parseInt(dojo.byId("inputEnd").value, 10);
var major = parseInt(dojo.byId("inputMajor").value, 10);
var grid = dijit.byId("grid");
grid.mergeCells(rowIndex, start, end, major);
}
function getInput(str){
var start = str.indexOf('/');
var end = str.lastIndexOf('/');
if(start == 0 || end > 1){
var regstr = str.substring(start + 1, end);
var modifiers = str.substring(end + 1, str.length);
str = new RegExp(regstr,modifiers);
}
console.log("input:", str);
return str;
}
function onSearched(resultId, rowIdx){
console.log("search result:", rowIdx);
if(rowIdx < 0){
dojo.byId(resultId).innerHTML = "Not Found!";
}else{
dojo.byId(resultId).innerHTML = "Search result is Row " + (rowIdx + 1);
dijit.byId("grid").scrollToRow(rowIdx, true);
}
}
function onSearch(){
var g = dijit.byId("grid");
if(g){
var args = {};
dojo.query(".searchInput").forEach(function(input){
var v = dojo.trim(input.value);
if(v){
args[input.name] = getInput(v);
}
});
console.log("search arguments:", args);
g.searchRow(args, dojo.partial(onSearched, "result2"));
}
}
function onSearchAll(input){
var g = dijit.byId("grid");
g && g.searchRow(getInput(input), dojo.partial(onSearched, "result1"));
}
function enableCookie(key, toEnable){
console.log(key,toEnable);
try{
var g = dijit.byId("grid");
if(g){
if(key){
g.setCookieEnabled(key, toEnable);
}else{
g.setCookieEnabled(toEnable);
}
}
}catch(e){
console.log(e);
}
}
function setupSelectorTest(){
var grid = dijit.byId("grid"),
func = function(type, start, end, selected){
fill("col", selected["col"]);
fill("row", selected["row"]);
fill("cell", selected["cell"]);
},
fill = function(type, selected){
var getString;
var cells = grid.layout.cells;
switch(type){
case "col":
getString = function(item){
return "Column " + item.col + ": " + dojo.toJson(item.except);
}
break;
case "row":
getString = function(item){
return "Row " + item.row + ": " + dojo.toJson(item.except);
}
break;
case "cell":
getString = function(item){
return "Cell " + item.row + " , " + item.col;
}
}
dojo.attr(dojo.byId(type + "s"), "value", dojo.map(selected, function(item){
return getString(item);
}).join('\n'));
dojo.attr(dojo.byId(type + "Cnt"), "value", selected.length);
};
grid.connect(grid, "onEndSelect", func);
grid.connect(grid, "onEndDeselect", func);
}
dojo.declare("TestWidget", [dijit._Widget,dijit._TemplatedMixin], {
templateString: dojo.cache("dojox.grid", "enhanced/templates/ClearFilterConfirmPane.html"),
widgetsInTemplate: true,
_clearBtnLabel: "clearButton",
_cancelBtnLabel: "cancelButton",
_clearFilterMsg: "clearFilterMsg",
_onCancel: function(){},
_onClear: function(){}
});
var rpCnt = 0;
var dlg;
function testDialog(){
if(dlg){
dlg.destroyRecursive();
dlg = null;
}
dlg = new dijit.Dialog({
title: "title",
content: new TestWidget({})
});
dojo.byId("repeatcounter").innerHTML = ++rpCnt;
setTimeout(testDialog, 100);
}
function testStore(){
var store = test_store[0];
if(store.unwrap){
store.unwrap("sort").unwrap("unique").unwrap("filter");
}
var ns = dojox.grid.enhanced.plugins;
ns.wrap(ns.wrap(ns.wrap(store,
new ns.filter.ClientSideFilterLayer()),
new ns.filter.UniqueLayer()),
new ns.filter.SortLayer());
dojo.byId("repeatcounter").innerHTML = ++rpCnt;
setTimeout(testStore, 100);
}
var hdl;
function testConnect(){
if(hdl){
dojo.disconnect(hdl);
}
hdl = dojo.connect(undefined, "aaaaaa", window, function(){});
dojo.byId("repeatcounter").innerHTML = ++rpCnt;
setTimeout(testConnect, 100);
}
function scrollToRow(){
var g = dijit.byId("grid");
if(g){
var idx = parseInt(dojo.byId("inputScrollToRowIdx").value, 10);
console.log("scroll to ", idx);
g.scrollToRow(idx);
}
}
dojo.addOnLoad(function(){
var btns = dojo.byId("ctrlBtns2");
btns.appendChild(dojo.create("button",{
"innerHTML": "Refresh",
"onclick": function(){
var g = dijit.byId("grid");
g && g._refresh();
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Delete Selected",
"onclick": function(){
var g = dijit.byId("grid");
g && g.removeSelectedRows();
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Set Store",
"onclick": function(){
var g = dijit.byId("grid");
var data = dojo.clone(test_store_data[0]);
data.items = data.items.slice(0, 50);
console.log(data);
g && g.setStore(new dojo.data.ItemFileWriteStore({
data: data
}));
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Set Structure",
"onclick": function(){
var g = dijit.byId("grid");
g && g.set("structure", layout[5]);
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Add Row",
"onclick": function(){
var g = dijit.byId("grid");
g && g.addRow();
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Get Selected",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
var s1 = g.selection.selected,
s2 = g.selection.getSelected();
console.log(s1.length, s1);
console.log(s2.length, s2);
}
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "resize",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
var cc = dojo.byId("gridContainer");
dojo.style(cc, "height", (dojo.contentBox(cc).h + 10) + "px");
dojo.style(cc, "width", (dojo.contentBox(cc).w - 10) + "px");
g.resize(dojo.contentBox(cc));
}
}
}));
var newID = 101;
btns.appendChild(dojo.create("button",{
"innerHTML": "Add Item",
"onclick": function(){
var g = dijit.byId("grid");
g && g.store.newItem({
"id": newID++,
"Heard": true,
"Checked": "True",
"Genre":"Easy Listening",
"Artist":"Bette Midler",
"Year":2003,
"Album":"Bette Midler Sings the Rosemary Clooney Songbook",
"Name":"Hey There", "Length":"03:31",
"Track":4,
"Composer":"Ross, Jerry 1926-1956 -w Adler, Richard 1921-",
"Download Date":"1923/4/9",
"Last Played":"04:32:49"
});
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "New item and scroll to",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
var item = g.store.newItem({
"id": newID++,
"Heard": true,
"Checked": "True",
"Genre":"Easy Listening",
"Artist":"Bette Midler",
"Year":2003,
"Album":"Bette Midler Sings the Rosemary Clooney Songbook",
"Name":"Hey There", "Length":"03:31",
"Track":4,
"Composer":"Ross, Jerry 1926-1956 -w Adler, Richard 1921-",
"Download Date":"1923/4/9",
"Last Played":"04:32:49"
});
var rowCount = g.plugin('pagination') ? g.getTotalRowCount() : g.rowCount;
setTimeout(function(){g.scrollToRow(rowCount - 1);}, 600);
}
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Select All",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
var t1 = (new Date()).getTime();
g.selection.selectRange(0, g.rowCount - 1);
console.log((new Date()).getTime() - t1);
}
}
}));
var toDisable = true;
btns.appendChild(dojo.create("button",{
"innerHTML": "Disable 4th row selector",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
var cell = g.layout.cells[0];
if(cell.setDisabled){
cell.setDisabled(3, toDisable);
toDisable = !toDisable;
}
}
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "Select Unloaded",
"onclick": function(){
var g = dijit.byId("grid");
console.log(g);
if(g){
g.selection.selectRange(60, 100);
}
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "clear sort",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
g.setSortIndex([]);
}
}
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "show filter bar",
"onclick": function(){
var g = dijit.byId("grid");
if(g){
g.showFilterBar(true, true);
}
}
}));
/*btns.appendChild(dojo.create("button",{
"innerHTML": "dialog",
"onclick": testDialog
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "store",
"onclick": testStore
}));
btns.appendChild(dojo.create("button",{
"innerHTML": "connect",
"onclick": testConnect
}));*/
dojo.subscribe("test_repeat_grid_created", function(){
setupSelectorTest();
var g = dijit.byId("grid");
g && g.setCookieEnabled && g.setCookieEnabled(false);
dojo.byId("enableGridCookieCB").checked = true;
dojo.byId("enableGridCWidthCookieCB").checked = false;
dojo.byId("enableGridSortCookieCB").checked = false;
dojo.byId("enableGridNSortCookieCB").checked = false;
dojo.byId("enableGridCOrderCookieCB").checked = false;
/*if(g.setFilter){
g.setFilter([{
type: "string",
column: 2,
value: "Buddy",
condition: "contains"
},{
type: "string",
column: 2,
value: "King",
condition: "contains"
}], "logicany");
}*/
});
var formTarget = new dojox.grid.enhanced.plugins.GridSource(dojo.byId("songForm"),{
isSource: false
});
dojo.connect(formTarget, "onDropGridRows", function(grid, rowIndexes){
try{
var s = grid.store, row = rowIndexes[0], item = grid.getItem(row);
console.log("item:", item);
dojo.attr(dojo.byId("inputName"), "value", s.getValue(item, "Name"));
dojo.attr(dojo.byId("inputAuthor"), "value", s.getValue(item, "Artist"));
dojo.attr(dojo.byId("inputAlbum"), "value", s.getValue(item, "Album"));
}catch(e){
console.log("-----",e);
}
});
});
</script>
</head>
<body class="claro">
<h1 class="title">dojox.grid.EnhancedGrid - plugins</h1>
<div id="ctrlBtns"></div><br/>
<div id="pluginList" dojoType="PluginTable" style="float:right;"></div>
<div id="gridContainer"></div><br/>
<div id="ctrlBtns2"></div><br/>
<div id="menusSupport" style="display: none;">
<div dojoType="dijit.Menu" id="headerMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Header Menu Item 1</div>
<div dojoType="dijit.MenuItem">Header Menu Item 2</div>
<div dojoType="dijit.MenuItem">Header Menu Item 3</div>
<div dojoType="dijit.MenuItem">Header Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Row Menu Item 1</div>
<div dojoType="dijit.MenuItem">Row Menu Item 2</div>
<div dojoType="dijit.MenuItem">Row Menu Item 3</div>
<div dojoType="dijit.MenuItem">Row Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="cellMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Cell Menu Item 1</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 2</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 3</div>
<div dojoType="dijit.MenuItem">Cell Menu Item 4</div>
</div>
<div dojoType="dijit.Menu" id="selectedRegionMenu" style="display: none;">
<div dojoType="dijit.MenuItem">Action 1 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 2 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 3 for Selected Region</div>
<div dojoType="dijit.MenuItem">Action 4 for Selected Region</div>
</div>
</div>
<div id="exporterSupport" class="supporter" style="display: none;">
<input type='button' value='Export All to CSV' onclick='exportCSV()' />
<input type='button' value='Export Selected to CSV' onclick='exportSelected()' />
Separator is:<input id='sep' type='text' value=',' />
Results:<br />
<textarea rows="10" cols="100" id="csvResults"></textarea>
</div>
<div id="printerSupport" class="supporter" style="display: none;">
<input type='button' value='Print All' onclick='printGrid()' />
<input type='button' value='Print Selected' onclick='printSelected()' />
<input type='button' value='Print Preview' onclick='printPreview()' />
Use Title:<input id='print_title' type='text' value='Favorite Music' />
</div>
<div id="cellMergeSupport" class="supporter" style="display: none;">
<table>
<tr>
<td>At Row</td>
<td><input id="inputRow" type="text" value="3"/></td>
</tr>
<tr>
<td>From Column</td>
<td><input id="inputStart" type="text" value="1"/></td>
</tr>
<tr>
<td>To Column</td>
<td><input id="inputEnd" type="text" value="3"/></td>
</tr>
<tr>
<td>Use Value of Column</td>
<td><input id="inputMajor" type="text" value="2"/></td>
</tr>
<tr>
<td><button onclick="mergeCells()">Merge Cells</button></td>
</tr>
</table>
</div>
<div id="searchSupport" class="supporter" style="display: none;">
Search all: Use "/.../" for Regular Expressions. Wildcards (* and ?) are available when not using "/.../".
<hr />
<div>Search all columns for<input id="allcolumnsInput" type="text" size="30" value="/void/i" />
<button onclick="onSearchAll(dojo.byId('allcolumnsInput').value)">Go =></button>
<span id="result1"></span>
</div>
<hr />
Search with a query object (extends the functionality of the standard store query).
<table>
<thead>
<tr>
<th>Column</th>
<th>Query String or Regular Expression</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td><input name="id" class="searchInput" type="text" size="30" /></td>
<td rowspan="11" align="center" valign="center" style="padding-left: 50px;">
<button onclick="onSearch()">Search =></button>
<span id="result2"></span>
</td>
</tr>
<tr>
<td>Genre</td>
<td><input name="Genre" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Artist</td>
<td><input name="Artist" class="searchInput" type="text" size="30" value="/an/i" /></td>
</tr>
<tr>
<td>Year</td>
<td><input name="Year" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Album</td>
<td><input name="Album" class="searchInput" type="text" size="30" value="/t.*t/i" /></td>
</tr>
<tr>
<td>Name</td>
<td><input name="Name" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Length</td>
<td><input name="Length" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Track</td>
<td><input name="Track" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Composer</td>
<td><input name="Composer" class="searchInput" type="text" size="30" value="*ss*" /></td>
</tr>
<tr>
<td>Download Date</td>
<td><input name="Download Date" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Last Played</td>
<td><input name="Last Played" class="searchInput" type="text" size="30" /></td>
</tr>
</tbody>
</table>
</div>
<div id="cookieSupport" class="supporter" style="display: none;">
<p>
When destroying the grid...
</p>
<input id='enableGridCookieCB' type="checkbox" onchange="enableCookie(null, !this.checked)" />Do not persist anything<br />
<input id='enableGridCWidthCookieCB' type="checkbox" onchange="enableCookie('cellWidths',!this.checked)" />Do not persist column width<br />
<input id='enableGridSortCookieCB' type="checkbox" onchange="enableCookie('sortProps',!this.checked)" />Do not persist single sorting order<br />
<input id='enableGridNSortCookieCB' type="checkbox" onchange="enableCookie('nestedSortProps',!this.checked)" />Do not persist nested sorting order<br />
<input id='enableGridCOrderCookieCB' type="checkbox" onchange="enableCookie('columnOrder',!this.checked)" />Do not persist column arrangement<br />
</div>
<div id="selectorSupport" class="supporter" style="display: none;">
<div class="selectReport">
<h2>Selected Cells:
Count: <input type="text" id="cellCnt" value="0"/>
</h2>
<textarea id="cells" rows="10" cols="40"></textarea>
</div>
<div class="selectReport">
<h2>Selected Columns:
Count: <input type="text" id="colCnt" value="0"/>
</h2>
<textarea id="cols" rows="10" cols="40"></textarea>
</div>
<div class="selectReport">
<h2>Selected Rows:
Count: <input type="text" id="rowCnt" value="0"/>
</h2>
<textarea id="rows" rows="10" cols="40"></textarea>
</div>
</div>
<div id="dndSupport" class="supporter" style="display:none; width: 40em;">
<form id="songForm">
<table>
<tr>
<td><label for="inputName">Song name</label></td>
<td><input id="inputName" type="text" /></td>
</tr>
<tr>
<td><label for="inputAuthor">Artist</label></td>
<td><input id="inputAuthor" type="text" /></td>
</tr>
<tr>
<td><label for="inputAlbum">Album</label></td>
<td><input id="inputAlbum" type="text" /></td>
</tr>
</table>
</form>
</div>
<div id="paginationSupport" class="supporter" style="display:none;">
<table>
<tr>
<td><input id="inputScrollToRowIdx" type="text" /></td>
<td><button onclick="scrollToRow()">Scroll to row</button></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="tutor">
<p>
<h2>How to use this page:</h2>
<ol>
<li>Select plugins/options at right side.</li>
<li>Press "Create" button.</li>
</ol>
</p>
<p>
<h2>Meaning of buttons:</h2>
<table>
<tr><td>Create</td><td>Create a grid using current plugins/options.</td></tr>
<tr><td>Destroy</td><td>Destroy the current grid.</td></tr>
<tr><td>Prev</td><td>Create a grid with previous layout</td></tr>
<tr><td>Next</td><td>Create a grid with next layout</td></tr>
<tr><td>Start</td><td>Keep creating and destorying grid (to test memory leak)</td></tr>
<tr><td>End</td><td>Stop the process that "Start" begins.</td></tr>
<tr><td>Select All</td><td>Select all plugins</td></tr>
<tr><td>Deselect All</td><td>Deselect all plugins</td></tr>
<tr><td>Refresh</td><td>Refresh the grid.</td></tr>
</table>
</p>
</div>
<div id="repeatcounter" style="float: left;"></div>
</body>
</html>