[vasikgreifParticipant]

Hi nadezhda, thanks, this worked like a charm! Btw., is there a documentation on functions available, so I won’t have to post such simple questions?

Thanks!
Vasik

[vasikgreifParticipant]

THANKS!!! That was the problem – I was loading arrays instead of values. Once I changed it, it works!

Thanks again for helping.

[vasikgreifParticipant]

Thanks Peter, I got the correct format saved to db by sending to server:

var due_date = dataAdapter.formatDate(rowdata.due_date, 'yyyy-MM-dd');

Still, the format isn’t displayed on page load, as can be seen in this jsfiddle: http://jsfiddle.net/6uD9x/4/

[vasikgreifParticipant]

Thanks Peter for trying to help, but as I said, console.log(rowdata.due_date) inside the updaterow method returns Mon Mar 17 2014 00:00:00 GMT+0100 (Central Europe Standard Time).

Could you please give me an example how can I format the rowdata.due_date through the dataAdapter? I obviously don’t have any idea what to do..:-(

[vasikgreifParticipant]

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

[vasikgreifParticipant]

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?

[vasikgreifParticipant]

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

[vasikgreifParticipant]

Here’s the jsfiddle:

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

[vasikgreifParticipant]

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…

[vasikgreifParticipant]

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

[vasikgreifParticipant]

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

[vasikgreifParticipant]

I found I can get column and record valued inside the function, so I solved this as following:

        var total = [];
        var total_budget = $("#jqxgrid").jqxGrid('getcolumnaggregateddata', 'budget', [{
            'sum': function (aggregatedValue, currentValue, column, record) {
                // on update, term_id is string, on init it is Array
                if (record.term_id instanceof Array) {
                    var cat_id = record.term_id[0];
                }
                else var cat_id = record.term_id;

                // if there's not a category with this id in total array yet, add a new object for it
                if (typeof(total[cat_id]) == 'undefined') {
                    total[cat_id] = {};
                    total[cat_id].name = record.category;
                    total[cat_id].budget = 0;
                    total[cat_id].spent = 0;
                    total[cat_id].suppl_est = 0;

                }

                // all these checks are necesarry because the records are sent in different formats on init and update
                if (typeof(record.budget) != 'undefined') {
                    if (typeof(record.budget[0]) != 'undefined') {
                        var budget_val = parseInt(record.budget[0]) || 0;
                        total[cat_id].budget = total[cat_id].budget + budget_val;
                    }
                    else {
                        var budget_val = parseInt(record.budget) || 0;
                        total[cat_id].budget = total[cat_id].budget + budget_val;
                    }
                }

                if (typeof(record.spent) != 'undefined') {

                    if (typeof(record.spent[0]) != 'undefined') {
                        var spent_val = parseInt(record.spent[0]) || 0;
                        total[cat_id].spent= total[cat_id].spent + spent_val;
                    }
                    else {
                        var spent_val = parseInt(record.spent) || 0;
                        total[cat_id].spent = total[cat_id].spent + spent_val;
                    }
                }

                if (typeof(record.supplier_estimate) != 'undefined') {
                    if (typeof(record.supplier_estimate[0]) != 'undefined') {
                        var suppl_val = parseInt(record.supplier_estimate[0]) || 0;
                        total[cat_id].suppl_est = total[cat_id].suppl_est + suppl_val;
                    }
                    else {
                        var suppl_val = parseInt(record.supplier_estimate) || 0;
                        total[cat_id].suppl_est = total[cat_id].suppl_est + suppl_val;
                    }
                }
                return parseInt(aggregatedValue) + currentValue;
            }
        }]);
        // $('.total .total_sum') is my table
        $('.total .total_sum').html('');

        // for each category, add row with correct totals
        total.forEach(function(entry) {
            $('.total .total_sum').append('<tr><td>'+entry.name+'</td><td>'+entry.budget+'</td><td>'+parseInt(entry.suppl_est)+'</td><td>'+entry.spent+'</td></tr>');
        });
        

There might be better way to do this, but I hope this helps someone…

[vasikgreifParticipant]

Could you please explain more, from where can I pass the parameter? I’m calling the function on update_row and init_editor now, please see my code bellow (shortened to make it easier to read):

    $(document).ready(function () {
        var data = {};
        var theme = 'classic';
        var dropDownListSource =
        {
            datatype: "json",
            datafields: [
                { name: 'name' },
                { name: 'term_id' }
            ],
            id: 'id',
            url: Ajax.ajaxurl,
            mtype: 'POST',
            data: {
                action: 'get_taxonomy_terms'
            }
        };

        var dropdownListAdapter = new $.jqx.dataAdapter(dropDownListSource, { autoBind: true, async: false });

        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'id' },
                { name: 'title' },
                { name: 'budget',type: 'number' },
                { name: 'supplier_estimate', type: 'number' },
                { name: 'spent',type: 'number' },
                { name: 'note' },
                { name: 'nonce' },
                { name: 'category', value: 'term_id', values: { source: dropdownListAdapter.records, value: 'term_id', name: 'name' }},
                { name: 'term_id'},
            ],
            id: 'id',
            url: Ajax.ajaxurl,
            mtype: 'POST',
            data: {
                action: 'get_table_data',
                post_type: 'budget'
            },
            sortcolumn: 'id',
            sortdirection: 'asc',

            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            },
            updaterow: function (rowid, rowdata, commit) {
                // I'm calling the get_total function here
                get_total();
            }
        };

        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
            {
                width: 1200,
                height: 350,
                selectionmode: 'singlerow',
                source: source,
                ready: function() {
                  // I'm calling the get_total function also here  
                  get_total();
                },
                columns:
                    [
                        { text: 'ID', datafield: 'id', width: 100, hidden: true },
                        { text: Ajax.category, columntype: 'dropdownlist', datafield: 'term_id', displayfield: 'category', width: 100,
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: dropdownListAdapter , displayMember: 'name', valueMember: 'term_id' });
                            }
                        },
                        { text: Ajax.budget, datafield: 'budget', width: 100, cellsalign: 'right'  }
                    ]
            });
    });

Basically, what I need is get the sum of budget column for each term_id. Could you point me to the right direction to do this?

[vasikgreifParticipant]

Please ignore this question, I noticed it works already – it seems the Ajax to get dropdown data is called everytime the dropdown is accessed…

[vasikgreifParticipant]

This one works! Thanks so much for help.

Last question on this one: is there an easier way to have the same funcionality with two specific values values only? I mean, I need to display yes/no in another dropdown and save 1/0…?

Thanks again

[Author]

Posts