Previous topic

Adding and Deleting data

Next topic

Filtering data

This Page

Editing dataΒΆ

Grid allows you to edit your data easily and send the changed values back to your server

First, you have to set a editor for each cell, you would like to edit:

<script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
</script>
<span dojoType="dojo.data.ItemFileWriteStore"
    jsId="store3" url="/_static/dojo/dijit/tests/_data/countries.json">
</span>

<div>
    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.
</div>

<table dojoType="dojox.grid.DataGrid"
    jsId="grid3"
    store="store3"
    query="{ name: '*' }"
    rowsPerPage="20"
    clientSort="true"
    style="width: 400px; height: 200px;"
    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>
<style type="text/css">
    @import "/_static/dojo/dijit/themes/nihilo/nihilo.css";
    @import "/_static/dojo/dojox/grid/resources/nihiloGrid.css";
</style>