jQWidgets Forums

Tagged: angular grid, bootstrap grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid format date

This topic contains 5 replies, has 2 voices, and was last updated by alastairwalker 8 years, 7 months ago.

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

Author

Getting the correct date format using 'getrowdata' Posts

October 26, 2016 at 8:38 am Getting the correct date format using 'getrowdata' #88493

Participant

With reference to the demo script:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is illustrated how to create a Grid with column which displays values from foreign data source. The ComboBox editor associated to the column is populated from the foreign data source.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="../../globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../scripts/generatedata.js"></script>

 <script type="text/javascript">
$(document).ready(function () 
{
	console.log ('got here');
	 var data = generatedata(500);
	 var source = {
	     localdata: data,
	     datafields: [{
	         name: 'firstname',
	         type: 'string'
	     }, {
	         name: 'lastname',
	         type: 'string'
	     }, {
	         name: 'productname',
	         type: 'string'
	     }, {
	         name: 'date',
	         type: 'date'
	     }, {
	         name: 'quantity',
	         type: 'number'
	     }, {
	         name: 'price',
	         type: 'number'
	     }],
	     datatype: "array"
	 };

 	var adapter = new $.jqx.dataAdapter(source);
	 $("#jqxgrid").jqxGrid({
	     width: 500,
	     theme: 'energyblue',
	     source: adapter,
	     sortable: true,
	     selectionmode: 'singlecell',
	     columns: [{
	         text: 'First Name',
	         datafield: 'firstname',
	         columngroup: 'Name',
	         width: 90
	     }, {
	         text: 'Last Name',
	         columngroup: 'Name',
	         datafield: 'lastname',
	         width: 90
	     }, {
	         text: 'Product',
	         datafield: 'productname',
	         width: 170
	     }, {
	         text: 'Order Date',
	         datafield: 'date',
	         width: 160,
	         cellsformat: 'dd-MMMM-yyyy'
	     }, {
	         text: 'Quantity',
	         datafield: 'quantity',
	         width: 80,
	         cellsalign: 'right'
	     }, {
	         text: 'Unit Price',
	         datafield: 'price',
	         cellsalign: 'right',
	         cellsformat: 'c2'
	     }]
	 });

	 $("#jqxbutton").jqxButton({
	     theme: 'energyblue',
	     width: 100,
	     height: 30
	 });

	 $('#jqxbutton').click(function () {
	     var data = $('#jqxgrid').jqxGrid('getrowdata', 0);
	     alert(data.firstname + " " + data.lastname + " " + data.date);
	 });
 });
</script>
</head>
<body class='default'>

<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Get row data" />

</body>
</html>

When the demo is run, the response is shown when the button is clicked:

‘Peter Devling Sat Sep 12 2015 00:00:00 GMT+0200 (South Africa Standard Time)’ (i.e. using the first row.)

How do I get the date format to be what is indicated in ‘cellsformat: ‘dd-MMMM-yyyy’?

I seem to be missing something?

Many thanks,

Alastair

October 27, 2016 at 7:03 am Getting the correct date format using 'getrowdata' #88525

Christopher

Participant

Hi alastairwalker,

cellsrenderer only changes the way the value of the cell is rendered. This means that if you retrieve the value of the cell using the API methods you will see the original date that isn’t formated. So if you want to use the same format that you’ve applied to the jqxGrid column when you retrieve the date, you need to format it again. There’s a very easy way to do it, through the formatDate function of the jqxdataAdapter. Like so:
adapter.formatDate(data.date, 'dd-MMMM-yyyy').

Here is the full code with the applied changes:


       console.log('got here');
            var data = generatedata(500);
            var source = {
                localdata: data,
                datafields: [{
                    name: 'firstname',
                    type: 'string'
                }, {
                    name: 'lastname',
                    type: 'string'
                }, {
                    name: 'productname',
                    type: 'string'
                }, {
                    name: 'date',
                    type: 'date'
                }, {
                    name: 'quantity',
                    type: 'number'
                }, {
                    name: 'price',
                    type: 'number'
                }],
                datatype: "array"
            };

            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid({
                width: 500,
                theme: 'energyblue',
                source: adapter,
                sortable: true,
                selectionmode: 'singlecell',
                columns: [{
                    text: 'First Name',
                    datafield: 'firstname',
                    columngroup: 'Name',
                    width: 90
                }, {
                    text: 'Last Name',
                    columngroup: 'Name',
                    datafield: 'lastname',
                    width: 90
                }, {
                    text: 'Product',
                    datafield: 'productname',
                    width: 170
                }, {
                    text: 'Order Date',
                    datafield: 'date',
                    width: 160,
                    cellsformat: 'dd-MMMM-yyyy'
                }, {
                    text: 'Quantity',
                    datafield: 'quantity',
                    width: 80,
                    cellsalign: 'right'
                }, {
                    text: 'Unit Price',
                    datafield: 'price',
                    cellsalign: 'right',
                    cellsformat: 'c2'
                }]
            });

            $("#jqxbutton").jqxButton({
                theme: 'energyblue',
                width: 100,
                height: 30
            });

            $('#jqxbutton').click(function () {
                var data = $('#jqxgrid').jqxGrid('getrowdata', 0);
                alert(data.firstname + " " + data.lastname + " " + adapter.formatDate(data.date, 'dd-MMMM-yyyy'));
            });

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

October 27, 2016 at 7:21 am Getting the correct date format using 'getrowdata' #88527

alastairwalker

Participant

That is absolutely brilliant! I would never have cottoned onto that approach!

I was exploring a rather tedious route through javascript to convert the UTC format. But this approach saves a lot of bother!

Many thanks,

Alastair

October 27, 2016 at 7:53 am Getting the correct date format using 'getrowdata' #88531

alastairwalker

Participant

It was a good idea until I tried to use in my own context.

The ‘problem’ with the jqxdataAdapter is that it is not associated with a selector. The consequence of this is that it cannot be selected/used outside of its immediate context of instantiation.

In simple terms, if it was created in a function somewhere, and you need to access the adapter in a different context (i.e. function) – it cannot be done.

Unless I am missing something?

Alastair

October 27, 2016 at 8:35 am Getting the correct date format using 'getrowdata' #88534

Christopher

Participant

Hi alastairwalker,

Why don’t you just assign it to a global variable so you can use it later? If you cant use the jqxdataAdapter, then you need to format the date using JavaScript operations.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

October 27, 2016 at 2:28 pm Getting the correct date format using 'getrowdata' #88543

alastairwalker

Participant

Yes – I agree – now that I have had a chance to think about it. Global variable is the way to go.

Thank you!

Alastair

Author

Posts

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

You must be logged in to reply to this topic.