Skip to Content | Skip to Navigation

Programmatically creating a DataGrid

This example shows how to create a simple Grid programmatically.

<script type="text/javascript">
    // our test data store for this example:
    var store4 = new{ url: '/_static/dojo/dojox/grid/tests/support/movies.csv' });
        // set the layout structure:
        var layout4 = [
            { field: 'Title', name: 'Title of Movie', width: '200px' },
            { field: 'Year', name: 'Year', width: '50px' },
            { field: 'Producer', name: 'Producer', width: 'auto' }
        // create a new grid:
        var grid4 = new dojox.grid.DataGrid({
            query: { Title: '*' },
            store: store4,
            clientSort: true,
            rowSelector: '20px',
            structure: layout4
        }, document.createElement('div'));
        // append the new grid to the div "gridContainer4":
        // Call startup, in order to render the grid:
<div id="gridContainer4" style="width: 400px; height: 200px;"></div>
<style type="text/css">
    @import "/_static/dojo/dojox/grid/resources/Grid.css";
    @import "/_static/dojo/dojox/grid/resources/nihiloGrid.css";
    .dojoxGrid table {
        margin: 0;

Note the grid.startup() command after constructing the DataGrid. Earlier development versions of DataGrid didn’t require this but as of 1.2.0b1, you must call startup() as you would with other dijits, or the grid will not render.