jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid Aaggregated Data Refresh
Tagged: aggregates, grid, jqxgrid
This topic contains 8 replies, has 2 voices, and was last updated by Dimitar 12 years, 2 months ago.
-
Author
-
Hi All,
I’m having a problem with my aggregated data refreshing after recalling my “InitGrid” function.
When I open the window my grid populates correctly and builds aggregated data through the ready function call to “getaggregatedData()”. Then when I select an item from the side menu I recall the InitGrid() function. The grid makes the call to the server and returns columns but, does not recall “getaggregatedData”. I have tried what I believe to be all the right refresh functions but still not updating aggregated data.Thanks in advance for any help.
GaryCan not get code to format. Any suggestions?
Hello Gary,
Please format your code as explained in the forum topic Code Formatting.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Index Page</title> <!--add for Twitter Bootstrap and Toastr styles--> <link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="Content/bootstrap-responsive.min.css" type="text/css" /> <link rel="stylesheet" href="Content/Bootstrap-Extra.css" type="text/css" /> <link rel="stylesheet" href="Content/toastr.css" type="text/css" /> <!--add for jQWidgets styles--> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <!--add for jQuery script--> <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> <!--add for Knockout script and Toastr--> <script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script> <script type="text/javascript" src="Scripts/toastr.js"></script> <script type="text/javascript" src="jqwidgets/jqxknockout.js"></script> <!--add for Bootstrap script--> <script type="text/javascript" src="Scripts/bootstrap.js"></script> <!--add for jQWidgets framework--> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <!--add for one or more Jqwidgets--> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="jqwidgets/jqxchart.js"></script></head><body> <!--Navigation/Menu Area--> <div class="conatiner-fluid"> <div class="row-fluid"> <div class='span12'> <!-- @{Html.RenderPartial("_NavBarMenu");}--> <div id='jqxMenu'> <ul> <li><a href="#Home">Home</a></li> <li>DashBoard </li> <li>Financial </li> </ul> </div> </div> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <!--Left content Area--> <aside class='span2'> <div id='sidemenu'> </div> </aside> <!--Main Body Area--> <div class="span10"> <div id='bodytabs'> <ul> <li> <div style="height: 25px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="Content/images/coins.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> <p id="indextab1"><span>Transactions</span></p> </div> </div> </li> <li> <div style="height: 25px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="Content/images/application_analysis.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> <p id="indextab2"><span>Account Analysis</span></p> </div> </div> </li> <li> <div style="height: 25px; margin-top: 5px;"> <div style="float: left;"> <img width="16" height="16" src="Content/images/chart_bar.png" /> </div> <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;"> <p id="indextab3"><span>Budget</span></p> </div> </div> </li> </ul> <div style="overflow: hidden;"> <div id="jqxgrid"></div> <div style="margin-top: 2px; height: 30%;"> <div class="well well-index"> <p style="text-align: center;"> <a><span class="badge badge-info" data-bind="text: accttransTotal"></span></a> <a><span class="badge badge-info" data-bind="text: acctpaysTotal"></span></a> <a><span class="badge badge-info" data-bind="text: acctdepsTotal"></span></a> <a><span class="badge badge-info" data-bind="text: acctbalsTotal"></span></a> </p> </div> </div> </div> <div style="overflow: hidden;"> <div style="margin-top: 2px; height: 50%;"> <div class="well well-index"> <p style="text-align: center;"> <a><span class="badge badge-info" data-bind="text: accttransTotal"></span></a> <a><span class="badge badge-info" data-bind="text: acctpaysTotal"></span></a> <a><span class="badge badge-info" data-bind="text: acctdepsTotal"></span></a> <a><span class="badge badge-info" data-bind="text: acctbalsTotal"></span></a> </p> </div> </div> <div id='jqxChart' style="width: 100%; height: 50%;"> </div> </div> <div> ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages. </div> </div> </div> </div> </div> <div class="navbar navbar-fixed-bottom"> <div class="navbar-inner"> <a class="brand" href="#"><span data-bind="text: myMessage"></span></a> <!--<p><span data-bind="text: myMessage"></span></p>--> </div> </div> <script type="text/javascript"> $(document).ready(function () { var theme = "energyblue"; // ******************************* // Knockout View Model // ******************************* function AppViewModel() { this.myMessage = ko.observable(); this.accttransTotal = ko.observable(); this.acctpaysTotal = ko.observable(); this.acctdepsTotal = ko.observable(); this.acctbalsTotal = ko.observable(); this.acctName = ko.observable(); } // ****************************** // Formate Number function // ****************************** function formatNumber(num, prefix) { var prefix = prefix || ''; num += ''; var splitStr = num.split('.'), splitLeft = splitStr[0], splitRight = splitStr.length > 1 ? '.' + splitStr[1] : '', regx = /(\d+)(\d{3})/; while (regx.test(splitLeft)) { splitLeft = splitLeft.replace(regx, '$1' + ',' + '$2'); } return prefix + splitLeft + splitRight; }; // ****************************** // UnFormate Number function // ****************************** function unformatNumber(num) { return num.replace(/([^0-9\.\-])/g, '') * 1; }; // ****************************** // JQWIDGET Grid Cell Format Render // ****************************** var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) { if (value < 0) { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>'; } else { return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>'; } }; // ****************************** // Add Grid data filter // ****************************** var addfilter = function () { var filtergroup = new $.jqx.filter(), filter_or_operator = 1, filtervalue = '1/1/2012', filtercondition = 'greater_than_or_equal', filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter1); // add the filters. $("#jqxgrid").jqxGrid('addfilter', 'TransDate', filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); // clear all filters. $("#jqxgrid").jqxGrid('clearfilters'); // Position to specific row $('#jqxgrid').jqxGrid('ensurerowvisible', 1521); }; // ****************************** // Establish Aggregated Data // ****************************** var getaggregatedData = function () { var summaryPayment = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'Payment', ['min', 'max', 'sum', 'avg', 'count']); var summaryDeposit = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'Deposit', ['min', 'max', 'sum', 'avg', 'count']); // Total Payments myModel.acctpaysTotal('Total Payments: ' + formatNumber(summaryPayment['sum'], '$')); // Total Deposits myModel.acctdepsTotal('Total Deposits: ' + formatNumber(summaryDeposit['sum'], '$')); // Pending Balance x = summaryDeposit['sum'] - summaryPayment['sum']; myModel.acctbalsTotal('Pending Balance: ' + formatNumber(x, '$')); // Total Transactions myModel.accttransTotal('Total Transactions: ' + formatNumber(summaryPayment['count'])); }; // ****************************** // Establish Source for Grid // ****************************** var getAdapter = function () { var url = ''; url = 'Acct/GetTrans/' + myModel.acctName(); var source = { url: url, datatype: 'json', datafields: [ { name: 'AcctName', type: 'String' }, { name: 'TransactionID', type: 'int' }, { name: 'TransDate', type: 'date' }, { name: 'Num', type: 'string' }, { name: 'Description', type: 'string' }, { name: 'Memo', type: 'string' }, { name: 'CategoryName', type: 'string' }, { name: 'Tag', type: 'string' }, { name: 'Status', type: 'string' }, { name: 'Payment', type: 'number' }, { name: 'Deposit', type: 'number' }, { name: 'Balance', type: 'number' }, ] }; // ****************************** // Establish dataAdapter for Grid // ****************************** var dataAdapter = new $.jqx.dataAdapter(source, { beforeLoadComplete: function (records) { var length = records.length; var balTotal = 0; var newPayment = 0; for (var i = 0; i < length; i++) { if (records[i]["AcctName"] != myModel.acctName()) { records.splice(i, 1); i = i - 1; length = length - 1; } else if (records[i]["Payment"] == 0) { balTotal = balTotal + records[i]['Deposit']; records[i]['Balance'] = balTotal; records.push(); } else { balTotal = balTotal - records[i]['Payment']; records[i]['Balance'] = balTotal; records.push(); } } } }); return dataAdapter; }; // ****************************** // Initialzation for Grid // ****************************** var initGrid = function () { $("#jqxgrid").jqxGrid( { width: '100%', height: '675', rowheight: 30, altrows: true, columnsresize: true, source: getAdapter(), theme: theme, pageable: false, showstatusbar: false, statusbarheight: 60, filterable: true, sortable: true, autoshowfiltericon: true, showheader: true, showaggregates: false, editable: true, editmode: 'dblclick', ready: function () { addfilter(); getaggregatedData(); }, columns: [ { text: 'Date', datafield: 'TransDate', filtertype: 'date', width: 100, cellsformat: 'MM/dd/yyyy' }, { text: 'Account', datafield: 'AcctName', filtertype: 'textbox', width: 115 }, { text: 'Num', datafield: 'Num', filterable: 'false', filtertype: 'textbox', width: 100 }, { text: 'Description', datafield: 'Description', filterable: 'true', filtertype: 'textbox', width: 220 }, { text: 'Category', datafield: 'CategoryName', columntype: 'dropdownlist', filtertype: 'textbox', width: 220 }, { text: 'Memo', datafield: 'Memo', filtertype: 'textbox', width: 110 }, { text: 'Tag', datafield: 'Tag', width: 110 }, { text: 'Status', columntype: 'dropdownlist', datafield: 'Status', filterable: 'false', filtertype: 'textbox', cellsalign: 'center', width: 50 }, { text: 'Payment', datafield: 'Payment', width: 100, cellsalign: 'right', filtertype: 'number', cellsformat: 'd2' }, { text: 'Deposit', datafield: 'Deposit', width: 100, cellsalign: 'right', filtertype: 'number', cellsformat: 'd2' }, { text: 'Balance', datafield: 'Balance', width: 107, cellsalign: 'right', filtertype: 'number', cellsrenderer: cellsrenderer, cellsformat: 'c2', } ] }); }; // ******************************************************* // Initialize Data Source, Data Adapter and Chart Settings // ******************************************************* var initChart = function () { var url = ''; url = 'Acct/GetTrans/' + myModel.acctName(); var source = { url: url, datatype: 'json', datafields: [ { name: 'AcctName', type: 'String' }, { name: 'TransactionID', type: 'int' }, { name: 'TransDate', type: 'date' }, { name: 'Num', type: 'string' }, { name: 'Description', type: 'string' }, { name: 'Memo', type: 'string' }, { name: 'CategoryName', type: 'string' }, { name: 'Tag', type: 'string' }, { name: 'Status', type: 'string' }, { name: 'Payment', type: 'number' }, { name: 'Deposit', type: 'number' }, { name: 'Balance', type: 'number' }, ] }; // ******************* // Chart Data Adaqpter // ******************* var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // ************************* // Chart settings // ************************* var settings = { title: "Deposits and Payments Monthly for " + myModel.acctName(), description: "Period: 01/01/2013 through 12/31/2013", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { dataField: 'TransDate', formatFunction: function (value) { return months[value.getMonth()]; }, toolTipFormatFunction: function (value) { return value.getDate() + '-' + months[value.getMonth()]; }, type: 'date', baseUnit: 'month', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: true, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: false }, colorScheme: 'scheme04', seriesGroups: [ { type: 'column', valueAxis: { unitInterval: 500, minValue: 0, maxValue: 5000, displayValueAxis: true, description: 'Dollars', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Payment', displayText: 'Payment' }, { dataField: 'Deposit', displayText: 'Deposits' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }; // *********************************************************** // Call for Initilization of Grid and Chart from Tab selection // *********************************************************** var initTabs = function (tab) { switch (tab) { case 0: initGrid(); break; case 1: initChart(); break; } }; // ****************************** // Activate knockout.js // ****************************** myModel = new AppViewModel; ko.applyBindings(myModel); $("#jqxMenu").jqxMenu({ width: 'auto', height: '40px', showTopLevelArrows: true, theme: theme }); $("#jqxMenu").css('visibility', 'visible'); $("#animation").bind('change', function (event) { var value = event.args.checked; // enable or disable the menu's animation. if (!value) { $("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 }); } else { $("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 }); } }); $("#disabled").bind('change', function (event) { var value = event.args.checked; // enable or disable the menu if (!value) { $("#jqxMenu").jqxMenu({ disabled: false }); } else { $("#jqxMenu").jqxMenu({ disabled: true }); } }); $("#hover").bind('change', function (event) { var value = event.args.checked; // enable or disable the menu's hover effect. if (!value) { $("#jqxMenu").jqxMenu({ enableHover: false }); } else { $("#jqxMenu").jqxMenu({ enableHover: true }); } }); $("#open").bind('change', function (event) { var value = event.args.checked; // enable or disable the opening of the top level menu items when the user hovers them. if (!value) { $("#jqxMenu").jqxMenu({ autoOpen: false }); } else { $("#jqxMenu").jqxMenu({ autoOpen: true }); } }); // *********************************** // Establish Data Source for List Menu // *********************************** var source = { url: '/Acct/GetAccts', datatype: 'json', type: 'get', datafields: [ { name: 'AccountID', type: 'int' }, { name: 'CategoryName', type: 'string' }, { name: 'AcctName', type: 'string' }, { name: 'AcctNumber', type: 'string' }, { name: 'AcctBalance', type: 'number' }, { name: 'AcctOpenDate', type: 'date' }, ], id: 'AccountID' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var accountList = dataAdapter.records; var data = [] for (var i = 0; i < accountList.length; i++) { var row = {}; row["group"] = accountList[i]['CategoryName']; row["value"] = accountList[i]['AcctName']; row["html"] = "<div>" + accountList[i]['AcctName'] + "</div><div><p id='list" + i + "'></strong></p></div>"; data[i] = row; }; var dataAdapter = new $.jqx.dataAdapter(data); // Create a jqxListBox $("#sidemenu").jqxListBox({ allowDrop: false, allowDrag: false, source: data, width: 275, height: 787, theme: theme, selectedIndex: 0 }); myModel.acctName(accountList[0]['AcctName']); $("#indextab1").text(myModel.acctName()); // ****************************** // Side Menu selection function // ****************************** $('#sidemenu').on('select', function (event) { var args = event.args; if (args) { var index = args.index; var item = args.item; var originalEvent = args.originalEvent; // get item's label and value. var label = item.label; var value = item.value; myModel.acctName(value); $("#indextab1").text(myModel.acctName()); $('#bodytabs').jqxTabs('select', 0); $("#jqxgrid").jqxGrid({ source: getAdapter() }); } }); $('#bodytabs').jqxTabs({ scrollAnimationDuration: 500, animationType: 'fade', enableScrollAnimation: true, selectionTracker: true, width: '100%', height: '787', position: 'top', theme: theme, initTabContent: initTabs }); // ******************************* // Tab selection function routine // ******************************* $('#bodytabs').on('tabclick', function (event) { var clickedItem = event.args.item; if (clickedItem == 0) { ('#jqxgrid').jqxGrid('refresh'); } else { $('#bodytabs').jqxTabs('enableAt', 1); initChart(); } }); $('#animation').bind('change', function (event) { var checked = event.args.checked; $('#bodytabs').jqxTabs({ selectionTracker: checked }); }); $('#contentAnimation').bind('change', function (event) { var checked = event.args.checked; if (checked) { $('#bodytabs').jqxTabs({ animationType: 'fade' }); } else { $('#bodytabs').jqxTabs({ animationType: 'none' }); } }); }); </script></body></html>
Index Page
Home
DashBoardFinancial
TransactionsAccount AnalysisBudgetASP.NET is a web application framework developed and marketed by Microsoft to allow
programmers to build dynamic web sites, web applications and web services. It was
first released in January 2002 with version 1.0 of the .NET Framework, and is the
successor to Microsoft’s Active Server Pages (ASP) technology. ASP.NET is built
on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code
using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET
components to process SOAP messages.$(document).ready(function () {
var theme = “energyblue”;
// *******************************
// Knockout View Model
// *******************************
function AppViewModel() {
this.myMessage = ko.observable();
this.accttransTotal = ko.observable();
this.acctpaysTotal = ko.observable();
this.acctdepsTotal = ko.observable();
this.acctbalsTotal = ko.observable();
this.acctName = ko.observable();
}// ******************************
// Formate Number function
// ******************************
function formatNumber(num, prefix) {
var prefix = prefix || ”;
num += ”;
var splitStr = num.split(‘.’),
splitLeft = splitStr[0],
splitRight = splitStr.length > 1 ? ‘.’ + splitStr[1] : ”,
regx = /(\d+)(\d{3})/;
while (regx.test(splitLeft)) {
splitLeft = splitLeft.replace(regx, ‘$1’ + ‘,’ + ‘$2’);
}
return prefix + splitLeft + splitRight;
};// ******************************
// UnFormate Number function
// ******************************function unformatNumber(num) {
return num.replace(/([^0-9\.\-])/g, ”) * 1;
};// ******************************
// JQWIDGET Grid Cell Format Render
// ******************************var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if (value < 0) {
return '‘ + value + ”;
}
else {
return ‘‘ + value + ‘‘;
}
};// ******************************
// Add Grid data filter
// ******************************var addfilter = function () {
var filtergroup = new $.jqx.filter(),
filter_or_operator = 1,
filtervalue = ‘1/1/2012’,
filtercondition = ‘greater_than_or_equal’,
filter1 = filtergroup.createfilter(‘datefilter’, filtervalue, filtercondition);filtergroup.addfilter(filter_or_operator, filter1);
// add the filters.
$(“#jqxgrid”).jqxGrid(‘addfilter’, ‘TransDate’, filtergroup);// apply the filters.
$(“#jqxgrid”).jqxGrid(‘applyfilters’);// clear all filters.
$(“#jqxgrid”).jqxGrid(‘clearfilters’);// Position to specific row
$(‘#jqxgrid’).jqxGrid(‘ensurerowvisible’, 1521);
};// ******************************
// Establish Aggregated Data
// ******************************var getaggregatedData = function () {
var summaryPayment = $(“#jqxgrid”).jqxGrid(‘getcolumnaggregateddata’, ‘Payment’, [‘min’, ‘max’, ‘sum’, ‘avg’, ‘count’]);
var summaryDeposit = $(“#jqxgrid”).jqxGrid(‘getcolumnaggregateddata’, ‘Deposit’, [‘min’, ‘max’, ‘sum’, ‘avg’, ‘count’]);// Total Payments
myModel.acctpaysTotal(‘Total Payments: ‘ + formatNumber(summaryPayment[‘sum’], ‘$’));// Total Deposits
myModel.acctdepsTotal(‘Total Deposits: ‘ + formatNumber(summaryDeposit[‘sum’], ‘$’));// Pending Balance
x = summaryDeposit[‘sum’] – summaryPayment[‘sum’];
myModel.acctbalsTotal(‘Pending Balance: ‘ + formatNumber(x, ‘$’));// Total Transactions
myModel.accttransTotal(‘Total Transactions: ‘ + formatNumber(summaryPayment[‘count’]));};
// ******************************
// Establish Source for Grid
// ******************************var getAdapter = function () {
var url = ”;
url = ‘Acct/GetTrans/’ + myModel.acctName();var source = {
url: url,
datatype: ‘json’,
datafields:
[
{ name: ‘AcctName’, type: ‘String’ },
{ name: ‘TransactionID’, type: ‘int’ },
{ name: ‘TransDate’, type: ‘date’ },
{ name: ‘Num’, type: ‘string’ },
{ name: ‘Description’, type: ‘string’ },
{ name: ‘Memo’, type: ‘string’ },
{ name: ‘CategoryName’, type: ‘string’ },
{ name: ‘Tag’, type: ‘string’ },
{ name: ‘Status’, type: ‘string’ },
{ name: ‘Payment’, type: ‘number’ },
{ name: ‘Deposit’, type: ‘number’ },
{ name: ‘Balance’, type: ‘number’ },]
};
// ******************************
// Establish dataAdapter for Grid
// ******************************var dataAdapter = new $.jqx.dataAdapter(source,
{
beforeLoadComplete: function (records) {
var length = records.length;
var balTotal = 0;
var newPayment = 0;
for (var i = 0; i < length; i++) {if (records[i]["AcctName"] != myModel.acctName()) {
records.splice(i, 1);
i = i – 1;
length = length – 1;
}
else if (records[i]["Payment"] == 0) {
balTotal = balTotal + records[i]['Deposit'];
records[i]['Balance'] = balTotal;
records.push();
}
else {
balTotal = balTotal – records[i]['Payment'];
records[i]['Balance'] = balTotal;
records.push();
}}
}
});return dataAdapter;
};
// ******************************
// Initialzation for Grid
// ******************************var initGrid = function () {
$("#jqxgrid").jqxGrid(
{
width: '100%',
height: '675',
rowheight: 30,
altrows: true,
columnsresize: true,
source: getAdapter(),
theme: theme,
pageable: false,
showstatusbar: false,
statusbarheight: 60,
filterable: true,
sortable: true,
autoshowfiltericon: true,
showheader: true,
showaggregates: false,
editable: true,
editmode: 'dblclick',
ready: function () {
addfilter();
getaggregatedData();},
columns: [{ text: 'Date', datafield: 'TransDate', filtertype: 'date', width: 100, cellsformat: 'MM/dd/yyyy' },
{ text: 'Account', datafield: 'AcctName', filtertype: 'textbox', width: 115 },
{ text: 'Num', datafield: 'Num', filterable: 'false', filtertype: 'textbox', width: 100 },
{ text: 'Description', datafield: 'Description', filterable: 'true', filtertype: 'textbox', width: 220 },
{ text: 'Category', datafield: 'CategoryName', columntype: 'dropdownlist', filtertype: 'textbox', width: 220 },
{ text: 'Memo', datafield: 'Memo', filtertype: 'textbox', width: 110 },
{ text: 'Tag', datafield: 'Tag', width: 110 },
{ text: 'Status', columntype: 'dropdownlist', datafield: 'Status', filterable: 'false', filtertype: 'textbox', cellsalign: 'center', width: 50 },
{ text: 'Payment', datafield: 'Payment', width: 100, cellsalign: 'right', filtertype: 'number', cellsformat: 'd2' },
{ text: 'Deposit', datafield: 'Deposit', width: 100, cellsalign: 'right', filtertype: 'number', cellsformat: 'd2' },
{ text: 'Balance', datafield: 'Balance', width: 107, cellsalign: 'right', filtertype: 'number', cellsrenderer: cellsrenderer, cellsformat: 'c2', }]
});};
// *******************************************************
// Initialize Data Source, Data Adapter and Chart Settings
// *******************************************************var initChart = function () {
var url = '';
url = 'Acct/GetTrans/' + myModel.acctName();var source = {
url: url,
datatype: 'json',
datafields: [{ name: 'AcctName', type: 'String' },
{ name: 'TransactionID', type: 'int' },
{ name: 'TransDate', type: 'date' },
{ name: 'Num', type: 'string' },
{ name: 'Description', type: 'string' },
{ name: 'Memo', type: 'string' },
{ name: 'CategoryName', type: 'string' },
{ name: 'Tag', type: 'string' },
{ name: 'Status', type: 'string' },
{ name: 'Payment', type: 'number' },
{ name: 'Deposit', type: 'number' },
{ name: 'Balance', type: 'number' },
]
};// *******************
// Chart Data Adaqpter
// *******************var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];// *************************
// Chart settings
// *************************var settings = {
title: "Deposits and Payments Monthly for " + myModel.acctName(),
description: "Period: 01/01/2013 through 12/31/2013",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: 'TransDate',
formatFunction: function (value) {
return months[value.getMonth()];
},
toolTipFormatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()];
},
type: 'date',
baseUnit: 'month',
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 3,
gridLinesColor: '#888888',
valuesOnTicks: false
},
colorScheme: 'scheme04',
seriesGroups:
[
{
type: 'column',
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 5000,
displayValueAxis: true,
description: 'Dollars',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'Payment', displayText: 'Payment' },
{ dataField: 'Deposit', displayText: 'Deposits' }
]
}
]
};// setup the chart
$('#jqxChart').jqxChart(settings);};
// ***********************************************************
// Call for Initilization of Grid and Chart from Tab selection
// ***********************************************************var initTabs = function (tab) {
switch (tab) {
case 0:
initGrid();
break;
case 1:
initChart();
break;
}};
// ******************************
// Activate knockout.js
// ******************************
myModel = new AppViewModel;
ko.applyBindings(myModel);$("#jqxMenu").jqxMenu({ width: 'auto', height: '40px', showTopLevelArrows: true, theme: theme });
$("#jqxMenu").css('visibility', 'visible');$("#animation").bind('change', function (event) {
var value = event.args.checked;
// enable or disable the menu's animation.
if (!value) {
$("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 });
}
else {
$("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
}
});$("#disabled").bind('change', function (event) {
var value = event.args.checked;
// enable or disable the menu
if (!value) {
$("#jqxMenu").jqxMenu({ disabled: false });
}
else {
$("#jqxMenu").jqxMenu({ disabled: true });
}
});$("#hover").bind('change', function (event) {
var value = event.args.checked;
// enable or disable the menu's hover effect.
if (!value) {
$("#jqxMenu").jqxMenu({ enableHover: false });
}
else {
$("#jqxMenu").jqxMenu({ enableHover: true });
}
});$("#open").bind('change', function (event) {
var value = event.args.checked;
// enable or disable the opening of the top level menu items when the user hovers them.
if (!value) {
$("#jqxMenu").jqxMenu({ autoOpen: false });
}
else {
$("#jqxMenu").jqxMenu({ autoOpen: true });
}
});// ***********************************
// Establish Data Source for List Menu
// ***********************************var source = {
url: '/Acct/GetAccts',
datatype: 'json',
type: 'get',
datafields:
[
{ name: 'AccountID', type: 'int' },
{ name: 'CategoryName', type: 'string' },
{ name: 'AcctName', type: 'string' },
{ name: 'AcctNumber', type: 'string' },
{ name: 'AcctBalance', type: 'number' },
{ name: 'AcctOpenDate', type: 'date' },],
id: 'AccountID'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); }
});var accountList = dataAdapter.records;
var data = []for (var i = 0; i < accountList.length; i++) {
var row = {};
row["group"] = accountList[i]['CategoryName'];
row["value"] = accountList[i]['AcctName'];
row["html"] = "” + accountList[i][‘AcctName’] + ““;
data[i] = row;
};
var dataAdapter = new $.jqx.dataAdapter(data);// Create a jqxListBox
$(“#sidemenu”).jqxListBox({ allowDrop: false, allowDrag: false, source: data, width: 275, height: 787, theme: theme, selectedIndex: 0 });myModel.acctName(accountList[0][‘AcctName’]);
$(“#indextab1”).text(myModel.acctName());// ******************************
// Side Menu selection function
// ******************************$(‘#sidemenu’).on(‘select’, function (event) {
var args = event.args;
if (args) {
var index = args.index;
var item = args.item;
var originalEvent = args.originalEvent;
// get item’s label and value.
var label = item.label;
var value = item.value;
myModel.acctName(value);
$(“#indextab1”).text(myModel.acctName());
$(‘#bodytabs’).jqxTabs(‘select’, 0);
$(“#jqxgrid”).jqxGrid({ source: getAdapter() });}
});$(‘#bodytabs’).jqxTabs({ scrollAnimationDuration: 500, animationType: ‘fade’, enableScrollAnimation: true, selectionTracker: true, width: ‘100%’, height: ‘787’, position: ‘top’, theme: theme, initTabContent: initTabs });
// *******************************
// Tab selection function routine
// *******************************$(‘#bodytabs’).on(‘tabclick’, function (event) {
var clickedItem = event.args.item;
if (clickedItem == 0) {
(‘#jqxgrid’).jqxGrid(‘refresh’);}
else {
$(‘#bodytabs’).jqxTabs(‘enableAt’, 1);
initChart();}
});$(‘#animation’).bind(‘change’, function (event) {
var checked = event.args.checked;
$(‘#bodytabs’).jqxTabs({ selectionTracker: checked });
});$(‘#contentAnimation’).bind(‘change’, function (event) {
var checked = event.args.checked;
if (checked) {
$(‘#bodytabs’).jqxTabs({ animationType: ‘fade’ });
}
else {
$(‘#bodytabs’).jqxTabs({ animationType: ‘none’ });
}
});});
I followed your instructions for formatting code but, it still does not work. I have done this before not sure what is not working.
Any thing else I can try?
Gary
Hi Gary,
You may send the page code to support@jqwidgets.com.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
Did you get my HTML file?
Best Regards,
GaryHi Gary,
Yes, I received your e-mail and sent you a reply. Please check your e-mail.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.