jQuery UI Widgets Forums Grid cellsformat with time

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • cellsformat with time #58269

    supun151515
    Participant

    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

    cellsformat with time #58270

    Dimitar
    Participant

    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/

    cellsformat with time #58271

    supun151515
    Participant

    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

    • This reply was modified 9 years, 6 months ago by  supun151515. Reason: added mysql column format
    cellsformat with time #58273

    Dimitar
    Participant

    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/

    cellsformat with time #58276

    supun151515
    Participant

    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

    • This reply was modified 9 years, 6 months ago by  supun151515.
    cellsformat with time #58299

    Dimitar
    Participant

    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/

    cellsformat with time #58374

    supun151515
    Participant

    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' },
    ]
    
    });
    cellsformat with time #58383

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.