[GaryParticipant]

Thanks Peter.. Tell the whole team at JQWIDGETS Thanks for getting us to this point. I will start working with Angular 2 and Typescript ASAP.

I was wondering if we could have a forum tab for just Angular 2 and Typescript. Would help keep questions isolated for all of us.

Again. THANKS….

[GaryParticipant]

Peter,

Thanks….

Gary

[GaryParticipant]

Peter,

Thanks

I will move forward and let you know if I run into anything.

Regards,
Gary

[GaryParticipant]

Hello Peter,

My problem was I had my HTML using in the row definition. I changed to

and everything is working as I would expect.

Thanks,
Gary

[GaryParticipant]

Hello Peter,

I had not followed the initContent, however when I added in context of the sample still no change. I’m sure it is something I’m missing.

Below in the function I call for the creation of the Popup window for edit.

// ***************************
// handle context menu clicks.
// ***************************

$(“#contextmenu”).on(‘itemclick’, function (event) {

var args = event.args;

var rowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);

if ($.trim($(args).text()) == “Edit Selected Row”) {

editrow = rowindex;

var offset = $(“#jqxgrid”).offset();

$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 450, y: parseInt(offset.top) + 120 } });
$(“#popupWindow”).jqxWindow({ width: ‘370px’, height: ‘400px’, cancelButton: $(“#Cancel”), });
$(“#popupWindow”).jqxWindow({ theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, title: ‘Transaction Edit’,});
$(“#popupWindow”).jqxWindow({ initContent: function() {

$(“#TransDate”).jqxDateTimeInput({ width: ‘205px’, height: ’25px’, formatString: ‘d’, showCalendarButton: true, theme: theme });
$(“#AcctName”).addClass(‘jqx-input’);
$(“#AcctName”).addClass(‘jqx-rc-all’);
$(“#Payment”).addClass(‘jqx-input’);
$(“#AcctName”).jqxInput({ width: ‘205px’, height: ’25px’ });
$(“#Num”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Description”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#CategoryName”).jqxComboBox({ source: droplistSource, height: ’25px’, width: ‘205px’, theme: theme });
$(“#Memo”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Tag”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Status”).jqxInput({ height: ’25px’, width: ‘205px’, theme: theme });
$(“#Payment”).jqxNumberInput({ height: ’25px’, width: ‘205px’, inputMode: ‘simple’, symbol: “$”, min: 0, spinButtons: true });
$(“#Deposit”).jqxNumberInput({ height: ’25px’, width: ‘205px’, inputMode: ‘simple’, symbol: “$”, min: 0, theme: theme, spinButtons: true });

if (theme.length > 0) {
$(“#AcctName”).addClass(‘jqx-input-‘ + theme);
$(“#AcctName”).addClass(‘jqx-rc-all-‘ + theme);
$(“#Payment”).addClass(‘jqx-input-‘ + theme);

};

}
});

$(“#Cancel”).jqxButton({ theme: theme });
$(“#Save”).jqxButton({ theme: theme });

// get the clicked row’s data and initialize the input fields.

var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);

$(“#TransactionID”).val(dataRecord.TransactionID);

var year = dataRecord.TransDate.getFullYear();
var day = dataRecord.TransDate.getDate();
var month = dataRecord.TransDate.getMonth() + 1;

$(“#TransDate”).val(month + ‘/’ + day + ‘/’ + year);

//$(“#TransDate”).val(dataRecord.TransDate);

$(“#AcctName”).val(dataRecord.AcctName);

$(“#Num”).val(dataRecord.Num);

$(“#Description”).val(dataRecord.Description);

$(“#CategoryName”).val(dataRecord.CategoryName);

$(“#Memo”).val(dataRecord.Memo);

$(“#Tag”).val(dataRecord.Tag);

$(“#Status”).val(dataRecord.Status);

$(“#Payment”).val(dataRecord.Payment);

$(“#Deposit”).val(dataRecord.Deposit);

// show the popup window.

$(“#popupWindow”).jqxWindow(‘show’);
$(“#popupWindow”).jqxWindow(‘focus’);

}

else {

var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowid = selectedrowindex;
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
var commit = $("#jqxgrid").jqxGrid('deleterow', id);
getaggregatedData();
}

}
});

[GaryParticipant]

Dimitar,

Did you get my HTML file?

Best Regards,
Gary

[GaryParticipant]

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

[GaryParticipant]

Index Page

Home
DashBoard

Financial

Transactions

Account Analysis

Budget

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.

<!––>

$(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’ });
}
});

});

[GaryParticipant]

<!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>

[GaryParticipant]

Can not get code to format. Any suggestions?

[GaryParticipant]

Peter,

Thanks…

Just what I needed.

Gary

[GaryParticipant]

Peter,

Made change and filter on date works. :))

Thanks for pointing out the problem with my filter type.

Thanks,
Gary

[GaryParticipant]

Peter….

My problem with not having Style in right file.

Thanks,
Gary

[Author]

Posts