jqgrid is only loading some of the columns. I've not been able to find a pattern as to why some columns load while others do not. When the column is edited, it does update the database. The fields that do load will refresh when edited. The first column, acresHarvested, does not show up. There are others that do not show up, as well.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/css/ui.jqgrid.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
$("document").ready(function() {
jQuery("#prodgrid").jqGrid({
url:'cfc/productionfacts.cfc?method=jqgridCP&cropprofileid=<cfoutput>#url.cropprofileid#</cfoutput>',
width:"auto",
height:"auto",
datatype: "json",
colNames:['Acres Harvested','ID','Production Year', 'USRank', 'US Acres', 'Acres Planted', 'Production', 'Production Value', 'productionCostsPerAcre', 'stateAvgPerAcre', 'natlAvgPerAcre', 'Price', 'Per Acre Value', 'Growers', 'Unit'],
colModel:[
{name:'acresHarvested',index:'acresHarvested', search: true, editable:true, width:100},
{name:'cpproductionfactid',index:'cpproductionfactid', search: true, editable:false, width:50 },
{name:'productionyear',index:'productionyear', search: true, editable: true, width:150},
{name:'usrank',index:'usrank', search: true, editable:true, width:50},
{name:'USAcresPercent',index:'USAcresPercent', search: true, editable:true, width:50},
{name:'acresPlanted',index:'acresPlanted', search: true, editable:true, width:100},
{name:'production',index:'production', search: true, editable:true, width:100},
{name:'productionvalue',index:'productionvalue', search: true, editable:true, width:100},
{name:'productionCostsPerAcre',index:'productionCostsPerAcre', search: true, editable:true, width:100},
{name:'stateAvgPerAcre',index:'stateAvgPerAcre', search: true, editable:true, width:100},
{name:'natlAvgPerAcre',index:'natlAvgPerAcre', search: true, editable:true, width:100},
{name:'price',index:'price', search: true, editable:true, width:100},
{name:'perAcreValue',index:'perAcreValue', search: true, editable:true, width:100},
{name:'growers',index:'growers', search: true, editable:true, width:100},
{name:'unit',index:'unit', search: true, editable:true, width:100}
],
jsonReader: {repeatitems: false, id: "cpproductionfactid"},
rowNum:10,
rownumbers:true,
rowList:[10,20,30],
sortname: 'productionyear',
viewrecords: true,
recordtext: "Record {0} - {1} of {2}",//Pager information to show
sortorder: "desc",
editurl:"cfc/productionfacts.cfc?method=editProdFact&cropprofileid=<cfoutput>#url.cropprofileid#</cfoutput>",
caption:"Production Facts",
pager: '#pager'
});
jQuery("#prodgrid").jqGrid('navGrid', '#pager', {edit: true, add: true, del: false, search: false},
{closeAfterEdit: true},
{closeAfterAdd: true}
);
jQuery("#prodid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
//reloadAfterSubmit: true, closeOnEscape: true,afterSubmit:processEdit,closeAfterEdit: true,closeAfterSubmit: true}
jQuery("#prodgrid").jqGrid('filterToolbar',{searchOnEnter:false});
});
</script>
<table id="prodgrid"></table>
<div id="pager"></div><br>
</body>
</html>
The colModel names are case sensitive and need to match what the case of the JSON. As stated in another response, Fiddler helps to view the returned JSON.
Related
I am trying to convert data under django pandas dataframe to json and then to table using pandas_bootstrap_table.
The error in browser console is "uncaught Syntax error: unexpected token {"
Here is my view function
def productview(request):
qs = npmargin.objects.filter(user=selected_user)
df = convert_to_dataframe(qs, fields=['gross_profit_margin_2015',])
json = df.to_json(orient='records')
context = {
"data": "json"
}
return render (request, 'operating/chart2.html', context)
Below is charts2.html
{% load static %}
<script src="{%static "js/bootstrap.min.js"%}"></script>
<script src="{%static "js/jquery-slim.min.js"%}"></script>
<script src="{%static "js/bootstrap-table.js"%}"></script>
<script src="{%static "js/pandas_bootstrap_table.js"%}"></script>
<table id='datatable'></table>
The Json data from the above view function is sent to pandas_boostrap_table.js. The browser shows the unexpected token "{" error at the data:{{data|safe}}
$(document).ready(function(){
$('#datatable').bootstrapTable({
striped: true,
pagination: true,
showColumns: true,
showToggle: true,
showExport: true,
sortable: true,
paginationVAlign: 'both',
pageSize: 25,
pageList: [10, 25, 50, 100, 'ALL'],
data:{{data|safe}}, //"The browser console shows error here"
});
});
The code in js/pandas_bootstrap_table.js isn't being parsed by the Django templating engine. The means {{ data|safe }} isn't being substituted with the data value from the view.
You'll want to move the code from pandas_bootstrap_table.js to someplace where the Django templating engine will substitute the value of data with its actual contents. Something to the effect of:
# views.py
def productview(request):
qs = npmargin.objects.filter(user=selected_user)
df = convert_to_dataframe(qs, fields=['gross_profit_margin_2015',])
json = df.to_json(orient='records')
context = {
"data": json # be sure to remove the quotes around json
}
return render (request, 'operating/chart2.html', context)
# chart2.html
{% load static %}
<script src="{%static "js/jquery-slim.min.js"%}"></script>
<script src="{%static "js/bootstrap.min.js"%}"></script>
<script src="{%static "js/bootstrap-table.js"%}"></script>
<table id='datatable'></table>
<script>
$(document).ready(function(){
$('#datatable').bootstrapTable({
striped: true,
pagination: true,
showColumns: true,
showToggle: true,
showExport: true,
sortable: true,
paginationVAlign: 'both',
pageSize: 25,
pageList: [10, 25, 50, 100, 'ALL'],
data: {{data|safe}}, // view source in your browser to see the value of data being printed out
});
});
</script>
I try to display week numbers but nothing happens
I put weeknumber in the javascript file
$(document).ready(function() {
$('#calendar').fullCalendar({
weekNumbers: true,
height:400,
header: {
left: 'prev,next today, save',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
'defaultView': 'month',
editable: true,
.....
what is this problem ?
Did you import necessary CSS and js for it ?
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
moreover
weekNumbers:
If set to true, week numbers will be displayed in a separate left column in the month/basic views as well as at the top-left corner of the agenda views. See Available views
On my route I have a list of customers, and a form to add new ones.
I create an empty record in the setupController hook. This record is bound to the form. My idea was: on saving the record I make a (deep) copy of it, save the copy, then reset the record to empty state via http://emberjs.com/api/data/classes/DS.Model.html#method_rollbackAttributes.
Looks like it wont work, because
If the model isNew it will be removed from the store.
How should I handle this scenario? What is the best practice?
I made a JsBin to demonstrate the problem. http://jsbin.com/weqotoxiwe/3/edit?html,js,output.
Try to type something, then save it. (It should empty the record) then type again. It produce the following error in console:
Uncaught Error: Attempted to handle event didSetProperty on while in state root.deleted.saved. Called with {name: name, oldValue: sds, originalValue: undefined, value: sdsd}.
Here is the snippet:
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.ApplicationAdapter = DS.RESTAdapter;
App.Customer = DS.Model.extend({
name: DS.attr('string'),
city: DS.attr('string')
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('customer');
},
setupController: function(controller, model) {
this._super(controller, model);
var empty = this.store.createRecord('customer');
controller.set('empty', empty);
},
actions: {
save: function(record) {
/*
record.copy().then(function(copy){
copy.save();
})*/
record.rollbackAttributes();
}
}
});
/*---------------Data------------------*/
var customers = {
"customers": [{
"id": 1,
"name": "Terry Bogard",
city: 'Delaware'
}, {
"id": 2,
"name": "Joe Higashi",
city: 'Tokyo'
}, {
"id": 3,
"name": "Richard Meyer",
city: 'Albuquerque'
}, {
"id": 4,
"name": "Kim Kaphwan",
city: 'Seoul'
}, {
"id": 5,
"name": "Ryo Sakazaki ",
city: 'Tokyo'
}, {
"id": 6,
"name": "Takuma Sakazaki ",
city: 'Tokyo'
}, ]
};
$.mockjax({
url: '/customers',
dataType: 'json',
responseText: customers
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/beta/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<h2>Table example</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{input value=empty.name}}
<button {{action 'save' empty}}>Save</button>
{{#each model as |record|}}
<div>{{record.name}}</div>
{{/each}}
</script>
</body>
</html>
Update
In my application I handle the all saves in one central place, in application route. Usually I use http://emberjs.jsbin.com/jipani/edit?html,js,output to send the action up to the route.
I would save the record bound to the form (not a deep copy of it), and then create a new record and attach it to the form. No need to mess with deep copying or rolling back.
You should do this all on the Controller (coffeescript) -
newEmpty: (->
empty = #store.createRecord('customer')
#set('empty', empty)
).on('init')
actions:
saveEmpty: ->
#get('empty').save().then =>
#newEmpty()
Note that on('init') is needed to run newEmpty when the controller is initialized.
set kendo template condtion when id is null
<div id="grid">
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td> #= id #</td>
<td> #= FirstName # </td>
<td> #= LastName # </td>
</tr>
</script>
<script id="detailTemplate" type="text/x-kendo-tmpl">
<p>detail stuff</p>
</script>
</div>
data source :
dataSource: {
data: [
{
id:"",
FirstName: "Joe",
LastName: "Smith"
},
{
id:"1",
FirstName: "Jane",
LastName: "Smith"
}]
},
here is first id is null
i want to set there some text like TEST
how can i do this.
thanks.
here is jsfiddle
Define a template for the id as:
<script id="idTemplate" type="text/x-kendo-tmpl">
# if (id) { #
#= id #
# } else { #
TEST
# } #
</script>
and then in the columns definition do:
columns:[
{
field: "id",
title: "id",
template: $("#idTemplate").html()
},
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}
],
Your JSFiddle modified using this idea: http://jsfiddle.net/OnaBai/yzKqV/184/
NOTE: Defining a rowTemplate when using details is not that easy since you template has to deal with drawing the handle for opening details.
I have a Dojo Data Grid for displaying contact information that is showing values for only two columns: "model" and "pk". The other columns are blank, probably because the JSON response from the server puts the other name/value pairs inside of "fields":
[{"pk": 1, "model": "accounting.contacts", "fields": {"mail_name": "Andy", "city": "Grand Rapids", "zip": "49546", "country": "US", "state": "MI"}}]
What is the best way to get all my fields to show up in the grid?
Here's the relevant view in Django:
def contacts(request):
json_serializer = serializers.get_serializer("json")()
json_contacts = json_serializer.serialize(Contacts.objects.all(), ensure_ascii=False)
return HttpResponse(json_contacts, mimetype="application/json")
And here's my Dojo page:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
data-dojo-config="isDebug: true,parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.store.JsonRest");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ObjectStore");
dojo.ready(function(){
objectStore = new dojo.store.JsonRest({target:"/contacts/"});
//alert(objectStore);
dataStore = new dojo.data.ObjectStore({objectStore: objectStore});
//alert(dataStore);
layoutGridContacts = [{
field: 'mail_name',
name: 'Name',
width: '200px'
},
{
field: 'model',
name: 'DB Table',
width: '100px'
...
}];
gridContacts = new dojox.grid.DataGrid({
query: {
name: '*'
},
store: dataStore,
clientSort: true,
structure: layoutGridContacts
}, dojo.byId("containerGridContacts"));
gridContacts.startup();
});
</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/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table {margin: 0; } html, body { width: 100%; height: 100%;
margin: 0;}
</style>
</head>
<body class="claro">
<div id="containerGridContacts" style="width: 100%, height: 100%;">
</div>
</body>
Thanks.
This is really a question of, "How do I interact with a javascript object?" Given the JSON in your question, and assuming you assigned it to the variable obj, you could access mail_name with obj[0]['fields']['mail_name'] or using dot notation, obj[0].fields.mail_name. I haven't used Dojo, but I'd wager you just need to set fields.mail_name as the field in layoutGridContacts.
I was able to get the server to produce a JSON response that does not contain nested objects, so the Dojo Store was able to use it. To do this I changed my view to:
def contacts(request):
all_contacts = list(iter(Contacts.objects.values()))
json_contacts = simplejson.dumps(all_contacts)
return HttpResponse(json_contacts, mimetype="application/json")
Use "fields." in front of your field identifier to access the properties inside fields:
layoutGridContacts = [{
field: 'fields.mail_name',
name: 'Name',
width: '200px'
},
...
You can use formatter method to retrieve the data. For your example it will be something like below
{name:"Name",
field: "fields",
width: "20%",
cellStyles:"background-color:#e3690b;",
formatter: function(field){
if(!field){return;}
return field.mail_name;
}
}