jQWidgets Forums

Tagged: datatable, Formatting number

This topic contains 8 replies, has 2 voices, and was last updated by Scott 10 years, 1 month ago.

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

Author

Formatting a number type value in a cell Posts
April 6, 2015 at 7:43 am Formatting a number type value in a cell #69584

Scott
Participant

Hi,

I’m now trying to display float number value in a cell. Data source is from json and the real data looks like this.

[{“xid”:”X0001″,”sequenceNo”:1,”transactionId”:”TX0001″,”transactionType”:”1″,”requestType”:”TRAN”,”startAt”:”20150406160914″,”amount”:1.0,”referenceNo”:”ref0001″,”elapsed”:0.0}]

The problem is all the numeric fields are displayed without digit values.

amount : 1.0 -> 1
elapsed : 0.0 -> 0

I tried cellsRenderer to show numeric values as it is.
cellsRenderer: function(row, column, value, rowData) {
return “” + value;
}
When I logged the value inside the function, the value is already changed to 1.

How can I display these numeric values correctly?

Regards,
Scott Kang

April 6, 2015 at 8:10 am Formatting a number type value in a cell #69586

Peter Stoev
Keymaster

Hi Scott,

You had to look at any of the samples to learn how to data bind the widget to a data source. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-binding-to-array.htm?arctic. The sample shows how to data bind the DataTable and to format its Columns including Numeric and Currency columns with given Format String.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 7, 2015 at 5:53 am Formatting a number type value in a cell #69615

Scott
Participant

Hi Peter,

I changed type of amount field to number. But the result was same.
The records are set after I got data from server with search function.
What may be wrong?

function search() {
$.ajax({
type: “POST”,
url: “mca.txn”,
data: “menu=txn&command=search&from=” + from_001 + “&to=” + to_001 +
success: function(data,status){
var dsource = {
dataType: ‘json’,
localData: data,
dataFields:
[
{ name: ‘MerchantId’, map: ‘merchantId’ },
{ name: ‘TransactionType’, map: ‘transactionType’ },
{ name: ‘Xid’, map: ‘xid’ },
{ name: ‘TransactionId’, map: ‘transactionId’ },
{ name: ‘StartTime’, map: ‘startAt’ },
{ name: ‘EndTime’, map: ‘endAt’ },
{ name: ‘ElapsedTime’, map: ‘elapsed’, type:’number’ },
{ name: ‘Amount’, map: ‘amount’, type:’number’ },
{ name: ‘ResponseCode’, map: ‘responseCode’, type:’string’ },
{ name: ‘ResponseMessage’, map: ‘responseMessage’ },
{ name: ‘TxnIdToCancel’, map: ‘xid’ },
{ name: ‘TxnIdToCapture’, map: ‘xid’ },
{ name: ‘SequenceNo’, map: ‘sequenceNo’ },
],
pageNum: 10,
pageSize:20,
pageable:true,
};
}

$(document).ready(function(){
$(“#list”).jqxDataTable({
theme: ‘${theme}’,
sortable: true,
pageable:true,
pageSizeOptions: [’10’, ’20’, ’30’, ’50’],
pagerMode: ‘advanced’,
width:’99%’,
columnsResize: true,
enableBrowserSelection:true,
filterable: true,
filterMode:’advanced’,
columns: [
…
{ text: ‘${rb.getString(“Amount”)}’, dataField: ‘Amount’, width:’5%’, cellClassName: cellClass,
cellsRenderer: function(row, column, value, rowData) {
return “” + value;
}
},
…
]
});

});

Regards,
Scott Kang

April 7, 2015 at 5:57 am Formatting a number type value in a cell #69616

Peter Stoev
Keymaster

Hi Scott Kang,

Results will be the same because you have custom renderer where you return only the value returned by the server. Use the approach which I posted to get a solution with desired results.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 9, 2015 at 8:00 am Formatting a number type value in a cell #69703

Scott
Participant

Hi Peter Stoev,

I managed to display two digits in the list with cellsFormat=’c2′ and without cellsRenderer.
But when I selected the row and displayed the values, the displayed value is still same.

How can I display the values correctly?

Regards,
Scott Kang

April 9, 2015 at 2:18 pm Formatting a number type value in a cell #69712

Peter Stoev
Keymaster

Hi Scott,

Please, look at the widget’s Binding help topic to learn how to use it – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatatable/jquery-datatable-data-sources.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 10, 2015 at 1:56 pm Formatting a number type value in a cell #69765

Scott
Participant

Hi Peter Stoev,

I attached simple html page to show my current issue. When I double clicked a row, the value of Amount is set in the text field below the DataTable.
The result still shows 1 not 1.00.
What may be wrong?

========================================================================================
<!DOCTYPE html>
<head>
<link rel=”stylesheet” href=”jqwidgets-ver3/jqwidgets/styles/jqx.base.css” type=”text/css”/>
<link rel=”stylesheet” href=”jqwidgets-ver3/jqwidgets/styles/jqx.metro.css” type=”text/css”/>
</head>
<body>
<p></p>
<table width=”100%”>
<tr>
<td><div id=”list”></div></td>
</tr>
</table>
Amount : <input type=”text” id=”amount-field”></input>
</body>
<script type=”text/javascript” src=”jqwidgets-ver3/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets-ver3/jqwidgets/jqx-all.js”></script>

<script language=”javascript”>

var data1 = [{“merchantId”:”mer0001″,”transactionType”:”1″,”amount”:1.00},{“merchantId”:”mer001″,”transactionType”:”1″,”amount”:1.00},{“merchantId”:”mer001″,”transactionType”:”1″,”amount”:1.04}];

$(document).ready(function(){
$( document ).ajaxError(function( event, request, settings ) {
var emsg = “code:” + request.status + “\n” + “message:” + request.responseText + “\n”;
jpaAlert(emsg, “Error”);
});
var dsource = {
dataType: ‘json’,
localData: data1,
dataFields:
[
{ name: ‘MerchantId’, map: ‘merchantId’ },
{ name: ‘TransactionType’, map: ‘transactionType’ },
{ name: ‘Amount’, map: ‘amount’, type:’float’, format:’c2′ },
],
pageNum: 10,
pageSize:20,
pageable:true,
};
var dataAdapter = new $.jqx.dataAdapter(dsource);

$(“#list”).jqxDataTable({
theme: ‘${theme}’,
sortable: true,
pageable:true,
pageSizeOptions: [’10’, ’20’, ’30’, ’50’],
pagerMode: ‘advanced’,
width:’99%’,
columnsResize: true,
enableBrowserSelection:true,
filterable: true,
filterMode:’advanced’,
columns: [
{ text: ‘Merchant’, dataField: ‘MerchantId’, width:’5%’},
{ text: ‘TransactionType’, dataField: ‘TransactionType’, width:’5%’},
{ text: ‘Amount’, dataField: ‘Amount’, width:’5%’, cellsFormat:’c2′ },
]
});
$(“#list”).jqxDataTable({source:dataAdapter});
$(‘#list’).on(‘rowDoubleClick’, function (event) {
var args = event.args;
var row = args.row;
$(“#amount-field”).val(row.Amount);
});

});

</script>
</html>
======================================================================================

Regards,
Scott Kang

April 10, 2015 at 2:22 pm Formatting a number type value in a cell #69766

Peter Stoev
Keymaster

Hi Scott,

Cell’s Value is 1, not 1.00 or $1.00. In your Data Source, the Value is 1. cellsFormat formats the value and displays in the Table – $1.00 or 1.00 depending on the cellsFormat, but the Cell’s Data Value is 1. We do not change your Data Values when you bind the widget. We display the values Formatted or not Formatted depending on whether you have Formatting applied or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 10, 2015 at 2:46 pm Formatting a number type value in a cell #69769

Scott
Participant

Hi Peter,

The value is not 1. As you can see, the value is 1.0 at least. How is it treated as 1?

Is it correct?

What did I misunderstand?

Regards,
Scott Kang
Author

Posts

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

You must be logged in to reply to this topic.