Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

rename table to grid

  • Loading branch information...
commit 5539fa3ffa6bd9b779d87f216a7663e250cf2ab8 1 parent a62d481
@kriszyp authored
View
16 CheckBox.js
@@ -4,20 +4,20 @@ return function(column){
// summary:
// Add a checkbox column
column.renderCell = function(data, cell){
- var table = column.table;
- if(!table._hasCheckBoxListener){
- table._hasCheckBoxListener = true;
- table.on(".dojoxGridxCheckBox:change", function(event){
+ var grid = column.grid;
+ if(!grid._hasCheckBoxListener){
+ grid._hasCheckBoxListener = true;
+ grid.on(".dojoxGridxCheckBox:change", function(event){
var checked = this.checked;
- var id = table.row(event).id;
+ var id = grid.row(event).id;
if(column.field){
- dojo.when(table.store.get(id), function(object){
+ dojo.when(grid.store.get(id), function(object){
object[column.field] = checked;
- table.store.put(object);
+ grid.store.put(object);
});
}
if(column.selector){
- table.selection.set(id, checked);
+ grid.selection.set(id, checked);
}
});
}
View
8 ColumnSet.js
@@ -1,12 +1,12 @@
-define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/query", "./Table","cssx/css!./css/columnset.css"],
- function(dojo, declare, listen, query, Table, cssx){
+define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/query", "./Grid","cssx/css!./css/columnset.css"],
+ function(dojo, declare, listen, query, Grid, cssx){
// summary:
// This module provides column sets to isolate horizontal scroll of sets of
// columns from each other. This mainly serves the purpose of allowing for
// column locking.
var create = dojo.create;
- return declare([Table], {
+ return declare([Grid], {
columns: [],
createRowCells: function(tag, each){
var row = create("table", {
@@ -36,7 +36,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/query", ".
},
renderHeader: function(){
// summary:
- // Setup the headers for the table
+ // Setup the headers for the grid
this.inherited(arguments);
var columnSets = this.columnSets;
this.bodyNode.style.bottom = "17px";
View
8 Table.js → Grid.js
@@ -5,7 +5,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "./TextEdit", ".
columns: [],
createRowCells: function(tag, each){
// summary:
- // Generates the table for each row (used by renderHeader and and renderRow)
+ // Generates the grid for each row (used by renderHeader and and renderRow)
var tr, row = create("table", {
});
if(dojo.isIE < 8 || dojo.isQuirks){
@@ -77,11 +77,11 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "./TextEdit", ".
},
renderHeader: function(){
// summary:
- // Setup the headers for the table
+ // Setup the headers for the grid
var grid = this;
var row = this.createRowCells("th", function(th, column){
th.setAttribute("role", "columnheader");
- column.table = grid;
+ column.grid = grid;
var field = column.field = column.field;
if(column.editable){
column = TextEdit(column);
@@ -110,7 +110,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "./TextEdit", ".
if(this.getAttribute("sortable")){
var field = this.getAttribute("field");
// resort
- var descending = table.sortOrder && table.sortOrder[0].attribute == field && !table.sortOrder[0].descending;
+ var descending = grid.sortOrder && grid.sortOrder[0].attribute == field && !grid.sortOrder[0].descending;
if(lastSortedArrow){
dojo.destroy(lastSortedArrow);
}
View
2  Keyboard.js
@@ -1,7 +1,7 @@
define(["dojo/_base/declare", "dojo/listen", "dojo/query"], function(declare, listen, query){
return declare([], {
// summary:
- // Add keyboard navigation capability to a table
+ // Add keyboard navigation capability to a grid
postCreate: function(){
this.inherited(arguments);
this.on(".dojoxGridxRow:keydown", function(event){
View
6 List.js
@@ -117,7 +117,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/aspect", "
},
refreshContent: function(){
// summary:
- // refreshes the contents of the table
+ // refreshes the contents of the grid
if(this.contentNode){
// remove the content so it can be recreated
this.contentNode.innerHTML = "";
@@ -141,7 +141,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/aspect", "
},
renderCollection: function(results, beforeNode, options){
// summary:
- // This renders an array or collection of objects as rows in the table, before the
+ // This renders an array or collection of objects as rows in the grid, before the
// given node. This will listen for changes in the collection if an observe method
// is available (as it should be if it comes from an Observable data store).
options = options || {};
@@ -184,7 +184,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/aspect", "
},
createRow: function(object, beforeNode, i, options){
// summary:
- // Renders a single row in the table
+ // Renders a single row in the grid
var row = this.renderRow(object, options);
row.className = (row.className || "") + " ui-state-default dojoxGridxRow " + (i% 2 == 1 ? "dojoxGridxRowOdd" : "dojoxGridxRowEven");
// get the row id for easy retrieval
View
3  OnDemandGrid.js
@@ -0,0 +1,3 @@
+define(["dojo/_base/declare", "./Grid", "./OnDemandList"], function(declare, Grid, OnDemandList){
+ return declare([Grid, OnDemandList], {});
+});
View
2  OnDemandList.js
@@ -19,7 +19,7 @@ return declare([List], {
preloadNode = preloadNode || this.createNode("div", {
className: "preload"
}, this.contentNode);
- // this preload node is used to represent the area of the table that hasn't been
+ // this preload node is used to represent the area of the grid that hasn't been
// downloaded yet
preloadNode.preload = true;
preloadNode.query = query;
View
3  OnDemandTable.js
@@ -1,3 +0,0 @@
-define(["dojo/_base/declare", "./Table", "./OnDemandList"], function(declare, Table, OnDemandList){
- return declare([Table, OnDemandList], {});
-});
View
76 README.md
@@ -1,5 +1,5 @@
This project provides widgets for lists of data, including simple sets of scrolling rows,
-tables of data, on-demand lazy-loaded data, and various plugins for additional functionality.
+grids of data, on-demand lazy-loaded data, and various plugins for additional functionality.
This project also provides touch scrolling
for mobile devices with native style momentum, bouncing, and scrollbars. The
components are broken down into the following top level widget modules:
@@ -17,15 +17,15 @@ define(["d-list/List"], function(List){
...
</pre>
-<h2>Table</h2>
+<h2>Grid</h2>
This extends List to provide tabular display of data in columns. The component will
provide a header for each column that corresponds to columns within the scrollable
-grid of data. The columns of the table are defined by using columns property. The columns
+grid of data. The columns of the grid are defined by using columns property. The columns
property should have an array of each column definition objects. The column definition object
may have the following properties (all our optional):
-* field - This is the property from the object in the list to display in the body of the table.
-* name - This is the label to show in the header of the table.
+* field - This is the property from the object in the list to display in the body of the grid.
+* name - This is the label to show in the header of the grid.
* sortable - This indicates whether or not you can sort on this column/field.
* editable - This indicates whether or not to allow editing of the value (defaults to using the TextEdit plugin)
* get - This can be a function that will retrieve the value to display from the object in the list.
@@ -34,8 +34,8 @@ may have the following properties (all our optional):
* className - A DOM/CSS class to assign to the cells in the column.
The d-list components are designed to be highly CSS driven for optimal performance and organization, so visual styling should be controlled
-through CSS. The table creates classes based fields (or if you provided a className property) with
-the convention of "field-<field-name>". For example, you could define a table and CSS like:
+through CSS. The grid creates classes based fields (or if you provided a className property) with
+the convention of "field-<field-name>". For example, you could define a grid and CSS like:
<pre>
&lt;style>
.field-age {
@@ -46,17 +46,17 @@ the convention of "field-<field-name>". For example, you could define a table an
}
&lt;/style>
&lt;script>
-define(["d-list/Table"], function(Table){
- table = new Table({
+define(["d-list/Grid"], function(Grid){
+ grid = new Grid({
columns: [ // define the columns
{name: 'Age', field: 'age'},
{name: 'Name', field: 'name'},
...
]});
- table.renderCollection(someData);
+ grid.renderCollection(someData);
&lt;/script>
</pre>
-The Table class also provides a styleColumn(colId, css) method to programmatically
+The Grid class also provides a styleColumn(colId, css) method to programmatically
style a column.
<h2>OnDemandList</h2>
@@ -66,7 +66,7 @@ This provides a seamless, intuitive interface for viewing large sets of data in
This also provides sorting delegation to the store. The OnDemandList requires a store
property, and will call the query() method on the store to retrieve the data to be rendered.
OnDemandList will can query() with start and count properties so as to only retrieve
-the necessary objects needed to render the visible rows. As the table is scrolled, more
+the necessary objects needed to render the visible rows. As the grid is scrolled, more
query() calls will be made to retrieve additional rows. This class provides the following
properties/methods:
@@ -75,20 +75,20 @@ properties/methods:
performs this by calling store.query() with the sort attribute with the provided parameters.
* sortOrder - This holds the current sort order.
-<h2>OnDemandTable</h2>
-The composition of Table and OnDemandList. It is nothing more than Table.extend(OnDemandList).
+<h2>OnDemandGrid</h2>
+The composition of Grid and OnDemandList. It is nothing more than Grid.extend(OnDemandList).
For example:
<pre>
-define(["d-list/OnDemandTable"], function(Table){
+define(["d-list/OnDemandGrid"], function(Grid){
// attach to a DOM id
- table = new Table({
+ grid = new Grid({
store: myStore, // a Dojo object store
columns: [ // define the columns
{name: 'Column 1', field: 'col1', editable: true, sortable: true},
{name: 'Column 2', field: 'col2'},
...
]
- }, "table"); ...
+ }, "grid"); ...
</pre>
<h3>More List API</h3>
@@ -107,47 +107,47 @@ object has the following properties:
* renderRow(value, options) - This can be overriden to provide a custom rendering of each row
<h1>Plugins</h1>
-The following modules can be used as plugins to add extra functionality to a Table. To use
+The following modules can be used as plugins to add extra functionality to a Grid. To use
these, simply add the module as a mixin. For example, to create a grid based on
-OnDemandTable with the selection and keyboard handling plugins, we could do:
+OnDemandGrid with the selection and keyboard handling plugins, we could do:
<pre>
-define(["dojo", "d-list/OnDemandTable", "d-list/Selection", "d-list/Keyboard"], function(dojo, Table, Selection, Keyboard){
- // create a table based on plugins
- MyTable = dojo.declare([Table, Selection, Keyboard]);
+define(["dojo", "d-list/OnDemandGrid", "d-list/Selection", "d-list/Keyboard"], function(dojo, Grid, Selection, Keyboard){
+ // create a grid based on plugins
+ MyGrid = dojo.declare([Grid, Selection, Keyboard]);
// instantiate it
- table = new MyTable({
+ grid = new MyGrid({
store: myStore,
...
- }, "table");
+ }, "grid");
</pre>
You can also do inline mixin and instantiation:
<pre>
- table = dojo.declare([Table, Selection, Keyboard])({
+ grid = dojo.declare([Grid, Selection, Keyboard])({
store: myStore,
...
- }, "table");
+ }, "grid");
</pre>
Below are the plugins that are available:
<h2>Selection</h2>
-Adds selection capability to a List/Table. The list instance will include a selection property
+Adds selection capability to a List/Grid. The list instance will include a selection property
with an a Stateful (instance of dojo.Stateful) that represents the selected items. This
plugin will also cause "select" and "deselect" events to be fired. For example:
<pre>
-table = dojo.declare([Table, Selection])({
+grid = dojo.declare([Grid, Selection])({
selectionMode: "single",
...});
-table.on("select", function(event){
+grid.on("select", function(event){
// get the row that was just selected
- var row = table.row(event);
- for(var id in table.selection){
- if(table.selection[id] === true){
+ var row = grid.row(event);
+ for(var id in grid.selection){
+ if(grid.selection[id] === true){
// iterate through all selected items
}
}
});
-table.on("deselect", function(event){
- var row = table.row(event);
+grid.on("deselect", function(event){
+ var row = grid.row(event);
// row was just deselected
});
</pre>
@@ -175,8 +175,8 @@ used by creating an instance and using it was a column in the columns. For examp
create a columns where the first column has a tree expander and the second column has
a checkbox, we could do:
<pre>
-define(["d-list/OnDemandTable", "d-list/Tree", "d-list/CheckBox"], function(Table, Tree, CheckBox){
- table = new Table({
+define(["d-list/OnDemandGrid", "d-list/Tree", "d-list/CheckBox"], function(Grid, Tree, CheckBox){
+ grid = new Grid({
store: myHierarchicalStore, // a Dojo object store
columns: [ // define the columns
// first column will have a tree expander:
@@ -187,7 +187,7 @@ define(["d-list/OnDemandTable", "d-list/Tree", "d-list/CheckBox"], function(Tabl
{name:'Type', field:'type'},
...
]
- }, "table"); ...
+ }, "grid"); ...
</pre>
<h2>Tree</h2>
@@ -220,6 +220,6 @@ also use one of the the included skins/themes. There is a tundra.css and claro.c
files in the css directory that can be used to included to skin the d-list to a particular
look and feel.
-<h2>Table Structure for custom CSS Styling</h2>
+<h2>Grid Structure for custom CSS Styling</h2>
TODO: Document the classes and structure. For now, looking at this in your debugger
should get you by.
View
28 Selection.js
@@ -1,12 +1,12 @@
define(["dojo/_base/declare", "dojo/Stateful", "dojo/listen"], function(declare, Stateful, listen){
return declare([], {
// summary:
- // Add selection capabilities to a table. The grid will have a selection property and
+ // Add selection capabilities to a grid. The grid will have a selection property and
// fire "select" and "deselect" events.
postCreate: function(){
this.inherited(arguments);
var lastRow, mode = (this.selectionMode) || "multiple";
- var table = this;
+ var grid = this;
this.selection = new Stateful();
if(this.selectionMode != "none"){
listen(this.contentNode, "mousedown", function(event){
@@ -15,19 +15,19 @@ return declare([], {
listen(this.contentNode, ".dojoxGridxRow:click, .dojoxGridxRow:keydown", function(event){
if(event.type == "click" || event.keyCode == 32){
event.preventDefault();
- var thisRow = table.row(event);
+ var thisRow = grid.row(event);
var targetElement = thisRow.element;
- var selection = table.selection;
+ var selection = grid.selection;
var id = thisRow.id;
if(mode == "single" || (!event.ctrlKey && mode == "multiple")){
for(var i in selection){
if(selection.hasOwnProperty(i) && typeof selection[i] != "function"){
- set(table, targetElement, i, false);
+ set(grid, targetElement, i, false);
}
}
- set(table, targetElement, id, true);
+ set(grid, targetElement, id, true);
}else{
- set(table, targetElement, id, !selection[id]);
+ set(grid, targetElement, id, !selection[id]);
}
if(event.shiftKey && mode != "single"){
var lastElement = lastRow && lastRow.element;
@@ -38,8 +38,8 @@ return declare([], {
var nextNode;
while(nextNode = thisRow.element[traverser]){
// loop through and set everything
- thisRow = table.row(nextNode);
- set(table, thisRow.element, thisRow.id, true);
+ thisRow = grid.row(nextNode);
+ set(grid, thisRow.element, thisRow.id, true);
if(nextNode == lastElement){
break;
}
@@ -51,9 +51,9 @@ return declare([], {
});
}
- table.selection.watch(function(id, oldValue, value){
- dojo[value ? "addClass" : "removeClass"](table.row(id).element, "dojoxGridxRowSelected");
- dojo[value ? "addClass" : "removeClass"](table.row(id).element, "ui-state-active");
+ grid.selection.watch(function(id, oldValue, value){
+ dojo[value ? "addClass" : "removeClass"](grid.row(id).element, "dojoxGridxRowSelected");
+ dojo[value ? "addClass" : "removeClass"](grid.row(id).element, "ui-state-active");
});
},
// selection:
@@ -77,13 +77,13 @@ return declare([], {
return rows;
}
});
-function set(table, target, id, value){
+function set(grid, target, id, value){
if(listen.emit(target, value ? "select" : "deselect", {
cancelable: true,
bubbles: true,
id: id
})){
- table.selection.set(id, value);
+ grid.selection.set(id, value);
}
}
View
10 TextEdit.js
@@ -15,16 +15,16 @@ return function(settings){
value: data
}, td);
input.focus();
- var table = settings.table;
- var id = table.row(event).id;
+ var grid = settings.grid;
+ var id = grid.row(event).id;
input.onblur = input.onchange = function(){
if(input){
var thisInput = input;
input = null;
- if(table.store){
- dojo.when(table.store.get(id), function(object){
+ if(grid.store){
+ dojo.when(grid.store.get(id), function(object){
data = object[settings.field] = thisInput.value;
- table.store.put(object);
+ grid.store.put(object);
originalRenderCell(data, td);
});
}
View
18 Tree.js
@@ -10,39 +10,39 @@ return declare([], {
// summary:
// Renders a cell that can be expanded, creating more rows
var level = options.query.level + 1;
- var table = this.table;
+ var grid = this.grid;
// create the expando
var expando = td.appendChild(document.createElement("div"));
expando.level = isNaN(level) ? 0 : level;
if(this.field){
td.appendChild(document.createTextNode(data));
}
- expando.className = "dojoxGridxExpando" + (!table.store.mayHaveChildren ||
- table.store.mayHaveChildren(object) ? " ui-icon ui-icon-triangle-1-e" : "");
+ expando.className = "dojoxGridxExpando" + (!grid.store.mayHaveChildren ||
+ grid.store.mayHaveChildren(object) ? " ui-icon ui-icon-triangle-1-e" : "");
expando.setAttribute("style", "margin-left: " + (expando.level * 19) + "px; float: left");
var tr, query;
- if(!table._hasTreeListener){
+ if(!grid._hasTreeListener){
// just setup the event listener once and use event delegation for better memory use
- table._hasTreeListener = true;
- this.table.on(".dojoxGridxExpando:click", function(event){
+ grid._hasTreeListener = true;
+ this.grid.on(".dojoxGridxExpando:click", function(event){
// on click we toggle expanding and collapsing
var expanded = this.expanded = !this.expanded;
// update the expando display
this.className = "dojoxGridxExpando ui-icon ui-icon-triangle-1-" + (expanded ? "se" : "e");
var preloadNode = this.preloadNode;
- var row = table.row(this);
+ var row = grid.row(this);
var rowElement = row.element;
if(!preloadNode){
// if the children have not been created, create a preload node and do the
// query for the children
preloadNode = this.preloadNode = document.createElement("div");
var query = function(options){
- return table.store.getChildren(row.data, options);
+ return grid.store.getChildren(row.data, options);
};
query.level = this.level;
rowElement.parentNode.insertBefore(preloadNode, rowElement.nextSibling);
- table.renderQuery(query, preloadNode);
+ grid.renderQuery(query, preloadNode);
}
// show or hide all the children
var styleDisplay = expanded ? "" : "none";
View
4 package.json
@@ -1,7 +1,7 @@
{
"name": "d-list",
"author": "Kris Zyp",
- "description": "A lightweight, mobile-ready, data-driven, modular widget designed for lists and tables",
+ "description": "A lightweight, mobile-ready, data-driven, modular widget designed for lists and grids",
"licenses": [
{
"type": "AFLv2.1",
@@ -22,7 +22,7 @@
"directories": {
"lib": "."
},
- "main": "./OnDemandTable",
+ "main": "./OnDemandGrid",
"mappings":{
"dojo": "http://github.com/kriszyp/dojo/zipball/1.7-bootstrap-has-modularize"
},
View
2  tests/css/layout-grid.css
@@ -6,7 +6,7 @@ h2 {
width: 70%;
height: 500px;
border: 1px solid blue;
- widget: d-list/Table, d-list/Selection, d-list/Keyboard;
+ widget: d-list/Grid, d-list/Selection, d-list/Keyboard;
store: testCountryStore;
query: {type: "continent"};
selection-mode: single;
View
20 tests/test_common_cases.html
@@ -11,16 +11,16 @@
font-weight: bold;
padding-bottom: 0.25em;
}
- #table {
+ #grid {
width: 70%;
}
- #table .field-col1 {
+ #grid .field-col1 {
width: 100px;
}
- #table .field-col2 {
+ #grid .field-col2 {
width: 30%;
}
- #table .field-col4 {
+ #grid .field-col4 {
width: 180px;
}
#tree {
@@ -51,8 +51,8 @@
require({"packages":[
{"name":"gridx","location":"../grid-2.0", "lib":"gridx"}
]});
- require(["d-list/List", "d-list/OnDemandTable","d-list/Tree","d-list/CheckBox","d-list/Selection", "gridx/modules/ColumnResizer", "gridx/modules/dnd/Row", "d-list/Keyboard", "d-list/tests/test_data", "domReady!"],
- function(List, Table, Tree, CheckBox, Selection, ColumnResizer, DndRow, Keyboard, testStore){
+ require(["d-list/List", "d-list/OnDemandGrid","d-list/Tree","d-list/CheckBox","d-list/Selection", "gridx/modules/ColumnResizer", "gridx/modules/dnd/Row", "d-list/Keyboard", "d-list/tests/test_data", "domReady!"],
+ function(List, Grid, Tree, CheckBox, Selection, ColumnResizer, DndRow, Keyboard, testStore){
console.log("loaded in " + (new Date().getTime() - start) + testStore);
var columns = [
{name: 'Column 1', field: 'col1', editable: true, sortable: true},
@@ -61,11 +61,11 @@
{name: 'Column 4', field: 'col4', editable: true, sortable: true},
{name: 'Column 5', field: 'col5', editable: true, sortable: true}
];
- grid = dojo.declare([Table, ColumnResizer, Selection, Keyboard])({
+ grid = dojo.declare([Grid, ColumnResizer, Selection, Keyboard])({
store: testStore,
columns: columns
- }, "table");
- tree =dojo.declare([Table, ColumnResizer])({
+ }, "grid");
+ tree =dojo.declare([Grid, ColumnResizer])({
store: testCountryStore,
query: {type: "continent"},
selectionMode: "single",
@@ -90,7 +90,7 @@
</head>
<body class="claro">
<h2>A basic grid (70% of page width)</h2>
- <div id="table"></div>
+ <div id="grid"></div>
<h2>A grid with tree column and then a simple list (floated left)</h2>
<div id="tree"></div>
<div id="list"></div>
View
18 tests/test_complex_column.html
@@ -11,16 +11,16 @@
font-weight: bold;
padding-bottom: 0.25em;
}
- #table {
+ #grid {
width: 70%;
}
- #table .field-col1 {
+ #grid .field-col1 {
width: 60px;
}
- #table .field-col2 {
+ #grid .field-col2 {
width: 100px;
}
- #table .field-col4 {
+ #grid .field-col4 {
width: 500px;
}
.ui-widget-content{
@@ -34,9 +34,9 @@
require({"packages":[
{"name":"gridx","location":"../grid-2.0", "lib":"gridx"}
]});
- require(["d-list/OnDemandTable", "d-list/ColumnSet", "d-list/Tree", "d-list/Selection", "d-list/Keyboard", "d-list/tests/test_data", "domReady!"],
- function(Table, ColumnSet, Tree, Selection, Keyboard, testStore){
- grid = dojo.declare([Table, ColumnSet, Selection, Keyboard])({
+ require(["d-list/OnDemandGrid", "d-list/ColumnSet", "d-list/Tree", "d-list/Selection", "d-list/Keyboard", "d-list/tests/test_data", "domReady!"],
+ function(Grid, ColumnSet, Tree, Selection, Keyboard, testStore){
+ grid = dojo.declare([Grid, ColumnSet, Selection, Keyboard])({
store: testStore,
columnSets: [
[
@@ -47,12 +47,12 @@
[{name: 'Column 1', field: 'col1', rowspan: 2, editable: true, sortable: true},
{name: 'Column 4', field: 'col4', editable: true, sortable: true}],
[{name: 'Column 5', field: 'col5', editable: true, sortable: true}]]]
- }, "table");
+ }, "grid");
});
</script>
</head>
<body class="claro">
<h2>A Grid with complex columns including locking columns and subrows</h2>
- <div id="table"></div>
+ <div id="grid"></div>
</body>
</html>
View
6 tests/test_dnd.html
@@ -29,10 +29,10 @@
require({"packages":[
{"name":"gridx","location":"../grid-2.0", "lib":"gridx"}
]});
- require(["dojo", "d-list/List", "d-list/OnDemandTable","d-list/Tree","d-list/CheckBox","d-list/Selection", "gridx/modules/ColumnResizer", "gridx/modules/dnd/Row", "d-list/Keyboard", "d-list/tests/test_data"],
- function(dojo, List, Table, Tree, CheckBox, Selection, ColumnResizer, DndRow, Keyboard, ProgressBar){
+ require(["dojo", "d-list/List", "d-list/OnDemandGrid","d-list/Tree","d-list/CheckBox","d-list/Selection", "gridx/modules/ColumnResizer", "gridx/modules/dnd/Row", "d-list/Keyboard", "d-list/tests/test_data"],
+ function(dojo, List, Grid, Tree, CheckBox, Selection, ColumnResizer, DndRow, Keyboard, ProgressBar){
dojo.addOnLoad(function(){
- dragndrop = new (dojo.declare([Table, Selection, DndRow, Keyboard]))({
+ dragndrop = new (dojo.declare([Grid, Selection, DndRow, Keyboard]))({
store: testOrderedStore,
columns: [
{name:'Name', field:'name'},
View
18 tests/test_tundra.html
@@ -13,16 +13,16 @@
padding-bottom: 0.25em;
}
- #table {
+ #grid {
width: 70%;
}
- #table .field-col {
+ #grid .field-col {
width: 80px;
}
- #table .field-col2 {
+ #grid .field-col2 {
width: 50px;
}
- #table .field-col4 {
+ #grid .field-col4 {
width: 150px;
}
@@ -33,8 +33,8 @@
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="async: true"></script>
<script type="text/javascript">
- require(["d-list/List", "d-list/OnDemandTable","d-list/Tree","d-list/CheckBox","d-list/Selection", "d-list/Keyboard", "d-list/tests/test_data", "domReady!"],
- function(List, Table, Tree, CheckBox, Selection, Keyboard, ProgressBar){
+ require(["d-list/List", "d-list/OnDemandGrid","d-list/Tree","d-list/CheckBox","d-list/Selection", "d-list/Keyboard", "d-list/tests/test_data", "domReady!"],
+ function(List, Grid, Tree, CheckBox, Selection, Keyboard, ProgressBar){
var columns = [
{name: 'Column 1', field: 'col1', editable: true, sortable: true},
{name: 'Column 2', field: 'col2'},
@@ -42,16 +42,16 @@
{name: 'Column 4', field: 'col4', editable: true, sortable: true},
{name: 'Column 5', field: 'col5', editable: true, sortable: true}
];
- grid = new (dojo.declare([Table, Selection, Keyboard]))({
+ grid = new (dojo.declare([Grid, Selection, Keyboard]))({
store: testStore,
columns: columns
- }, "table");
+ }, "grid");
});
</script>
</head>
<body class="claro">
<h2>A basic grid (70% of page width)</h2>
- <div id="table"></div>
+ <div id="grid"></div>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.