How to make dojo datagrid to have editable row data, sortable and pagination

StackOverflow https://stackoverflow.com/questions/11078314

Question

I have a dojo datagrid with datastore of json type. I have already accomplished to display data fetched from mysql database. What I would like to do is to allow pagination, make row data editable and update the edited data to the database. Here's what I have got so far:

<style type="text/css">
    @import "dojoroot/dijit/themes/claro/claro.css";
    @import "dojoroot/dojo/resources/dojo.css";
    @import "dojoroot/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
    @import "dojoroot/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js" data-dojo-config="async: true, isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">

require(["dojo/store/JsonRest"], function(JsonRest){
    myStore = new JsonRest({target:"jsonExample.php"});
});
require([
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/data/ObjectStore",
"dojo/domReady!",
"dijit/form/Form"
], function(DataGrid, ObjectStore){
grid = new DataGrid({
store: dataStore = ObjectStore({objectStore: myStore}),
editable:true,
structure: [
    {name:"ID", field:"writer_id", width: "50px"},
    {name:"Writer's Name", field:"writer_name", width: "200px", editable: true},
    {name:"Writer's Email", field:"writer_email", width: "200px", editable: true}
],
//declare usage of plugins
plugins: {
    pagination: {
        sizeSwitch: false,
        defaultPageSize: 10
    }
},
}, "target-node-id"); // make sure you have a target HTML element with this id
grid.startup();
});
</script>

jsonExample.php to fetch data from mysql and convert the data to json format

<?php
$db=mysql_connect("localhost","root","") or die("could not connect to mysql server");
mysql_select_db("demo",$db) or die("could not connect to database");
$query="SELECT * FROM writers";
$resultSet=mysql_query($query,$db);
$arr = array();
while($row = mysql_fetch_object($resultSet)){               
    $arr[] = $row;
}
$jsonStr = json_encode($arr);
mysql_close($db);
echo "{$jsonStr}";
?>

I get following error in my javascript console this.option is undefined this.defaultPage=this.option.defaultPage>=1?parseInt(this.option.defaultPage,10):1;

OTHER TIPS

To make your grid editable, You should set your grid layout (structure) column editable, like this:

structure: [
    {name:"ID", field:"writer_id", width: "50px"},
    {name:"Writer's Name", field:"writer_name", width: "200px", editable: true, type: dijit.form.TextBox}, //make editable and use input
    {name:"Writer's Email", field:"writer_email", width: "200px", editable: true, type: dijit.form.Textarea} //make editable and use textarea
]

To enable pagination, you have to use dojox/grid/EnhancedGrid instead of DataGrid and load a plugin named dojox/grid/enhanced/plugins/Pagination.

Then declare the usage of pagination plugin like this:

grid = new dojox.grid.EnhancedGrid({
    store: dataStore = ObjectStore({objectStore: myStore}),
    editable:true,
    structure: [
        {name:"ID", field:"writer_id", width: "50px"},
        {name:"Writer's Name", field:"writer_name", width: "200px", editable: true},
        {name:"Writer's Email", field:"writer_email", width: "200px", editable: true}
    ],
    //declare usage of plugins
    plugins: {
        pagination: {
            sizeSwitch: false,
            defaultPageSize: 10
        }
    }
}, "target-node-id")

After that, since you are using JsonRestStore, you have to implement the sort and pagination logic at back end using php code.

The sort and page info are passed to backend via request header in the ajax request of the grid. So all you need is to parse the sort and page header and response correct json data of your models. See this tutorial for more examples and details.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top