[vasikgreifParticipant]

Thanks for your time. Here’s the edited version of code with local data, with the exact data I’m getting from my Ajax calls. Could you please check that? The problem is that while I’m getting the term_id value (in tableData), nothing is displayed in the dropdown.

jQuery(document).ready(function ($) {
    $(document).ready(function () {
        // prepare the data

        var taxonomies = '[{"term_id":"17","name":"nova kategorie 2","slug":"nova-kategorie-2","term_group":"0","term_taxonomy_id":"17","taxonomy":"budget-category","description":"","parent":"0","count":"0"},{"term_id":"18","name":"dalsi kategorie","slug":"dalsi-kategorie","term_group":"0","term_taxonomy_id":"18","taxonomy":"budget-category","description":"","parent":"0","count":"0"}]';
        var data = {};
        var theme = 'classic';
        var dropDownListSource =
        {
            datatype: "json",
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'term_id', type: 'string' }
            ],
            localdata: taxonomies
        };

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

        var tableData= '[{"id":["221"],"action":["update_table_row"],"spent":["400"],"term_id":["17"],"nonce":"5dd2521156"},{"id":["216"],"action":["update_table_row"],"title":["Polozka 2"],"budget":["45454"],"supplier_estimate":["5555"],"spent":["444"],"note":[""],"category":["18"],"paid":[""],"term_id":["18"],"nonce":"de685bdea2"},{"id":["215"],"action":["update_table_row"],"title":["Polozka 1"],"budget":["1000"],"supplier_estimate":["500"],"spent":["500"],"note":["hhhaaa"],"paid":["yes"],"category":["17"],"term_id":["18"],"nonce":"44d19b78c2"}]';
        var source =
        {
            datatype: "json",
            localdata: tableData,

            datafields: [
                { name: 'id' },
                { name: 'title' },
                { name: 'budget' },
                { name: 'supplier_estimate' },
                { name: 'spent' },
                { name: 'paid' },
                { name: 'note' },
                { name: 'nonce' },
                { name: 'category', value: 'term_id', values: { source: dropdownListAdapter, value: 'term_id', name: 'name' }},
                { name: 'term_id'}
            ],
            id: 'id',
            sortcolumn: 'id',
            sortdirection: 'asc'
        };

        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
            {
                width: 1200,
                height: 350,
                selectionmode: 'singlerow',
                source: source,
                theme: theme,
                editable: true,
                sortable: true,
                columnsresize: true,
                showaggregates: true,
                filterable: true,
                showtoolbar: true,
                
                columns:
                    [
                        { text: 'ID', datafield: 'id', width: 100, hidden: true },
                        { text: 'Item', datafield: 'title', width: 100 },
                        { text: 'Budget', datafield: 'budget', width: 100 },
                        { text: 'Supplier estimate', datafield: 'supplier_estimate', width: 100 },
                        { text: 'Spent', datafield: 'spent', width: 100 },
                        { text: 'Note', datafield: 'note', width: 100,resizable: true },
                        { text: 'Paid', datafield: 'paid', columntype: 'dropdownlist', width: 100,
                            createeditor: function (row, column, editor) {
                                var list = ['yes','no'];
                                editor.jqxDropDownList({ source: list });
                            },
                            aggregates: [{ 'Total':
                                function (aggregatedValue, currentValue) {
                                    if (currentValue) {
                                        return aggregatedValue + 1;
                                    }
                                    return aggregatedValue;
                                }
                            }
                            ]
                        },
                        { text: 'Category', columntype: 'dropdownlist', datafield: 'term_id', displayfield: 'name', width: 100,
                            createeditor: function (row, value, editor) {
                                editor.jqxDropDownList({ source: dropdownListAdapter , displayMember: 'name', valueMember: 'term_id' });
                            }
                        },
                        { text: 'Nonce', datafield: 'nonce', width: 100, hidden: true }

                ]
            });
    });
});

[vasikgreifParticipant]

Hi Dimitar,
thanks for trying to help.

I’m trying to get the same funcionality as in the example you provided – display a dropdown with displayValues and save another value. I modified my code as per the example, but it still doesn’t work – the dropdown is displayed, the correct value term_id is saved to db, but on page refresh nothing is displayed in the dropdown. I’m obviously missing something, but cannot figure out what.

For the code button, I tried that (the backticks are in there), but for some reason it didn’t work…

[vasikgreifParticipant]

Thanks, I checked that example and tried to mimic it, but for some reason I cannot figure how to do that right. I don’t get what the countryCode column is doing there…

My current code is:

`
// 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: ‘budget’
},
function(data,status){

});

var response = $.parseJSON(id.responseText);

row[“id”] = response.id;
row[‘nonce’] = response.nonce;

return row;
}

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’ },
{ name: ‘supplier_estimate’ },
{ name: ‘spent’ },
{ name: ‘paid’ },
{ name: ‘note’ },
{ name: ‘nonce’ },
{ name: ‘category’, value: ‘term_id’, values: { source: dropdownListAdapter, 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) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
//and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
updaterow: function (rowid, rowdata, commit) {
get_total();
$.ajax({
url: Ajax.ajaxurl,
type: “POST”,
data: {
action: ‘update_table_row’,
id: rowdata.id,
title: rowdata.title,
budget: rowdata.budget,
supplier_estimate: rowdata.supplier_estimate,
spent: rowdata.spent,
paid: rowdata.paid,
note: rowdata.note,
category: rowdata.category,
term_id: rowdata.term_id,
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: 1200,
height: 350,
selectionmode: ‘singlerow’,
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_item +'” />’);
container.append(‘<input style=”margin-left: 5px;” id=”addmultiplerowsbutton” type=”button” value=”Add Multiple New Rows” />’);
$(“#addrowbutton”).jqxButton();
$(“#addmultiplerowsbutton”).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.item, datafield: ‘title’, width: 100 },
{ text: Ajax.budget, datafield: ‘budget’, width: 100 },
{ text: ‘Supplier estimate’, datafield: ‘supplier_estimate’, width: 100 },
{ text: ‘Spent’, datafield: ‘spent’, width: 100 },
{ text: ‘Note’, datafield: ‘note’, width: 100,resizable: true },
{ text: ‘Paid’, datafield: ‘paid’, columntype: ‘dropdownlist’, width: 100,
createeditor: function (row, column, editor) {
var list = [‘yes’,’no’];
editor.jqxDropDownList({ source: list });
},
aggregates: [{ ‘Total’:
function (aggregatedValue, currentValue) {
if (currentValue) {
return aggregatedValue + 1;
}
return aggregatedValue;
}
}
]
},
{ text: ‘Category’, columntype: ‘dropdownlist’, datafield: ‘term_id’, displayfield: ‘name’, width: 100,
createeditor: function (row, value, editor) {
editor.jqxDropDownList({ source: dropdownListAdapter , displayMember: ‘name’, valueMember: ‘term_id’ });
}
},
{ text: ‘Nonce’, datafield: ‘nonce’, width: 100, hidden: true }
]
});
});
`

Could you please help me to fix that? Thanks

[Author]

Posts