Dojo- Table grid

Dojo- Table grid

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
    <body class=" claro  dijit_a11y ">
        <span dojoType="dojo.data.ItemFileWriteStore" jsId="store3" data="storeData">
        </span>
        <p class="info">
            This example shows, how to make the column "Type" editable. In order to
            select a new value, you have to double click on the current value in the
            second column.
        </p>
        <table dojoType="dojox.grid.DataGrid" jsId="grid3" store="store3" query="{ name: '*' }"
        rowsPerPage="20" clientSort="true" style="width: 100%; height: 300px;"
        rowSelector="20px">
            <thead>
                <tr>
                    <th width="200px" field="name">
                        Country/Continent Name
                    </th>
                    <th width="auto" field="type" cellType="dojox.grid.cells.Select" options="country,city,continent"
                    editable="true">
                        Type
                    </th>
                </tr>
            </thead>
        </table>
    </body>

CSS

html, body { width: 100%; margin: 0; } .info { margin: 10px; }
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }

JavaScript

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");

var storeData = {
    identifier: 'id',
    label: 'name',
    items: [
            { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                    timezone: '-1 UTC to +4 UTC',
                    children:[{_reference:'EG'}, {_reference:'KE'}, {_reference:'SD'}] },
                { id: 'EG', name:'Egypt', type:'country' },
                { id: 'KE', name:'Kenya', type:'country',
                        children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
                    { id: 'Nairobi', name:'Nairobi', type:'city' },
                    { id: 'Mombasa', name:'Mombasa', type:'city' },
                { id: 'SD', name:'Sudan', type:'country',
                        children:{_reference:'Khartoum'} },
                    { id: 'Khartoum', name:'Khartoum', type:'city' },
                { id: 'AS', name:'Asia', type:'continent',
                        children:[{_reference:'CN'}, {_reference:'IN'}, {_reference:'RU'}, {_reference:'MN'}] },
                    { id: 'CN', name:'China', type:'country' },
                    { id: 'IN', name:'India', type:'country' },
                    { id: 'RU', name:'Russia', type:'country' },
                    { id: 'MN', name:'Mongolia', type:'country' },
                { id: 'OC', name:'Oceania', type:'continent', population:'21 million',
                        children:{_reference:'AU'}},
                { id: 'AU', name:'Australia', type:'country', population:'21 million'},
                { id: 'EU', name:'Europe', type:'continent',
                        children:[{_reference:'DE'}, {_reference:'FR'}, {_reference:'ES'}, {_reference:'IT'}] },
                { id: 'DE', name:'Germany', type:'country' },
                { id: 'FR', name:'France', type:'country' },
                { id: 'ES', name:'Spain', type:'country' },
                { id: 'IT', name:'Italy',...