jQuery UI Widgets Forums Grid Cellsformat is displayed only after update

This topic contains 20 replies, has 3 voices, and was last updated by  vasikgreif 9 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author

  • vasikgreif
    Participant

    I’m trying to format the numbers in my table, I have:

      datafields: [
                    { name: 'spent',type: 'number' },
                ],
      ....
        columns:
                [
                  { text: Ajax.spent, datafield: 'spent', width: 100, cellsformat: 'c2',cellsalign: 'right' },
                ]
    

    The formatting is displayed only after cell update.

    What am I missing?

    Thanks

    • This topic was modified 9 years, 9 months ago by  vasikgreif.
    • This topic was modified 9 years, 9 months ago by  vasikgreif.
    • This topic was modified 9 years, 9 months ago by  vasikgreif.

    Dimitar
    Participant

    Hello vasikgreif,

    The provided code is insufficient for us to determine the source of the issue. Please post a larger code sample, including your whole grid initialization.

    Best Regards,
    Dimitar

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


    vasikgreif
    Participant

    The full code is here, in this example there’s the same problem with the Due date column:

        $(document).ready(function () {
            // prepare the data
            var data = {};
            var theme = 'classic';
            var generaterow = function () {
                var row = {};
                $.ajaxSetup({async: false});
                id = $.post(Ajax.ajaxurl,
                    {
                        action:'add_table_row',
                        post_type: 'tasks'
                    },
                    function(data,status){
    
                    });
    
                var response = $.parseJSON(id.responseText);
    
                row["id"] = response.id;
                row['nonce'] = response.nonce;
    
                return row;
            }
    
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'description' },
                    { name: 'due_date', type: 'date' },
                    { name: 'done',
                        type: 'bool'},
                    { name: 'nonce' }
                ],
                id: 'id',
                url: Ajax.ajaxurl,
                mtype: 'POST',
                data: {
                    action: 'get_table_data',
                    post_type: 'tasks'
                },
                sortcolumn: 'id',
                sortdirection: 'asc',
    
                addrow: function (rowid, rowdata, position, commit) {
                    commit(true);
                },
                updaterow: function (rowid, rowdata, commit) {
                    get_total();
                    $.ajax({
                        url: Ajax.ajaxurl,
                        type: "POST",
                        data: {
                            action: 'update_table_row',
                            id: rowdata.id,
                            name: rowdata.name,
                            description: rowdata.description,
                            due_date: rowdata.due_date,
                            done: rowdata.done,
                            nonce: rowdata.nonce
                        },
                        success: function (data, status, xhr) {
                            // update command is executed.
                            console.log(data);
                            commit(true);
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                },
                deleterow: function (rowid, commit) {
                    commit(true);
                }
            };
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                {
                    width: '99.7%',
                    height: 350,
                    source: source,
                    theme: theme,
                    editable: true,
                    sortable: true,
                    columnsresize: true,
                    showaggregates: true,
                    filterable: true,
                    showtoolbar: true,
                    ready: function() {
                        get_total();
                    },
    
                    rendertoolbar: function (toolbar) {
                        var me = this;
                        var container = $("<div style='margin: 5px;'></div>");
                        toolbar.append(container);
                        container.append('<input id="addrowbutton" type="button" value="'+Ajax.add_new_guest+'" />');
                        $("#addrowbutton").jqxButton();
                        // create new row.
                        $("#addrowbutton").on('click', function () {
                            var datarow = generaterow();
                            console.log(datarow);
                            var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                        });
                        // create new rows.
                        $("#addmultiplerowsbutton").on('click', function () {
                            $("#jqxgrid").jqxGrid('beginupdate');
                            for (var i = 0; i < 10; i++) {
                                var datarow = generaterow();
                                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                            }
                            $("#jqxgrid").jqxGrid('endupdate');
                        });
                    },
                    columns:
                        [
                            { text: 'ID', datafield: 'id', width: 100, hidden: true },
                            { text: Ajax.name, datafield: 'name', width: 100 },
                            { text: Ajax.description, datafield: 'description', width: 100 },
                            { text: Ajax.due_date, datafield: 'due_date', columntype: 'datetimeinput', width: 100, cellsformat: 'd',
                            },
                            { text: Ajax.done, datafield: 'done', width: 80, columntype: 'checkbox', },
                            { text: 'Nonce', datafield: 'nonce', width: 100, hidden: true },
                        ]
                });
        });
    

    Thanks


    Dimitar
    Participant

    Hi vasikgreif,

    Your code seems fine. Do you experience this issue running any of the demos (such as Default Functionality) locally? Please make sure you are using the latest version of jQWidgets (3.3.0).

    Best Regards,
    Dimitar

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


    vasikgreif
    Participant

    The examples work fine, I updated to latest jQWidgets (was using 3.2), but still experiencing this issue… Any idea how to debug this?

    Thanks
    Vasik


    Dimitar
    Participant

    Hi Vasik,

    On a second glance at your code, here are some things you can do, which may fix your issue:

    1) Initialize the grid from a data adapter, as shown in all demos.

    2) Remove all commas before the closing curly brackets of your columns, i.e.:

    { text: Ajax.due_date, datafield: 'due_date', columntype: 'datetimeinput', width: 100, cellsformat: 'd' },

    Best Regards,
    Dimitar

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


    vasikgreif
    Participant

    Hmm, still no luck, here’s the edited code, with jqx.dataAdapter used and the comma removed…

        $(document).ready(function () {
            // prepare the data
            var data = {};
            var theme = 'classic';
            var generaterow = function () {
                var row = {};
                $.ajaxSetup({async: false});
                id = $.post(Ajax.ajaxurl,
                    {
                        action:'add_table_row',
                        post_type: 'tasks'
                    },
                    function(data,status){
    
                    });
    
                var response = $.parseJSON(id.responseText);
    
                row["id"] = response.id;
                row['nonce'] = response.nonce;
    
                return row;
            }
    
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'description' },
                    { name: 'due_date', type: 'date' },
                    { name: 'done',
                        type: 'bool'},
                    { name: 'nonce' }
                ],
                id: 'id',
                url: Ajax.ajaxurl,
                mtype: 'POST',
                data: {
                    action: 'get_table_data',
                    post_type: 'tasks'
                },
                sortcolumn: 'id',
                sortdirection: 'asc',
    
                addrow: function (rowid, rowdata, position, commit) {
                    commit(true);
                },
                updaterow: function (rowid, rowdata, commit) {
                    get_total();
                    $.ajax({
                        url: Ajax.ajaxurl,
                        type: "POST",
                        data: {
                            action: 'update_table_row',
                            id: rowdata.id,
                            name: rowdata.name,
                            description: rowdata.description,
                            due_date: rowdata.due_date,
                            done: rowdata.done,
                            nonce: rowdata.nonce
                        },
                        success: function (data, status, xhr) {
                            // update command is executed.
                            console.log(data);
                            commit(true);
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                },
                deleterow: function (rowid, commit) {
                    commit(true);
                }
            };
    
            var dataAdapter = new $.jqx.dataAdapter(source);
    
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
                {
                    width: '99.7%',
                    height: 350,
                    source: dataAdapter,
                    theme: theme,
                    editable: true,
                    sortable: true,
                    columnsresize: true,
                    showaggregates: true,
                    filterable: true,
                    showtoolbar: true,
                    ready: function() {
                        get_total();
                    },
    
                    rendertoolbar: function (toolbar) {
                        var me = this;
                        var container = $("<div style='margin: 5px;'></div>");
                        toolbar.append(container);
                        container.append('<input id="addrowbutton" type="button" value="'+Ajax.add_new_guest+'" />');
                        $("#addrowbutton").jqxButton();
                        // create new row.
                        $("#addrowbutton").on('click', function () {
                            var datarow = generaterow();
                            console.log(datarow);
                            var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                        });
                    },
                    columns:
                        [
                            { text: 'ID', datafield: 'id', width: 100, hidden: true },
                            { text: Ajax.name, datafield: 'name', width: 150 },
                            { text: Ajax.description, datafield: 'description', width: 300 },
                            { text: Ajax.due_date, datafield: 'due_date', columntype: 'datetimeinput', width: 150, cellsformat: 'd'},
                            { text: Ajax.done, datafield: 'done', width: 80, columntype: 'checkbox'},
                            { text: 'Nonce', datafield: 'nonce', width: 100, hidden: true },
                        ]
                });
        });

    I also tested different browsers, still the same problem…


    Dimitar
    Participant

    Hi Vasik,

    Would you be able to create a JSFiddle example which reproduces the reported issue and which we may be able to test to determine the source of the issue?

    Best Regards,
    Dimitar

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


    vasikgreif
    Participant

    Here’s the jsfiddle:

    http://jsfiddle.net/6uD9x/3/

    • This reply was modified 9 years, 8 months ago by  vasikgreif.

    Peter Stoev
    Keymaster

    Hey Guys,

    I think that here’s necessary to set not only the type to “date” but also the format setting in order to describe your custom Date format due to the fact that it is not standard type. To learn how to set the format setting, look at: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm

    Best Regards,
    Peter Stoev

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


    vasikgreif
    Participant

    Hmmm, this brings multiple questions:

    – adding { name: 'due_date', type: 'date', format: "yyyy-MM-dd" } didn’t help
    – it works without specifying any format here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?classic
    – I have the same problem with currency formatting, not just date
    – the format I got saved into db is Wed Jan 01 2014 00:00:00 GMT+0100 (Central Europe Standard Time), I guess it should just be ‘2014-01-01 00:00:00’

    Any ideas?
    Thanks


    Peter Stoev
    Keymaster

    Hi vasikgreif,

    Yes it works on our site, because we do not use so custom datetime format such as: Wed Jan 01 2014 00:00:00 GMT+0100 (Central Europe Standard Time). How do you think the widget can parse such string to Date? We could not know your DateTime Format String and parse it to Date object if you do not specify the “format”. The built-in parsing tried several commonly used formats, but it may fail in such custom scenarios. Your current string is incorrect i.e yyyy-MM-dd is not enough, because it does not describe your data source’s date format. It should be something more like: dddd MMM dd yyyy hh:mm:ss and so on i.e to describe exactly your data source’s date format. Another option is to save your Dates in simpler formats in order to load them or save them in the formats which you want to use i.e in yyyy-MM-dd format.

    Best Regards,
    Peter Stoev

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


    vasikgreif
    Participant

    Thanks, but I’m not saving the dates in a custom format, this is how the datetimeinput columntype passes them, I’m just saving whatever I get via Ajax! How can I change that to some correct format?

    • This reply was modified 9 years, 8 months ago by  vasikgreif.

    Peter Stoev
    Keymaster

    1. Your post is: Cellsformat is displayed only after update which means that Cellsformat is not displayed before update, right? This means that your DB has different Date Format in original, right? What is your DB Date Format?
    2. The DateTimeInput passes a JavaScript Date object, not a String which is Wed Jan 01 2014 00:00:00 GMT+0100 (Central Europe Standard Time). If you want to use different format, use the dataAdapter’s formatDate method to format a Date object to a String of your choice.

    Best Regards,
    Peter Stoev

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


    vasikgreif
    Participant

    Sorry, I’m really confused on this one. I save into db anything that comes from jqxGrid via Ajax. Ie., when I do var_dump($_POST) in my php script, I get ["due_date"]=> string(64) "Thu Mar 14 2013 00:00:00 GMT+0100 (Central Europe Standard Time)"

    This is what I’m doing on update_row, and even in the console.log it returns the badly formated date:

    updaterow: function (rowid, rowdata, commit) {
                    console.log(rowdata.due_date);
    
                    $.ajax({
                        url: Ajax.ajaxurl,
                        type: "POST",
                        data: {
                            action: 'update_table_row',
                            id: rowdata.id,
                            name: rowdata.name,
                            description: rowdata.description,
                            due_date: rowdata.due_date,
                            done: rowdata.done,
                            nonce: rowdata.nonce
                        },
                        success: function (data, status, xhr) {
                            // update command is executed.
                            console.log(data);
                            commit(true);
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                },
                

    I’m really lost. Thanks for help

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.