### Installing dgrid and dependencies using npm

Source: https://github.com/dojo/dojo1-dgrid/blob/master/README.md

This command installs dgrid, dojo-dstore, dijit, and dojox using npm. It is useful for projects that require Dojo widgets and dgrid functionality.

```shell
npm install dgrid dojo-dstore dijit dojox
```

--------------------------------

### Running Selenium Server

Source: https://github.com/dojo/dojo1-dgrid/blob/master/test/README.md

This command starts the Selenium server using the provided JAR file. Java 8 or higher is required to run the Selenium server.

```bash
> java -jar selenium-server-standalone-3.141.59.jar
```

--------------------------------

### Initializing dgrid with dstore Collection

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This snippet demonstrates how to initialize a dgrid with a dstore Memory store using the `collection` property. The `collection` property is set to a dstore/Memory instance, and the grid's columns are defined. The grid is then started up.

```JavaScript
require([
	'dstore/Memory', 'dgrid/OnDemandGrid'
]), function (Memory, OnDemandGrid) {
	var data = [ /* Populate data with items... */ ];

	// Create a store object.
	var store = new Memory({ data: data });

	// Create a grid referencing the store.
	var grid = new OnDemandGrid({
		collection: store,
		columns: { /* Define columns... */ }
	}, 'grid');

	grid.startup();
}
```

--------------------------------

### Initializing dgrid with Tree plugin (dgrid 0.3)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code initializes a dgrid with the Tree plugin in dgrid 0.3. It demonstrates how to apply the `tree` plugin around the desired column.

```JavaScript
require([
	'dgrid/OnDemandGrid', 'dgrid/tree'
], function (OnDemandGrid, tree) {
	var store = ...;
	var treeGrid = new OnDemandGrid({
		store: store,
		columns: {
			name: tree({ label: 'Name' }),
			population: 'Population',
			timezone: 'Timezone'
		}
	}, 'treeGrid');
});
```

--------------------------------

### Setting up an upstream remote for dgrid

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

Sets up an `upstream` remote to track changes from the official SitePen dgrid repository. This allows fetching and rebasing changes into the local clone.

```sh
$ cd dgrid
$ git remote add upstream https://github.com/SitePen/dgrid.git
$ git fetch upstream
```

--------------------------------

### Example hierarchical data structure

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code shows an example of structuring hierarchical data for use with dgrid's Tree module. It includes top-level nodes and their children, with properties indicating parent-child relationships and whether a node has children.

```JavaScript
// The first 3 items are the top-level nodes that should expand
// The last 3 items are the children that should display under the expanded nodes
var data = [
	{ id: 'AF', name: 'Africa', parent: null, hasChildren: true },
	{ id: 'EU', name: 'Europe', parent: null, hasChildren: true },
	{ id: 'NA', name: 'North America', parent: null, hasChildren: true },
	{ id: 'EG', name: 'Egypt', parent: 'AF', hasChildren: false },
	{ id: 'DE', name: 'Germany', parent: 'EU', hasChildren: false },
	{ id: 'MX', name: 'Mexico', parent: 'NA', hasChildren: false }
];
```

--------------------------------

### Creating a Trackable Store from Existing Store

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code shows how to make an existing store instance trackable using the `Trackable.create` function. This allows dgrid to track changes in the store for real-time updates.

```JavaScript
var trackableStore = Trackable.create(existingStore);
```

--------------------------------

### CDN configuration for dgrid and dstore

Source: https://github.com/dojo/dojo1-dgrid/blob/master/README.md

This JavaScript code configures the packages for dgrid and dstore to be loaded from the unpkg CDN. It specifies the name and location of each package, pointing to specific versions hosted on unpkg.

```javascript
packages: [
    {
        name: 'dgrid',
        location: '//unpkg.com/dgrid@1.1.0/'
    },
    {
        name: 'dstore',
        location: '//unpkg.com/dojo-dstore@1.1.1/'
    }
]
```

--------------------------------

### Cloning a forked dgrid repository

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

Clones the forked dgrid repository from GitHub to the local machine. Replace `username` with the actual GitHub username.

```sh
$ git clone git@github.com:username/dgrid.git
```

--------------------------------

### Initializing DataGrid with ObjectStore - JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This snippet initializes a `dojox/grid/DataGrid` with data from a `dojo/store/Memory` instance wrapped in a `dojo/data/ObjectStore`. It defines the grid structure with columns for 'id', 'name', and 'description', and then starts the grid. Requires `dojox/grid/DataGrid`, `dojo/store/Memory`, `dojo/data/ObjectStore`.

```JavaScript
require([
    'dojox/grid/DataGrid',
    'dojo/store/Memory',
    'dojo/data/ObjectStore',
    'dojo/domReady!'
], function (DataGrid, Memory, ObjectStore) {
    var memoryStore = new Memory({ data: [
        // data here...
    ]});
    var objectStore = new ObjectStore({ objectStore: memoryStore });

    var grid = new DataGrid({
        structure: [
            { field: 'id', name: 'ID', width: '10%' },
            { field: 'name', name: 'Name', width: '20%' },
            { field: 'description', name: 'Description', width: '70%' }
        ],
        store: objectStore
    }, 'grid');
    grid.startup();
});
```

--------------------------------

### AMD Packages Configuration

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/usage/npm.md

Configures the AMD loader to locate the dstore package under the dojo-dstore directory. This allows applications to access dstore via the 'dstore' package name while it's installed as 'dojo-dstore'.

```JavaScript
{
    async: true,
    packages: [
        { name: 'dstore', location: '../dojo-dstore' }
    ]
}
```

--------------------------------

### Explicit AMD Packages Configuration

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/usage/npm.md

Configures the AMD loader with an explicit baseUrl and specifies the locations for dojo, dgrid, and dstore packages. This is useful when managing all package locations explicitly.

```JavaScript
{
    async: true,
    baseUrl: '.',
    packages: [
        { name: 'dojo', location: 'dojo' },
        { name: 'dgrid', location: 'dgrid' },
        { name: 'dstore', location: 'dojo-dstore' }
    ]
}
```

--------------------------------

### Initializing dgrid with Tree mixin (dgrid 0.4)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code initializes a dgrid with the Tree mixin in dgrid 0.4. It demonstrates how to combine the `Tree` mixin with `OnDemandGrid` and how to configure the column to render the expando icon.

```JavaScript
require([
	'dojo/_base/declare', 'dgrid/OnDemandGrid', 'dgrid/Tree'
], function (declare, OnDemandGrid, Tree) {
	var store = ...;
	var treeGrid = new (declare([ OnDemandGrid, Tree ]))({
		collection: store,
		columns: {
			name: {
				label: 'Name',
				renderExpando: true
			},
			population: 'Population',
			timezone: 'Timezone'
		}
	}, 'treeGrid');
});
```

--------------------------------

### Initializing dgrid with Selector plugin (dgrid 0.3)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code initializes a dgrid with the Selector plugin in dgrid 0.3. It demonstrates how to apply the `selector` column plugin to a column to add a selector component, and how to configure the selection mode.

```JavaScript
require([
	'dojo/_base/declare', 'dgrid/OnDemandGrid', 'dgrid/Selection', 'dgrid/selector'
], function (declare, OnDemandGrid, Selection, selector) {
	var grid = new (declare([ OnDemandGrid, Selection ]))({
		store: store,
		selectionMode: 'single',
		columns: {
			col1: selector({ label: 'Select' }),
			col2: 'Column 2'
		}
	}, 'grid');
});
```

--------------------------------

### Creating a Trackable Memory Store

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code demonstrates how to create a trackable memory store using dstore's Trackable mixin. It extends the Memory store with Trackable to enable real-time updates in dgrid.

```JavaScript
var TrackableMemory = declare([ Memory, Trackable ]);
var store = new TrackableMemory({ data: ... });
```

--------------------------------

### Adapting Dojo Store to Dstore

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code demonstrates how to use the StoreAdapter module to bridge the dojo/store and dstore APIs. This is useful for integrating legacy stores with dgrid 0.4, although it does not support trackable stores.

```JavaScript
var dstoreStore = new StoreAdapter({ objectStore: dojoStore });
```

--------------------------------

### Assigning Store to Grid (dgrid 0.3)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code shows how to assign a store to a grid in dgrid 0.3 using the `store` property. It creates a Memory store and then creates an OnDemandGrid referencing the store.

```JavaScript
require([
	'dojo/store/Memory', 'dgrid/OnDemandGrid'
]), function (Memory, OnDemandGrid) {
	var data = [ /* Populate data with items... */ ];

	// Create a store object.
	var store = new Memory({ data: data });

	// Create a grid referencing the store.
	var grid = new OnDemandGrid({
		store: store,
		columns: { /* Define columns... */ }
	}, 'grid');
}
```

--------------------------------

### Pushing changes after initial push

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

After the initial push with the '-u' option, subsequent pushes to the same branch can be done with this command. This command pushes the local changes to the remote branch that is being tracked.

```sh
$ git push
```

--------------------------------

### Initializing dgrid with ColumnSet

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/mixins/ColumnSet.md

This example demonstrates how to initialize a dgrid with the ColumnSet mixin, defining the columnSets property to structure the grid's columns into independently scrollable sets. It requires dojo/_base/declare, dgrid/OnDemandGrid, and dgrid/ColumnSet.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/ColumnSet'
], function (declare, OnDemandGrid, ColumnSet) {
    var grid = new (declare([ OnDemandGrid, ColumnSet ]))({
        columnSets: [
            // left columnset
            [
                [
                    { /* columnset 1, subrow 1, column 1 */ },
                    { /* columnset 1, subrow 1, column 2 */ }
                ],
                [
                    { /* columnset 1, subrow 2, column 1 */ },
                    { /* columnset 1, subrow 2, column 2 */ }
                ]
            ],
            // right columnset
            [
                [
                    { /* columnset 2, subrow 1, column 1 */ },
                    { /* columnset 2, subrow 1, column 2 */ }
                ],
                [
                    { /* columnset 2, subrow 2, column 1 */ },
                    { /* columnset 2, subrow 2, column 2 */ }
                ]
            ]
        ],
        // ...
    }, 'grid');
});
```

--------------------------------

### Initializing dgrid with Selector mixin (dgrid 0.4)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code initializes a dgrid with the Selector mixin in dgrid 0.4. It demonstrates how to incorporate the `Selector` mixin in the constructor and specify the `selector` property on the desired column.

```JavaScript
require([
	'dojo/_base/declare', 'dgrid/Grid', 'dgrid/Selector', 'dstore/Memory'
], function (declare, Grid, Selector, Memory) {
	var store = new Memory({ data: [ /* ... */ ]});

	// In 0.4, Selector already inherits Selection so you don't have to
	var grid = new (declare([ Grid, Selector ]))({
		collection: store,
		columns: {
			col1: { label: 'Select', selector: 'checkbox' }),
			col2: 'Column 2'
		}
	}, 'grid');
});
```

--------------------------------

### Checking the current branch

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

This command displays the current branch you are working on. It also shows the status of the working directory, indicating whether there are any changes to commit.

```sh
$ git status
# On branch t12345
nothing to commit, working directory clean
```

--------------------------------

### Committing changes to the local repository

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

This command commits the staged changes to the local repository with a descriptive message. The message should explain the purpose of the commit and reference any related issue tracker tickets.

```sh
$ git status
# On branch t12345
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#        modified:   somefile.js
#
$ git commit -m 'Corrects some defect, fixes #123'
[t12345 0000000] Corrects some defect, fixes #123
 1 file changed, 2 insertions(+), 2 deletions(-)
```

--------------------------------

### Creating a DataGrid with Multiple Views

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This JavaScript code creates a DataGrid with multiple views using the dojox/grid library. It defines the structure of the grid with two views, each containing cells with specified fields, names, and widths. It also sets the data store for the grid and starts it up.

```JavaScript
var grid = new DataGrid({
    structure: [
        { // first view
            width: '10%',
            cells: [
                { field: 'id', name: 'ID', width: 'auto' }
            ]
        },
        [ // second view
            [
                { field: 'name', name: 'Name', width: '20%' },
                { field: 'description', name: 'Description', width: '80%' }
            ]
        ]
    ],
    store: objectStore
}, 'grid');
grid.startup();
```

--------------------------------

### Rebasing local branch with upstream changes

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

Retrieves changes from the `upstream` remote and rebases the current local branch onto them. This helps keep the fork up-to-date with the main repository.

```sh
$ git pull --rebase upstream master
```

--------------------------------

### Filtering Grid Data (dgrid 0.3)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code demonstrates how to filter grid data in dgrid 0.3 by setting the `query` property. It shows how to display only items that match a specific criteria.

```JavaScript
// Create a grid referencing the store.
var grid = new OnDemandGrid({
	store: store,
	query: { size: 'large'; } // Show large items only.
	columns: { /* Define columns... */ }
}, 'grid');
```

--------------------------------

### Pushing the branch to the remote repository

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

This command pushes the current branch to the remote repository ('origin') and sets up a tracking relationship. This allows you to easily push subsequent changes to the same branch using just 'git push'.

```sh
$ git push -u origin t12345
```

--------------------------------

### Initializing dgrid with dstore collection in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code initializes a dgrid with the Tree plugin and sets its collection property to a filtered collection of top-level nodes using dstore/Tree's getRootCollection method. This ensures that only top-level items are initially displayed in the grid.

```JavaScript
var grid = new (declare([ OnDemandGrid, Tree ]))({
	// Initially list top-level items (items with no parent)
	collection: store.getRootCollection(),
	columns: {
		// ...
	}
}, 'treeGrid');
```

--------------------------------

### Creating a new branch from master

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

This command creates a new branch named 'fix-123-short-description' based on the 'master' branch and switches to it. This allows you to work on a new feature or bug fix without directly modifying the master branch.

```sh
$ git checkout -b fix-123-short-description master
Switched to a new branch 'fix-123-short-description'
```

--------------------------------

### Initializing Memory store with tree methods in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code initializes a dojo/store/Memory instance with the getChildren, mayHaveChildren, and query methods defined to work with dgrid's tree column plugin. The getChildren method retrieves children based on the parent ID, mayHaveChildren checks if an item has children, and query filters top-level items by default.

```JavaScript
var store = new Memory({
	data: data,
	getChildren: function (item, options) {
		return this.query(
			// Find items whose parent matches this item's identity,
			// while preserving any other query parameters
			lang.mixin({}, options && options.originalQuery || null, { parent: item.id } )
		);
	},
	mayHaveChildren: function (item) {
		return item.hasChildren;
	},
	query: function (query, options) {
		query = query || {};
		options = options || {};

		if (!query.parent) {
			// Only return top-level items by default
			// (otherwise this would return items from all levels)
			query.parent = null;
		}

		return this.queryEngine(query, options)(this.data);
	}
});
```

--------------------------------

### Extending dgrid Skin by Overriding Variables in Stylus

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/usage/Customizing-Skins.md

This example demonstrates how to extend an existing dgrid skin by overriding its variables in Stylus. It defines a new value for `$dgrid-body-row-odd-background` before importing the slate skin.

```Stylus
// You can optionally use conditional assignment as well to make your own extensions extensible
$dgrid-body-row-odd-background ?= #e7f0f7;
@import 'dgrid/css/skin/slate';
```

--------------------------------

### Creating a store with dstore/Tree module in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code creates a store by mixing in the dstore/Tree module with a Memory store. It assumes that the data structure follows the convention where child items reference their parent's identity via the 'parent' property, leaf items have 'hasChildren' set to false, and top-level items have 'parent' set to null.

```JavaScript
var store = new (declare([ Memory, TreeStore ]))({ data: data });
```

--------------------------------

### Handling Mouse Events with dojo/on and dojo/mouse

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code demonstrates how to use `dojo/on` and `dojo/mouse` to handle mouse enter events on dgrid rows. It requires `dojo/on`, `dojo/mouse`, and `dojo/query` modules. The code attaches an event listener to the grid that triggers when the mouse enters a row, allowing you to perform actions based on the row data.

```JavaScript
require([
    'dojo/on',
    'dojo/mouse',
    'dojo/query'
], function (on, mouse) {
    // Assume we have a Grid instance in the variable `grid`...
    grid.on(on.selector('.dgrid-content .dgrid-row', mouse.enter), function (event) {
        var row = grid.row(event);
        // Do something with `row` here in reaction to when the mouse enters
    });
});
```

--------------------------------

### Styling dgrid Columns - CSS

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This CSS snippet defines the widths for columns in a dgrid with the ID 'dgrid'. It targets the 'id', 'name', and 'description' fields, setting their widths to 10%, 20%, and 70% respectively. This is used to style the dgrid to match the appearance of the dojox/grid example.

```CSS
#dgrid .field-id {
    width: 10%;
}
#dgrid .field-name {
    width: 20%;
}
#dgrid .field-description {
    width: 70%;
}
```

--------------------------------

### Initializing dgrid with CompoundColumns

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/extensions/CompoundColumns.md

This code snippet demonstrates how to initialize a dgrid with the CompoundColumns extension. It defines a column structure with nested headers using the 'children' property. The example creates a grid with columns for first name, middle name, last name, and age, with spanning headers for 'Full Name' and 'Given'.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/CompoundColumns'
], function (declare, OnDemandGrid, CompoundColumns) {
    var compoundGrid = new (declare([ OnDemandGrid, CompoundColumns ]))({
        columns: [
            { label: 'Full Name', children: [
                { label: 'Given', children: [
                    { field: 'firstname', label: 'First' },
                    { field: 'middlename', label: 'Middle', sortable: false }
                ] },
                { field: 'lastname', label: 'Last' }
            ] },
            { field: 'age', label: 'Age' }
        ]
    }, 'compoundGrid');
    // ...
});
```

--------------------------------

### Rebasing with the upstream master branch

Source: https://github.com/dojo/dojo1-dgrid/blob/master/CONTRIBUTING.md

This command fetches the latest changes from the upstream 'master' branch and rebases the current branch on top of it. This ensures that your work is based on the most recent version of the codebase and helps to avoid conflicts during the pull request process.

```sh
$ git pull --rebase upstream master
```

--------------------------------

### Sorting Grid Data (dgrid 0.3)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code shows how to sort grid data in dgrid 0.3 by setting the `sort` property. It demonstrates both basic sorting by a single property and advanced sorting using an array of objects with `attribute` and `descending` properties.

```JavaScript
var grid = new OnDemandGrid({
	store: store,
	columns: { /* Define columns... */ },
	// sort in descending order by the "title" property
	sort: [ { attribute: 'title', descending: true } ]
}, 'grid');
```

--------------------------------

### Sorting dgrid Collection

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This snippet demonstrates how to sort a dgrid's collection by setting the `sort` property. The `sort` property is set to an array of sort objects, each specifying a property to sort by and the sort direction (ascending or descending).

```JavaScript
var grid = new OnDemandGrid({
	collection: collection,
	columns: { /* Define columns... */ },
	// sort in descending order by the "title" property
	sort: [ { property: 'title', descending: true } ]
}, 'grid');
```

--------------------------------

### dgrid 0.4: Using Editor Mixin

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This snippet demonstrates how to use the `Editor` mixin in dgrid 0.4 to add input fields to grid columns. The `Editor` mixin is incorporated into a custom grid constructor using `dojo/_base/declare`. The `editor` and `editOn` properties are specified directly on each editable column definition.

```JavaScript
require([
	'dojo/_base/declare', 'dgrid/Grid', 'dgrid/Editor'
], function (declare, Grid, Editor) {
	// Create a custom grid by mixing in Editor
	var grid = new (declare([ Grid, Editor ]))({
		columns: [
			// These columns have the same effect as above,
			// but there is only one way to specify editor and editOn in 0.4:
			{
				field: 'firstName',
				label: 'First',
				editor: 'text',
				editOn: 'click'
			},
			{
				field: 'lastName',
				label: 'Last',
				editor: 'text',
				editOn: 'click'
			),
			// This column has no editors:
			{
				field: 'age',
				label: 'Age'
			},
			// This field always shows a text input:
			{
				field: 'income',
				label: 'Income',
				editor: 'text'
			}
		]
	}, 'grid');
});
```

--------------------------------

### dgrid 0.3: Using Editor Column Plugin

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This snippet shows how to use the `editor` column plugin in dgrid 0.3 to add input fields to grid columns. The `editor` plugin is applied to each editable column, and editor properties like `editor` and `editOn` can be passed either in the column definition object or as extra arguments.

```JavaScript
require([
	'dgrid/Grid', 'dgrid/editor'
], function (Grid, editor) {
	var grid = new Grid({
		columns: [
			// Passing all editor properties in the column definition parameter:
			editor({
				field: 'firstName',
				label: 'First',
				editor: 'text',
				editOn: 'click'
			}),
			// Passing the editor properties as additional parameters:
			editor({
				field: 'lastName',
				label: 'Last'
			}, 'text', 'click'),
			// This column has no editors:
			{
				field: 'age',
				label: 'Age'
			},
			// This field always shows a text input:
			editor({
				field: 'income',
				label: 'Income'
			})
		]
	}, 'grid');
});
```

--------------------------------

### Grid Columns Definition using Array - JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/core-components/Grid.md

Defines grid columns using an array of column definition objects. Each object specifies the 'label' and 'field' for the column. The 'age' column demonstrates a custom 'get' function to calculate age from a birth date.

```JavaScript
var columns = [
    {
        label: 'First Name',
        field: 'first'
    },
    {
        label: 'Last Name',
        field: 'last'
    },
    {
        label: 'Age',
        field: 'age',
        get: function(object){
            return (new Date() - object.birthDate) / 31536000000;
        }
    }
];
```

--------------------------------

### Grid Columns Definition using Object - JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/core-components/Grid.md

Defines grid columns using an object where keys represent column IDs and values are column definition objects.  The 'age' column demonstrates a custom 'get' function to calculate age from a birth date. Requires dgrid/Grid module.

```JavaScript
require([ 'dgrid/Grid' ], function (Grid) {
    var columns = {
        first: {
            label: 'First Name'
        },
        last: {
            label: 'Last Name'
        },
        age: {
            label: 'Age',
            get: function(object){
                return (new Date() - object.birthDate) / 31536000000;
            }
        }
    };
    var grid = new Grid({ columns: columns }, 'grid'); // attach to a DOM id
    grid.renderArray(arrayOfData); // render some data
    // ...
});
```

--------------------------------

### Overriding getChildren method for custom filtering in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code demonstrates how to override the getChildren method of a dstore/Tree store to apply custom filters to child queries. It accesses the root property of the store to query the entire data set and applies a custom filter in addition to the parent filter.

```JavaScript
	var childFilter = ...;
	store.getChildren = function (parent) {
		return this.root.filter(lang.mixin({
			parent: parent
		}, childFilter));
	};
```

--------------------------------

### Filtering dgrid Collection

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This snippet shows how to filter the items displayed in a dgrid using dstore's `Collection` API. The `store.filter()` method is used to create a new collection containing only items that match the filter criteria. This filtered collection is then assigned to the grid's `collection` property.

```JavaScript
// Create a grid referencing filtered items from the store.
var grid = new OnDemandGrid({
	collection: store.filter({ size: 'large' }), // Show only the large items.
	columns: { /* Define columns... */ }
}, 'grid');
```

--------------------------------

### Initializing dgrid with dstore/Memory - JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This snippet initializes a dgrid using `dgrid/OnDemandGrid` and `dstore/Memory`. It also mixes in `dgrid/Keyboard` and `dgrid/Selection` for keyboard navigation and row selection. The grid's columns are defined using a simple object hash, and the data is provided via a `dstore/Memory` instance. Requires `dojo/_base/declare`, `dgrid/OnDemandGrid`, `dgrid/Keyboard`, `dgrid/Selection`, `dstore/Memory`.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dstore/Memory',
    'dojo/domReady!'
], function (declare, OnDemandGrid, Keyboard, Selection, Memory) {
    var memoryStore = new Memory({data: [
        // data here...
    ]});

    var grid = new declare([ OnDemandGrid, Keyboard, Selection ])({
        columns: {
            id: 'ID',
            name: 'Name',
            description: 'Description'
        },
        collection: memoryStore
    }, 'grid');
    // dgrid will call startup for you if the node appears to be in flow
});
```

--------------------------------

### Dynamically Filtering dgrid Collection on Button Click

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This snippet demonstrates how to dynamically change a dgrid's store filter by reassigning the `collection` property based on button clicks. Event listeners are attached to buttons, and when a button is clicked, the `grid.set('collection', ...)` method is called to update the grid's collection with a filtered version of the store.

```JavaScript
on(smallButtonNode, 'click', function () {
	// When the "small" button is clicked, display only the small items.
	grid.set('collection', store.filter({ size: 'small' }));
});
on(mediumButtonNode, 'click', function () {
	// When the "medium" button is clicked, display only the medium items.
	grid.set('collection', store.filter({ size: 'medium' }));
});
on(largeButtonNode, 'click', function () {
	// When the "large" button is clicked, display only the large items.
	grid.set('collection', store.filter({ size: 'large' }));
});
```

--------------------------------

### Running full test suite with BrowserStack

Source: https://github.com/dojo/dojo1-dgrid/blob/master/test/README.md

This command runs the full dgrid test suite using Intern with the BrowserStack configuration. It requires Node.js, npm, dgrid dependencies, and a BrowserStack account with the BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environment variables set.

```bash
> npx intern config=@browserstack
```

--------------------------------

### Initializing DnD Grid with DnD Source - JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/extensions/DnD.md

This code initializes a dgrid with the DnD extension and sets up a DnD Source as a drop target. It requires dojo, dgrid, and dojo/dnd modules. The grid uses a store-backed component (OnDemandGrid) and defines columns.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/DnD',
    'dojo/dnd/Source'
], function (declare, OnDemandGrid, DnD, DnDSource) {
    var grid = new (declare([ OnDemandGrid, DnD ]))({
        collection: myStore,
        columns: {
            name: 'Name'
            // ...
        }
    }, 'grid');

    // Set up another target
    var target = new DnDSource('target', {
        accept: [ 'dgrid-row' ],
        isSource: false
        // Optionally, override onDrop(source, nodes) with custom behavior
    });
});
```

--------------------------------

### Initializing dgrid Grid with Columns

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/core-components/Grid.md

This code initializes a dgrid Grid with specified columns and renders data. It requires the 'dgrid/Grid' module. The grid is attached to a DOM element with the ID 'grid', and data is rendered using the renderArray method.

```JavaScript
require([ 'dgrid/Grid' ], function (Grid) {
    var columns = {
        first: {
            label: "First Name"
        },
        last: {
            label: "Last Name"
        }
    };
    var grid = new Grid({ columns: columns }, 'grid'); // attach to a DOM id
    grid.renderArray(arrayOfData); // render some data
});
```

--------------------------------

### Declarative Grid with Column Sets using dojox/grid in HTML

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This HTML snippet demonstrates how to create a declarative grid with column sets using `dojox/grid`. It defines the grid structure with column groups and headers, binding it to a data store.

```HTML
<table id="grid" data-dojo-type="dojox/grid/DataGrid"
    data-dojo-props="store: objectStore">
    <colgroup span="1" width="10%"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
        <tr>
            <th field="id" width="auto">ID</th>
            <th field="name" width="20%">Name</th>
            <th field="description" width="80%">Description</th>
        </tr>
    </thead>
</table>
```

--------------------------------

### Initializing dgrid with Tree and dstore

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/mixins/Tree.md

This code initializes a dgrid with the Tree mixin, using dstore for data management. It creates a MemoryStore with TreeStoreMixin to handle hierarchical data and configures the grid to display the data with an expandable tree structure. The 'name' column is set to render the expando icon for expanding/collapsing rows.

```JavaScript
require([
    'dgrid/OnDemandGrid',
    'dgrid/Tree',
    'dstore/Memory',
    'dstore/Tree'
], function (OnDemandGrid, Tree, MemoryStore, TreeStoreMixin) {
    var treeStore = new (MemoryStore.createSubclass([ TreeStoreMixin ]))({
        data: [ /* ... */ ]
    });
    var treeGrid = new (OnDemandGrid.createSubclass([ Tree ]))({
        collection: treeStore.getRootCollection(),
        columns: {
            // Render expando icon and trigger expansion from first column
            name: { label: 'Name', renderExpando: true },
            type: 'Type',
            population: 'Population',
            timezone: 'Timezone'
        }
    }, 'treeGrid');
});
```

--------------------------------

### Overriding default checkbox selector (dgrid 0.3)

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/0.4-Migration.md

This code shows how to override the default checkbox selector in dgrid 0.3 by passing a second argument to the plugin or including `selectorType` in the column definition's properties.

```JavaScript
	// As second argument:
	col1: selector({ label: 'Select'}, 'radio'),

	// In column definition object:
	col1: selector({ label: 'Select', selectorType: 'radio' }),
```

--------------------------------

### Initializing and Rendering a dgrid List

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/core-components/List.md

This code snippet demonstrates how to initialize a dgrid List instance and render an array of data within it. It requires the 'dgrid/List' module and attaches the list to a DOM element with the ID 'list'. The renderArray method is then used to display the data.

```JavaScript
require([ 'dgrid/List' ], function (List) {
    // attach to a DOM element indicated by its ID
    var list = new List({}, 'list');
    // render some data
    list.renderArray(arrayOfData);
});
```

--------------------------------

### Running tests with specific browser configuration

Source: https://github.com/dojo/dojo1-dgrid/blob/master/test/README.md

This command runs dgrid tests using Intern with a specific browser configuration (e.g., Chrome). It requires Intern to be configured with the desired browser.

```bash
> npx intern config=@chrome
```

--------------------------------

### Declarative Grid with Column Sets using dgrid in HTML

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This HTML snippet demonstrates how to create a declarative grid with column sets using dgrid. It utilizes `dgrid/GridWithColumnSetsFromHtml` and specifies column properties using the `data-dgrid-column` attribute.

```HTML
<table id="grid" data-dojo-type="dgrid/GridWithColumnSetsFromHtml"
    data-dojo-mixins="dgrid/OnDemandList, dgrid/Keyboard, dgrid/Selection"
    data-dojo-props="collection: memoryStore">
    <colgroup span="1"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
        <tr>
            <th data-dgrid-column="{ field: 'id' }">ID</th>
            <th data-dgrid-column="{ field: 'name' }">Name</th>
            <th data-dgrid-column="{ field: 'description' }">Description</th>
        </tr>
    </thead>
</table>
```

--------------------------------

### Initializing dgrid with Pagination Extension in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/extensions/Pagination.md

This code demonstrates how to initialize a dgrid with the Pagination extension. It requires the dojo/_base/declare, dgrid/Grid, and dgrid/extensions/Pagination modules. It sets various paging-related properties such as pagingLinks, pagingTextBox, firstLastArrows, and pageSizeOptions.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/Grid',
    'dgrid/extensions/Pagination'
], function (declare, Grid, Pagination) {
    var grid = new (declare([ Grid, Pagination ]))({
        collection: myStore,
        columns: myColumns,
        pagingLinks: 1,
        pagingTextBox: true,
        firstLastArrows: true,
        pageSizeOptions: [10, 15, 25]
    }, 'grid');
    // ...
});
```

--------------------------------

### Initializing dgrid from HTML

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/core-components/GridFromHtml.md

This JavaScript code initializes a dgrid from an existing HTML table with the ID 'htmlgrid'. It requires the 'dgrid/GridFromHtml' module. The grid is then populated with data using the renderArray method.

```javascript
require([
        'dgrid/GridFromHtml'
        /* ... */
    ], function (GridFromHtml /* , ... */) {
        var grid = new GridFromHtml({}, 'htmlgrid');
        grid.renderArray(someData);
    });
```

--------------------------------

### Initializing dgrid with Editor Mixin in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/mixins/Editor.md

This code snippet demonstrates how to initialize a dgrid with the Editor mixin, along with OnDemandGrid, Keyboard, and Selection. It defines a grid with an editable 'Name' column that uses a text input editor, activated on double-click. The grid is backed by a store (myStore).

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dgrid/Editor'
], function (declare, OnDemandGrid, Keyboard, Selection, Editor) {
    var editGrid = new (declare([ OnDemandGrid, Keyboard, Selection, Editor ]))({
        collection: myStore,
        columns: [
            {
                label: 'Name',
                field: 'name',
                editor: 'text',
                editOn: 'dblclick'
            },
            // ...
        ]
    }, 'editGrid');
});
```

--------------------------------

### Initializing Grid with SingleQuery Extension in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/extensions/SingleQuery.md

This code snippet demonstrates how to initialize a dgrid Grid with the SingleQuery extension. It requires `dojo/_base/declare`, `dgrid/Grid`, and `dgrid/extensions/SingleQuery`. The grid is configured with `dgrid-autoheight` class, a collection (myStore), and column definitions (myColumns).

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/Grid',
    'dgrid/extensions/SingleQuery'
], function (declare, Grid, SingleQuery) {
    var grid = new (declare([ Grid, SingleQuery ]))({
        className: 'dgrid-autoheight',
        collection: myStore,
        columns: myColumns
    }, 'grid');
    // ...
});
```

--------------------------------

### Initializing dgrid with DijitRegistry Extension in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/extensions/DijitRegistry.md

This code snippet demonstrates how to create a dgrid instance with the DijitRegistry extension. It declares a new class that inherits from OnDemandGrid and DijitRegistry, then instantiates it with a collection and column definitions. The grid is then attached to a DOM node with the ID 'grid'.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/DijitRegistry'
], function (declare, OnDemandGrid, DijitRegistry) {
    var grid = new (declare([ OnDemandGrid, DijitRegistry ]))({
        collection: myStore,
        columns: myColumns
    }, 'grid');
});
```

--------------------------------

### Using the runner reporter for debugging

Source: https://github.com/dojo/dojo1-dgrid/blob/master/test/README.md

This command runs dgrid tests using the 'runner' reporter, which provides more detailed output to the console, useful for debugging test failures. It can be used instead of the 'pretty' reporter, which may erase errors.

```bash
> npx intern config=@chrome reporters=runner
```

--------------------------------

### Initializing dgrid with Selection Module

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/mixins/Selection.md

This code initializes a dgrid with the Selection module, sets the selection mode to 'single', and defines event handlers for 'dgrid-select' and 'dgrid-deselect' events. The event handlers iterate through the selected rows and perform actions based on the selection state.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Selection'
], function (declare, OnDemandGrid, Selection) {
    var grid = new (declare([ OnDemandGrid, Selection ]))({
        selectionMode: 'single',
        // ...
    }, 'grid');
    grid.on('dgrid-select', function (event) {
        // Get the rows that were just selected
        var rows = event.rows;
        // ...

        // Iterate through all currently-selected items
        for (var id in grid.selection) {
            if (grid.selection[id]) {
                // ...
            }
        }
    });
    grid.on('dgrid-deselect', function (event) {
        // Get the rows that were just deselected
        var rows = event.rows;
        // ...
    });
});
```

--------------------------------

### Creating dgrid with ColumnSet Mixin

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This JavaScript code creates a dgrid with column sets using the ColumnSet mixin. It defines the columnSets property with two column sets, each containing columns with specified fields and labels. It also sets the collection for the grid.

```JavaScript
require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/ColumnSet',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dstore/Memory',
    'dojo/domReady!'
], function (declare, OnDemandGrid, ColumnSet, Keyboard, Selection, Memory) {
    // ... create memoryStore here ...

    var grid = new declare([ OnDemandGrid, ColumnSet, Keyboard, Selection ])({
        columnSets: [
            [ // first columnSet
                [
                    { field: 'id', label: 'ID' }
                ]
            ],
            [ // second columnSet
                [
                    { field: 'name', label: 'Name' },
                    { field: 'description', label: 'Description' }
                ]
            ]
        ],
        collection: memoryStore
    }, 'grid');
});
```

--------------------------------

### Declarative dojox/grid Layout

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/migrating/Usage-Comparison.md

This HTML code defines a declarative layout for a dojox/grid/DataGrid. It specifies the store, fields, and widths for the columns in the grid.

```HTML
<table id="grid" data-dojo-type="dojox/grid/DataGrid"
    data-dojo-props="store: objectStore">
    <thead>
        <tr>
            <th field="id" width="10%">ID</th>
            <th field="name" width="20%">Name</th>
            <th field="description" width="70%">Description</th>
        </tr>
    </thead>
</table>
```

--------------------------------

### Basic Stylus Skin Structure for dgrid

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/usage/Customizing-Skins.md

This is the general format for creating new dgrid skins using Stylus. It includes importing necessary modules, defining variables, importing the base skin, and adding extra specific styles.

```Stylus
@require 'nib/gradients'; // Include if you intend to use CSS gradients
@require 'nib/vendor'; // Include for automatic vendor prefixing

// Define variables here

.yourskinclass {
	@import 'dgrid/css/skin/skin'; // Generate styles based on defined variables

	// Include any extra specific styles not covered by skin.styl here
}
```

--------------------------------

### Initializing OnDemandList with dstore collection in JavaScript

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/core-components/OnDemandList-and-OnDemandGrid.md

This code snippet demonstrates how to initialize an OnDemandList with a dstore collection. It overrides the renderRow function to customize how store items are rendered within the list. The collection property is set to myStore, which should be a dstore collection instance.

```JavaScript
require([
    'dgrid/OnDemandList'
], function (OnDemandList) {
    var list = new OnDemandList({
        collection: myStore, // a dstore collection
        renderRow: function (object, options) {
            // Override renderRow to accommodate store items
            var div = document.createElement('div');
            // createTextNode is recommended for inserting data values,
            // to avoid malicious tag injection
            div.appendChild(document.createTextNode(object.myField));
            return div;
        }
    });
});
```

--------------------------------

### Defining a Grid with Column Styling

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/usage/Styling-dgrid.md

This snippet shows how to define a dgrid with specific columns and apply styling using CSS classes. It requires the dgrid/Grid module and renders the grid with the specified column definitions.

```JavaScript
require([ 'dgrid/Grid' ], function (Grid) {
        var grid = new Grid({
            columns: {
                age: 'Age',
                first: 'First Name',
                // ...
            }
        }, 'grid');
        grid.renderArray(someData);
    });
```

--------------------------------

### Throttling Function Call with dgrid/util/misc

Source: https://github.com/dojo/dojo1-dgrid/blob/master/doc/components/utilities/misc.md

This code demonstrates how to use the `throttle` function from the `dgrid/util/misc` module to limit the rate at which a function is called. It requires the `dgrid/util/misc` module. The `throttle` function returns a new function that, when called, will execute the original function at most once per specified delay (in milliseconds).

```JavaScript
require([ 'dgrid/util/misc' ], function (misc) {
    // Produce a new function which will call `myFunction` a maximum of
    // once per second
    var myThrottledFunction = misc.throttle(myFunction, null, 1000);
})
```