jQWidgets Forums

Tagged: datagrid aggregates

This topic contains 4 replies, has 2 voices, and was last updated by Gopre400 11 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Grid aggregates not displaying Posts
October 28, 2013 at 6:36 pm Grid aggregates not displaying #31471

Gopre400
Participant

Hi, I added aggregates to a column in grid but it is not displaying… (also is there a resouce to show me how to paste code without the double spacing)?

<head runat=”server”>

<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>

<title>Engineers Estimate</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<link rel=”stylesheet” type=”text/css” href=”http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css” />

<link rel=”stylesheet” type=”text/css” href=”http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css” />

<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.base.css” type=”text/css” />

<link rel=”stylesheet” href=”../jqwidgets/styles/jqx.darkblue.css” type=”text/css” />

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.10.2.min.js”></script>

<script type=”text/javascript” src=”http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxdata.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.pager.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxscrollbar.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxbuttons.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxlistbox.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxcheckbox.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxdropdownlist.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.sort.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.edit.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxmenu.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.aggregates.js”></script>

<script type=”text/javascript” src=”../jqwidgets/jqxgrid.columnsresize.js”></script>

<script type=”text/javascript” src=”../Construction/scripts/gettheme.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js”></script>

<script type=”text/javascript” src=”http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js”></script>

<script type=”text/javascript” src=”../Construction/Scripts/jquery.Construction.js”></script>

</head>

<body>

<div data-role=”page” data-theme=”b”>

<div data-role=”header” data-theme=”b”>

</div>

<div data-role=”content” id=”content” data-theme=”b”>

<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>

<div id=”jqxgrid”>

</div>

</div>

<div data-role=”footer” data-theme=”b”>

<div data-role=”navbar”>

<ul>

<li><a id=”btnOK” href=”#”>OK</a></li>

<li><a id=”btnCancel” href=”#”>Cancel</a></li>

</ul>

</div><!– /navbar –>

</div>

<script type=”text/javascript”>

$(document).on(‘pageinit’, function () {

var source =

{

datatype: “xml”,

updaterow: function (rowid, rowdata, commit) {

var rec = $.param(rowdata).split(“&”);

var estimateitemid = rec[0].split(“=”);

var itemnbr = rec[1].split(“=”);

var itemdesc = rec[2].split(“=”);

var itemunit = rec[3].split(“=”);

var itemqty = rec[4].split(“=”);

var itemprice = rec[5].split(“=”);

$.ajax({

type: “POST”,

url: “CNSTWebService.asmx/UpdateCNSTEngineersEstimateItem”,

contentType: “application/json; charset=utf-8”,

dataType: “json”,

data: ‘{“estimateitemid”:”‘ + estimateitemid[1] + ‘”,”itemnbr”:”‘ + itemnbr[1] + ‘”,”itemdesc”:”‘ + itemdesc[1] + ‘”,”itemunit”:”‘ + itemunit[1] + ‘”,”itemqty”:”‘ + itemqty[1] + ‘”,”itemprice”:”‘ + itemprice[1] + ‘”}’,

success: function (data) {

commit(true);

}

});

},

deleterow: function (rowid, commit) {

$.ajax({

type: “POST”,

url: “CNSTWebService.asmx/DeleteCNSTEngineersEstimateItem”,

contentType: “application/json; charset=utf-8”,

dataType: “json”,

data: ‘{“estimateitemid”:”‘ + rowid + ‘”}’,

success: function (data) {

commit(true);

}

});

},

datafields: [

{ name: ‘EstimateItemID’ },

{ name: ‘ItemNbr’ },

{ name: ‘ItemDescription’ },

{ name: ‘ItemUnit’ },

{ name: ‘ItemQuantity’ },

{ name: ‘ItemPrice’, type: ‘number’ },

{ name: ‘ItemTotal’, type: ‘number’ }

],

async: false,

record: ‘Table’,

url: ‘CNSTWebService.asmx/GetCustomers’

};

var dataAdapter = new $.jqx.dataAdapter(source, { contentType: ‘application/json; charset=utf-8’ });

var renderer = function (EstimateItemID) {

return ‘<input type=”button” class=”gridButton” id=’ + EstimateItemID + ‘ value=”Delete”></input>’;

}

$(“#jqxgrid”).jqxGrid(

{

width: 900,

source: dataAdapter,

theme: ‘darkblue’,

pageable: true,

autoheight: true,

sortable: true,

altrows: true,

enabletooltips: true,

editable: true,

selectionmode: ‘multiplecellsadvanced’,

showaggregates: true,

columns: [

{text: ‘Delete’, datafield: ‘Delete’, columntype: ‘button’, width: 75, cellsrenderer: function () {

return “Delete”;

}, buttonclick: function (row) {

id = $(“#jqxgrid”).jqxGrid(‘getrowdata’, row);

var rec = $.param(id).split(“&”);

var estimateitemid = rec[0].split(“=”);

var commit = $(“#jqxgrid”).jqxGrid(‘deleterow’, estimateitemid[1]);

}

},

{ text: ‘Item#’, datafield: ‘ItemNbr’, width: 50 },

{ text: ‘Description’, datafield: ‘ItemDescription’, width: 400 },

{ text: ‘Units’, datafield: ‘ItemUnit’, width: 50 },

{ text: ‘Quantity’, datafield: ‘ItemQuantity’, width: 100, align: ‘right’, cellsalign: ‘right’ },

{ text: ‘Price’, datafield: ‘ItemPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },

{ text: ‘Total’, datafield: ‘ItemTotal’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100, aggregates: [‘sum’]}

]

});

}

});

</script>

</div><!– /page –>

</body>

October 28, 2013 at 7:36 pm Grid aggregates not displaying #31481

Peter Stoev
Keymaster

Hi,

You can learn how to display aggregates from this sample: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 28, 2013 at 8:57 pm Grid aggregates not displaying #31488

Gopre400
Participant

I’m pretty sure I am doing it the same way…but it doesn’t display at bottom of grid.

October 29, 2013 at 5:57 am Grid aggregates not displaying #31501

Peter Stoev
Keymaster

Hi Gopre400,

showstatusbar: true is missing from the code that you posted.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

October 30, 2013 at 2:30 am Grid aggregates not displaying #31568

Gopre400
Participant

Perfect! Thank you!
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.