saving an editable grid
11 views
Skip to first unread message
j_syk
Aug 25, 2011, 9:45:08 AM8/25/11
to dojango-users
Hello all.
I've been struggling the last couple to get through a fairly simple
(maybe?) implementation of an editable grid with any sort of js
toolkit with Django. Dojango seems like the easiest integration with
Django, and I'm new to javascript, so I have no bias on which js
toolkit with grids to try to use (dojo, jquery, slickgrid, etc).
Here's what I have now.
-A ModelStore linked to a model -- done
-A very basic editable grid being populated by the modelstore -- done
-editing ability by clicking a cell -- done
-saving back to the database -- help!
Right now any changes I make to the store last for as long as I'm on
the page, but I'm not quite sure to save them through Django's ORM. A
save button would be ok, (and I may be able to figure that out), but
I'd really like for changes to immediately update the database.
lots of code:
MODELS
class Test(models.Model):
name = models.CharField(max_length=40)
desc = models.CharField(max_length=100)
STORES
class TestStore(Store):
name = StoreField()
desc = StoreField()
class Meta(object):
objects = Test.objects.all()
label = "test"
if __name__ == '__main__':
store = TestStore()
print store.to_python
VIEWS
## view for displaying grid
## url is /edit-test/
def edit_test(request):
return render_to_response('edit_test.html')
## view for ajax calls
## url is /test_store/
def test_store(request):
if request.method == 'GET':
store = TestStore()
store.set_option('objects', Test.objects.all())
return HttpResponse( '{}&&\n' + store.to_json(),
mimetype='application/json' )
if request.method == 'POST':
data = simplejson.loads(request.POST.get('data'))
#need to iterate over data and save it here?
#how do I get the grid to post after editing a cell?
return HttpResponse('{}&&\n' + store.service(request),
mimetype='application/json' )
HTML/JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/
dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
</script>
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /
>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/
dojox/grid/resources/claroGrid.css";
html, body { width: 100%; margin: 0; } .info { margin:
10px; }
</style>
</head>
<body class=" claro ">
<span dojoType="dojo.data.ItemFileWriteStore" jsId="store3"
url="/test_store/">
</span>
<table dojoType="dojox.grid.DataGrid" jsId="grid3"
store="store3" query="{ name: '*' }"
rowsPerPage="30" clientSort="true" style="width: 300px;
height: 600px;"
rowSelector="20px">
<thead>
<tr>
<th width="150px" field="name"
editable="true">name</th>
<th width="150px" field="desc"
editable="true">desc</th>
</tr>
</thead>
</table>
</body>
</html>
or https://gist.github.com/1170692 for better formatting.
What needs to be done for autosaving? Or even tips on creating a save
button.
Thanks!
I've been struggling the last couple to get through a fairly simple
(maybe?) implementation of an editable grid with any sort of js
toolkit with Django. Dojango seems like the easiest integration with
Django, and I'm new to javascript, so I have no bias on which js
toolkit with grids to try to use (dojo, jquery, slickgrid, etc).
Here's what I have now.
-A ModelStore linked to a model -- done
-A very basic editable grid being populated by the modelstore -- done
-editing ability by clicking a cell -- done
-saving back to the database -- help!
Right now any changes I make to the store last for as long as I'm on
the page, but I'm not quite sure to save them through Django's ORM. A
save button would be ok, (and I may be able to figure that out), but
I'd really like for changes to immediately update the database.
lots of code:
MODELS
class Test(models.Model):
name = models.CharField(max_length=40)
desc = models.CharField(max_length=100)
STORES
class TestStore(Store):
name = StoreField()
desc = StoreField()
class Meta(object):
objects = Test.objects.all()
label = "test"
if __name__ == '__main__':
store = TestStore()
print store.to_python
VIEWS
## view for displaying grid
## url is /edit-test/
def edit_test(request):
return render_to_response('edit_test.html')
## view for ajax calls
## url is /test_store/
def test_store(request):
if request.method == 'GET':
store = TestStore()
store.set_option('objects', Test.objects.all())
return HttpResponse( '{}&&\n' + store.to_json(),
mimetype='application/json' )
if request.method == 'POST':
data = simplejson.loads(request.POST.get('data'))
#need to iterate over data and save it here?
#how do I get the grid to post after editing a cell?
return HttpResponse('{}&&\n' + store.service(request),
mimetype='application/json' )
HTML/JS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/
dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
</script>
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /
>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/
dojox/grid/resources/claroGrid.css";
html, body { width: 100%; margin: 0; } .info { margin:
10px; }
</style>
</head>
<body class=" claro ">
<span dojoType="dojo.data.ItemFileWriteStore" jsId="store3"
url="/test_store/">
</span>
<table dojoType="dojox.grid.DataGrid" jsId="grid3"
store="store3" query="{ name: '*' }"
rowsPerPage="30" clientSort="true" style="width: 300px;
height: 600px;"
rowSelector="20px">
<thead>
<tr>
<th width="150px" field="name"
editable="true">name</th>
<th width="150px" field="desc"
editable="true">desc</th>
</tr>
</thead>
</table>
</body>
</html>
or https://gist.github.com/1170692 for better formatting.
What needs to be done for autosaving? Or even tips on creating a save
button.
Thanks!
Reply all
Reply to author
Forward
0 new messages