Blogger Template by Blogcrowds.

Introduction

  • Implementation of dojo datagrid with editable cells, update cell values with the use of dojo xhrget method, then save the edited datagird and send data to server as josn format to update data in database.
Jsonformat
{ "identifier": "id", "label": "uniqueid", "items": [ {id: '1',image:'jai.png',name: 'Jayapal',address:'Trivandrum,Kerala,India',gender:'Male'}] }
DataGrid.html
  • First import necessary css and script for dojo
<style type="text/css">
@import "/{{MEDIA_URL}}/js/dojo/dojox/grid/_grid/tundraGrid.css";
@import "/{{MEDIA_URL}}/js/dojo/dijit/themes/tundra/tundra.css";
@import "/{{MEDIA_URL}}/js/dojo/dojo/resources/dojo.css";
@import "/{{MEDIA_URL}}/js/dojo/dojox/grid/resources/Grid.css";
@import "/{{MEDIA_URL}}/js/dojo/dojox/grid/resources/tundraGrid.css";
</style>
<script type="text/javascript" src="/PathToDojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
  • Import select- All, None and Toggle function which is written by myself.
<script type="text/javascript" src="/{{MEDIA_URL}}/js/GridFunction.js"></script>
  • GridFunction.js

/*Function for select ALL in dojo grid*/
function SelectAll()
{
var grid=dijit.byId('GridTable');
var gridstore=dijit.byId('GridTable').store;
gridstore.fetch({onComplete:function(items,request)
{
var i;
for (i=0;i<grid.rowCount;i++)
{
gridstore.setValue(items[i],"Select" ,true);
}
}
});
}


/*Function for select NONE in dojo grid*/
function SelectNone()
{
var grid=dijit.byId('GridTable');
var gridstore=dijit.byId('GridTable').store;
gridstore.fetch({onComplete:function(items,request)
{
var i;
for (i=0;i<grid.rowCount;i++)
{
gridstore.setValue(items[i],"Select" ,false);
}
}
});
}


/*Function for select Toggle in dojo grid*/
function Toggle()
{
var grid=dijit.byId('GridTable');
var gridstore=dijit.byId('GridTable').store;
gridstore.fetch({onComplete:function(items,request)
{
var i;
for (i=0;i<grid.rowCount;i++)
if (gridstore.getValue(items[i],"Select")==true)
{
gridstore.setValue(items[i],"Select" ,false);
}
else if (gridstore.getValue(items[i],"Select")==false)
{
gridstore.setValue(items[i],"Select" ,true);
}
}
});
}
  • Function for store the datagrid after editing the diffeent cells in the data grid and data will be send to the server as json format.
<script type="text/javascript">
var fillStore = function(){
dijit.byId('GridTable').store._saveEverything = function(saveCompleteCallback, saveFailedCallback, newFileContentString){
console.log(newFileContentString);
dojo.xhrPost({
url: "/yourproject/application/",
postData: dojo.toJson(dojo.fromJson(newFileContentString)),
error: saveFailedCallback,
load: function(response, ioArgs)
{
alert(response) ;
dijit.byId('GridTable').store.save();
}
,
});
}
}

dojo.addOnLoad(fillStore);
</script>
  • Function for embedded image in datagrid.
<script type="text/javascript">
function CreateImage(value)
{

var imgtag=" <img title=\"Click here to zoom the image \" style=\"cursor:pointer; \" onclick= \" return ImagePopUp('"+value+"');\" src='/{{MEDIA_URL}}/Thumbnails/"+value+"' alt='NA' >";
return imgtag;
}
</script>
  • Html content along with ItemFileWriteStore for load the data json from the url mentioned.
  • You can find a script written just after table tag. That script will be triggered when any cell is edited in datagrid. The 'onApplyCellEdit' event returns New value, RowIndex, fieldtype. You can find more events here.
  • If you need to enable edit any cell, then you need to give editable="true". You need to double click the cell for edit. If you want to make the cells alwys as editable field then we need to give as alwaysEditing='true'.
  • For embedded image in datagrid then we need to call a javascript while loading. For that we used formatter="CreateImage" which will return image tag. Formatter A JavaScript function that is called which returns the value to be shown in the cell. The value from the data store is passed as a parameter to the function. The returned value that is inserted into the page can be any legal HTML
<BODY class="tundra"><span dojoType="dojo.data.ItemFileWriteStore" jsId="store" url="/yourpath/getJson/">
</span>
<div id="SelectMenu">Select <a href="#" onclick="SelectAll();"> All </a><a href="#" onclick="SelectNone();"> None </a> <a href="#" onclick="Toggle();">Toggle </a></div>
<table id="GridTable" dojoType="dojox.grid.DataGrid"
jsId="grid6"
store="store"
query="{ uniqueid: '*' }"
rowsPerPage="20"
clientSort="true"
style="width: 100%;"
height="85%"
rowSelector="20px">
<script type="dojo/connect" event="onApplyCellEdit" args="Name,rowIndex,fieldType">

if (fieldType=="Name")
{
dojo.xhrGet( {
url: "/URL/getAddress/"+Name+"/",
load: function(data){
if (data)
{
if (data== -1)
{
var item = grid6.getItem(rowIndex);
var type = store.getValue(item,"address",null);
rowIndex.customStyles += "color:red;";
}
else
{
gridstore=dijit.byId('GridTable').store
gridstore.fetch({onComplete:function(items,request)
{
gridstore.setValue(items[rowIndex],"address" ,data);

}
});
}
}
else { dojo.byId("test").innerHTML = data;}

},
error: function(data){ console.debug("An error occurred: ", data);},
timeout: 10000,
});
}

</script>
<thead>
<tr>
<th width="1%" field="Select" name="Select" width="5%" editable="true" cellType="dojox.grid.cells.Bool">
<div dojoType="dijit.form.CheckBox" id="Select" name="Select" value="false" />
</th>
<th width="1%" field="id">Sl No</th>
<th width="5%" alwaysEditing='true' field="name" alwaysEditing='true' editable="true">Name</th>
<th width="5%" formatter="CreateImage" field="image">Image</th>
<th width="10%" alwaysEditing='true' editable="true" field="address">Address</th>
<th width="8%" alwaysEditing='true' field="gender" cellType="dojox.grid.cells.Select"
options="Select,Male,Female"
editable="true" >Gender</th>
</tr>
</thead>
</table>
<center><button dojoType="dijit.form.Button" onclick="dijit.byId('GridTable').store.save();">Save Selected items</button></center>
Final html page looks like
<style type="text/css">
@import "/{{MEDIA_URL}}/js/dojo/dojox/grid/_grid/tundraGrid.css";
@import "/{{MEDIA_URL}}/js/dojo/dijit/themes/tundra/tundra.css";
@import "/{{MEDIA_URL}}/js/dojo/dojo/resources/dojo.css";
@import "/{{MEDIA_URL}}/js/dojo/dojox/grid/resources/Grid.css";
@import "/{{MEDIA_URL}}/js/dojo/dojox/grid/resources/tundraGrid.css";
</style>

<script type="text/javascript" src="/{{MEDIA_URL}}/js/GridFunction.js"></script>
<script type="text/javascript" src="/PathToDojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
// this function is used to store the edited datagrid store and sent data to sever in json format
var fillStore = function(){
dijit.byId('GridTable').store._saveEverything = function(saveCompleteCallback, saveFailedCallback, newFileContentString){
console.log(newFileContentString);
dojo.xhrPost({
url: "/yourproject/application/",
postData: dojo.toJson(dojo.fromJson(newFileContentString)),
error: saveFailedCallback,
load: function(response, ioArgs)
{
alert(response) ;
dijit.byId('GridTable').store.save();
}
,
});
}
}

dojo.addOnLoad(fillStore);
</script>
<script type="text/javascript">
function CreateImage(value)
{

var imgtag=" <img title=\"Click here to zoom the image \" style=\"cursor:pointer; \" onclick= \" return ImagePopUp('"+value+"');\" src='/{{MEDIA_URL}}/Thumbnails/"+value+"' alt='NA' >";
return imgtag;
}
</script>

<span dojoType="dojo.data.ItemFileWriteStore" jsId="store" url="/rlvd/getViolationJson/">
</span>
<BODY class="tundra">
<div id="SelectMenu">Select <a href="#" onclick="SelectAll();"> All </a><a href="#" onclick="SelectNone();"> None </a> <a href="#" onclick="Toggle();">Toggle </a></div>
<table id="GridTable" dojoType="dojox.grid.DataGrid"
jsId="grid6"
store="store"
query="{ uniqueid: '*' }"
rowsPerPage="20"
clientSort="true"
style="width: 100%;"
height="85%"
rowSelector="20px">
<script type="dojo/connect" event="onApplyCellEdit" args="Name,rowIndex,fieldType">

if (fieldType=="Name")
{
dojo.xhrGet( {
url: "/URL/getAddress/"+Name+"/",
load: function(data){
if (data)
{
if (data== -1)
{
var item = grid6.getItem(rowIndex);
var type = store.getValue(item,"address",null);
rowIndex.customStyles += "color:red;";
}
else
{
gridstore=dijit.byId('GridTable').store
gridstore.fetch({onComplete:function(items,request)
{
gridstore.setValue(items[rowIndex],"address" ,data);

}
});
}
}
else { dojo.byId("test").innerHTML = data;}

},
error: function(data){ console.debug("An error occurred: ", data);},
timeout: 10000,
});
}

</script>
<thead>
<tr>
<th width="1%" field="Select" name="Select" width="5%" editable="true" cellType="dojox.grid.cells.Bool">
<div dojoType="dijit.form.CheckBox" id="Select" name="Select" value="false" />
</th>
<th width="1%" field="id">Sl No</th>
<th width="5%" alwaysEditing='true' field="name" alwaysEditing='true' editable="true">Name</th>
<th width="5%" formatter="CreateImage" field="image">Image</th>
<th width="10%" alwaysEditing='true' editable="true" field="address">Address</th>
<th width="8%" alwaysEditing='true' field="gender" cellType="dojox.grid.cells.Select"
options="Select,Male,Female"
editable="true" >Gender</th>
</tr>
</thead>
</table>
<center><button dojoType="dijit.form.Button" onclick="dijit.byId('GridTable').store.save();">Save Selected items</button></center>
Views.py
def SaveJson(request)
    if request.POST:
         getJson=request.POST# get the json from request
        qJson=getJson.copy()# copy the request.POST
         jsonValues=qJson.items()[0][0]
         json=simplejson.loads(jsonValues)# read the json using simplejson
         for item in json["items"]:
            data=SomeModel(name=str(item['name']),address=str(item['address']))
             data.save()
    return HttpResponse("Updated Successfully")

0 Comments:

Post a Comment



Newer Post Older Post Home