cellsformat with time

[supun151515Participant]

Hello. First of all I ahve to tell you that you have designed great grid for web.
I have problem with formatting time. date format is working fine.
I need to display time ex: 10:54 AM. You can see below code. Please help me.

var source =
{
datatype: “json”,
datafields:
[ { name: ‘auto_no’ , type: ‘number’},
{ name: ‘job_date’, type: ‘date’ },
{ name: ‘time_from’, type: ‘time’ }
],
id: ‘id’,
url: data
};

jQuery(“#grid”).jqxGrid(
{
width: 635,
height: 250,
source: adapter,
theme: theme,
groupable: true,
filterable: true,
columnsresize: true,
sortable: true,
autoheight: false,
columnsreorder: true,
showfilterrow: true,
ready: function () {
},
autoshowfiltericon: true,
columns: [
{ text: ‘Job No.’, datafield: ‘job_no’, width: 50, cellsalign: ‘center’ },
{ text: ‘Job Date’, datafield: ‘job_date’, cellsformat: ‘yyyy-MM-dd’, width: 95, cellsalign: ‘center’ },
{ text: ‘Time From’, datafield: ‘time_from’, cellsformat: ‘H:mm’, width: 85, cellsalign: ‘left’ },
]

});

Thank you,
Supun Silva

[DimitarParticipant]

Hello Supun Silva,

The type of a datafield cannot be “time”. Set it to “date” instead and set the “Time From” column cellsformat to “H:mm tt”.

Best Regards,
Dimitar

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

[supun151515Participant]

Dear Dimitar,
Thanks for your quick reply. But still I get 24hrs. I need it in 12hrs(AM/PM).
Please note: in my MySql database column format is ”Time’.

Thank You,
Supun Silva

[DimitarParticipant]

Hi Supun Silva,

Change the cellsformat to “h:mm tt” (lower case h). A list of available formats can be found in the API Documentation, under columns.

Best Regards,
Dimitar

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

[supun151515Participant]

Hello Dimitar,
Sorry for disturbing you again. h:mm tt format works only on mysql date. but I use mysql time field.
My json data as below;
[{“0″:”454545″,”client_id”:”454545″,”1″:”28″,”auto_no”:”28″,”2″:”1″,”job_no”:”1″,”3″:”1\/S”,”emp_no”:”1\/S”,”4″:”2014-05-18″,”job_date”:”2014-05-18″,”5″:“14:25:00″,”time_from”:”14:25:00″,“6”:”17:00:00″
Thank you,
Supun Silva

[DimitarParticipant]

Hi Supun Silva,

You may also try setting the datafield’s format option, too:

{ name: 'time_from', type: 'date', format: 'h:mm tt' }

If this does not work either, you can load the data as a string (as it is already formatted as time) and add AM/PM with cellsrenderer.

Best Regards,
Dimitar

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

[supun151515Participant]

Hi Dimitar,
I tried to understand your cell rendering example. But it is realy complecated because it has for loop only till 100. What will happan if grid has more than 100 records?
Could you please kindly explain me, how to insert cell rendering to below code;

var source =
{
datatype: “json”,
datafields:
[ { name: 'auto_no' , type: 'number'},
{ name: 'job_date', type: 'date' },
{ name: 'time_from', type: 'time' }
],
id: ‘id’,
url: data
};

jQuery(“#grid”).jqxGrid(
{
width: 635,
height: 250,
source: adapter,
theme: theme,
groupable: true,
filterable: true,
columnsresize: true,
sortable: true,
autoheight: false,
columnsreorder: true,
showfilterrow: true,
ready: function () {
},
autoshowfiltericon: true,
columns: [
{ text: 'Job No.', datafield: 'job_no', width: 50, cellsalign: 'center' },
{ text: 'Job Date', datafield: 'job_date', cellsformat: 'yyyy-MM-dd', width: 95, cellsalign: 'center' },
{ text: 'Time From', datafield: 'time_from', cellsformat: 'H:mm', width: 85, cellsalign: 'left' },
]

});

[DimitarParticipant]

Hi Supun Silva,

I see you did not make the suggested changes. As I said, there is no datafield type “time” so you have to change it to “string” or “date”. Here is also how to implement cellsrenderer:

var source = {
    datatype: "json",
    datafields: [{
        name: 'auto_no',
        type: 'number'
    }, {
        name: 'job_date',
        type: 'date'
    }, {
        name: 'time_from',
        type: 'string'
    }],
    id: 'id',
    url: data
};

jQuery("#grid").jqxGrid({
    width: 635,
    height: 250,
    source: adapter,
    theme: theme,
    groupable: true,
    filterable: true,
    columnsresize: true,
    sortable: true,
    autoheight: false,
    columnsreorder: true,
    showfilterrow: true,
    ready: function() {},
    autoshowfiltericon: true,
    columns: [{
        text: 'Job No.',
        datafield: 'job_no',
        width: 50,
        cellsalign: 'center'
    }, {
        text: 'Job Date',
        datafield: 'job_date',
        cellsformat: 'yyyy-MM-dd',
        width: 95,
        cellsalign: 'center'
    }, {
        text: 'Time From',
        datafield: 'time_from',
        width: 85,
        cellsalign: 'left',
        cellsrenderer: function(row, columnfield, value, defaulthtml, columnproperties) {
            var hour = value.substring(0, 1);
            if (hour < 12) {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + 'AM</span>';
            } else {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">' + value + 'PM</span>';
            }
        }
    }]
});

Best Regards,
Dimitar

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

[Author]

Posts