I have this code that needs to be display the total sum of few columns, The JQgrid works fine in normal column value. But when that column value is linked, It shows Nan
grid.jqGrid({
data: mydata,
datatype: "local",
height: containerHeight,
width: containerWidth,
colNames:[
//'Region/Purchaser Name',
'Order No. / Invoice No.','PO No.','Ship To','Ship To Attention','Address','City','State / Zip','Requested Ship Date','Shipped Date','Total Qty Ordered','Shipped to WF','Open Qty'],
colModel:[
//{name:'REGION',index:'REGION', width:20},
{name:'DUMMYMACNO',index:'MACNO', width:19, align:"center"},
{name:'PONUM',index:'PONUM', width:17},
{name:'SHIPTO',index:'SHIPTO', width:17},
{name:'ATTN',index:'ATTN', width:19,align:"center",formatter:nullFormatter},
{name:'ADDRESS',index:'ADDRESS', width:19},
{name:'CITYJ1',index:'CITYJ1', width:10},
{name:'STZIP',index:'STZIP', width:10},
{name:'SDATE',index:'SDATE', width:10},
{name:'INVDATE',index:'INVDATE', width:10},
{name:'TQO',index:'TQO', width:4, align:"center"},
{name:'DQTY',index:'DQTY', width:5, search:false, align:"center", sorttype:"float", formatter:function(cellvalue, options, rowObject){return ''+cellvalue+'';},classes: 'blue-text'},
{name:'OQO',index:'OQO', width:6, search:false, align:"center", sorttype:"float", formatter:function(cellvalue, options, rowObject){return ''+cellvalue+'';}},
],
rowNum:100,
rowList : [100,150,200],
loadonce:true,
mtype: "GET",
casesensitive: true,
rownumbers: true,
rownumWidth: 40,
ignoreCase: true,
gridview: true,
pager: '#locationlistpagination',
sortname: 'SONO',
viewrecords: true,
loadComplete: function() {
$("tr.jqgrow:odd").addClass('jqgrow-alt-row');
},
sortorder: "asc",
footerrow: true,
gridComplete: function() {
var colsum = 0;
var colsum1 = 0;
var colSum2 = 'Total';
var colSum4 = 'Total';
var colSum = grid.jqGrid('getCol', 'DQTY', true, 'sum');
var colSum4 = grid.jqGrid('getCol', 'OQO', true, 'sum');
var colSum1 = grid.jqGrid('getCol', 'TQO', false, 'sum');
grid.jqGrid('footerData', 'set', { OQO: colSum });
grid.jqGrid('footerData', 'set', { DQTY: colSum4 });
grid.jqGrid('footerData', 'set', { TQO: colSum1 });
grid.jqGrid('footerData', 'set', { SDATE : colSum2 });;
}
})
The query works fine in ColSum1 and colSum2, but its shows Nan in ColSum and Colsum4. Can any one have a way to solve this
The getCol method sum a values which are numbers in grid, after they are formatted from the formatter. The values where you get NaN are not numbers, but links after formatting. In order this to work correctly you should define a unformat function which will convert back the link to a number. See the Guriddo docs here
Related
I have 4 columns in datatables and wanted to export into xlsx file 2 of the column, one column is name and phone, but after export, one of the column (phone) will show millions as 1,000,000 for example. I wish that phone number column to be treated as text but failed many times
This is my code and loading the data from json text using php
$(document).ready(function()
{
$('#example').DataTable( {
"ajax": "json.php",
"pageLength": 100,
"deferRender": true,
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, 100, 200, 500, 1000],
[ '10 rows', '25 rows', '50 rows', '100 rows', '200 rows' , '500 rows', '1000 rows']
],
buttons: ['pageLength','copy',
{extend: 'excelHtml5',
filename: 'export',
title: null,
exportOptions: {
columns: [ 1, 2 ],
format: {
body: function (data, row, column, node )
{
return column === 2 ? "\0" + data : data;
//return column === 2 ? = & "" + data : data;
}
},
}
}
],
} );
} );
Do we have any way to delete a column in dojox/grid/EnhancedGrid. Please let us know if there is any solution for this.
Please find my sample grid.
Details: it creates a dojox/grid/EnhancedGrid and has an action associated with clicking a header row. What action can I add to delete the column?
var dataStore = new ObjectStore({objectStore: objectStoreMemory});
// grid
grid = new EnhancedGrid({
selectable: true,
store: dataStore,
structure : [ {
name : "Country",
field : "Country",
width : "150px",
reorderable: false,
editable : true
}, {
name : "Abbreviation",
field : "Abbreviation",
width : "120px",
reorderable: false,
editable : true
}, {
name : "Capital",
field : "Capital",
width : "100%",
reorderable: false,
editable : true
} ],
rowSelector: '20px',
plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 5,
position: "bottom"
}
},
dodblclick: function() {
alert("Header clicked");
}
}, "grid");
grid.startup();
you need to use the method
grid.setStructure(newLayout);
or
grid.set('structure',newLayout);
here newLayout is the layout that you need to create without the columns that you need.
Hope this helps.
Why is it that when I put a dynamic array value in the ticks, It always starts with zero but when I specify a min and max in my flot options I get the correct output? any views on this?
I commented the one using min/max:
$(function () {
var data = [ [
[1301634000000, 315.71], //Apr 1, 2011
[1302238800000, 209.21], //Apr 8, 2011
[1302843600000, 420.36], //Apr 15
[1303448400000, 189.86], //4/22
[1304053200000, 314.93], //4/29
[1304658000000, 279.71], //5/6
[1305262800000, 313.34], //5/13
[1305867600000, 114.67], //5/20
[1306472400000, 315.58] //5/27
] ];
var ticks = [];
var ticker=[315.71,209.21,420.36,189.86,314.93,279.71,313.34,114.67,315.58];
for (var i = 0; i < data[0].length; i++) {
ticks.push(data[0][i][0]);
}
$.plot($("#placeholder"), data, {
xaxis: {
mode: "time",
ticks: ticks,
timeformat: "%m/%d",
min: (new Date(2011, 2, 31)).getTime(),
max: (new Date(2011, 4, 31)).getTime()
},
yaxis: {
ticks: ticker
/*min: 114.67,
max: 420.36*/
},
series: {
lines: { show: true },
points: { show: true }
},
grid: {
hoverable: true,
clickable: true
}
});
});
and here is my Fiddle
I notice that in this example, it's not just formatted correctly and not properly scaled so entirely different from what Im asking but I applied the same thing in my prototype.
Can you render a bar chart like this using flot?
Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?
Actually pretty easy to produce using flot.
var options = {
series: {
bars: {
show: true,
barWidth: 15778463000, // 1/2 year in milliseconds
align: 'center'
},
},
yaxes: {
min: 0
},
xaxis: {
mode: 'time',
timeformat: "%y",
tickSize: [1, "year"],
autoscaleMargin: .10 // allow space left and right
}
};
$(function() {
$.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
[1262304000*1000, 200],
[1293840000*1000, 300]]], options);
});
Produces:
I am facing issue while loaidng the data in JQGrid at a later stage in place of at the time of ceating grid. I am using filter toolbar for search.
following is the code I am using:
Creating Grid
jQuery("#list").jqGrid({
datatype: 'local',
colNames: [my col names],
colModel: [my col model],
jsonReader: {
root: "rows",
page: "page",
total: "total",
//records: "records",
repeatitems: false
},
height: 300,
viewrecords: true,
gridComplete: this.onGridComplete,
ondblClickRow: this.rowDblClick,
onSelectRow: this.selectRow,
headertitles: false,
loadtext: "Loading...",
sortable: true,
altRows: true,
loadonce: true,
rowNum: 100,
pager: '#pager',
root: "rows",
rowList: [100, 200, 300],
pagination: true,
ignoreCase: true
})
Load data at later stage
if(gridDataStr != "none") // gridDatStr has data
{
grid.initialize(); // create the grid
var myjsongrid = JSON.parse(gridDataStr);
grid.table[0].addJSONData(myjsongrid);
grid.table.jqGrid('setGridParam',{datatype:'json', data:myjsongrid}).trigger('reloadGrid');
if (myjsongrid["rows"].length > 1)
{
grid.table.filterToolbar({
stringResult: true,
searchOnEnter: false
});
}
}
However if I load the same data at the time of creating the grid with datatype:json and using some valid url, searching is working well.
Any suggestions?
The method addJSONData can not be used to work with the jqGrid having the 'local' datatype.
You can use addRowData and to use localReader instead of jsonReader or set data parameter of jqGrid with respect of setGridParam method and then call jQuery("#list")[0].refreshIndex() (see here) and reload the grid.