update DataTable

[cpuinParticipant]

i want to make basket with products.There is one button and dataTable.Products displayed in dataTable are stored in arrays.What i’m trying to do is when the button is clicked , a dialog appears when a product is selected i make first_row_array.push(“product1”) and want to update(serenader the table) in order to display the new added row.Unfortunately .jqxDataTable(‘refresh’); doesn’t do what i need.

$("#productsTable").on('rowDoubleClick', function (event) {
	      	                  
	      	                   productCodes.push("New First Name");
	      	                   productNames.push("New First Name");
	      	                  
	      	                       $("#productsTable").jqxDataTable('refresh'); 
	      	                      
	      	                 
	      	                  $("#dialogProducts").jqxWindow('close');
	      	              });

[DimitarParticipant]

Hello cpuin,

In this case you need to call updateBoundData instead of refresh.

Best Regards,
Dimitar

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

[cpuinParticipant]

Thank you for your answer.
Unfortunately console.log(array_name.length) shows that the array is updated, but calling updateBoundData doesn’t update the content of the table

[DimitarParticipant]

Hi cpuin,

Could you, please, provide us with a complete example (preferably at JSFiddle) we can test to determine the source of the issue?

Best Regards,
Dimitar

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

[cpuinParticipant]

<script type=”text/javascript”>
$(document).ready(function () {

//init table
// prepare the data
var data = new Array();
var productCodes =
[
“код”, “1”
];
var productNames =
[
“описание”, “1”
];
var productPriceOut2 =
[
“цена”, “1”
];
var productQuantity =
[
“количество”, “1”
];

for (var i = 0; i < productCodes.length; i++) {
var row = {};
row[“codes”] = productCodes[i];
row[“names”] = productNames[i];
row[“prices”] = productPriceOut2[i];
row[“quantity”] = productQuantity[i];
row[“total”] = productPriceOut2[i] * productQuantity[i];
data[i] = row;
}
var source =
{
localData: data,
dataType: “array”,
dataFields:
[
{ name: ‘codes’, type: ‘string’ },
{ name: ‘names’, type: ‘string’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘prices’, type: ‘number’ },
{ name: ‘total’, type: ‘number’ }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#saleTable”).jqxDataTable(
{
width: 850,
pageable: false,
pagerButtonsCount: 10,
source: dataAdapter,
filterable: false,
filtermode: ‘simple’,
showAggregates: true,
aggregatesHeight: 60,
columnsResize: false,
columns: [
{ text: ‘Код’, dataField: ‘codes’, width: 160 },
{ text: ‘Описание’, dataField: ‘names’, width: 420 },
{ text: ‘Количество’, dataField: ‘quantity’, width: 90, cellsAlign: ‘right’, align: ‘right’ },
{ text: ‘Ед.Цена’, dataField: ‘prices’, width: 90, cellsAlign: ‘right’, align: ‘right’, cellsFormat: ‘c2’ },
{ text: ‘Тотал’, dataField: ‘total’, width: 90, cellsAlign: ‘right’, align: ‘right’, cellsFormat: ‘c2’ }
]
});
//END SALE TABLE

//init items
$(“#openProducts”).jqxButton();
$(“#dialogProducts”).jqxWindow({
resizable: false,
isModal: true,
position: ‘center’,
width: 850, height: 480,
autoOpen: false

});
$(“#dialogProducts”).css(‘visibility’, ‘visible’);
$(“#cancelButton”).jqxButton();
$(“#saveButton”).jqxButton();

//functions
$(“#cancelButton”).mousedown(function () {
// close jqxWindow.
$(“#dialogProducts”).jqxWindow(‘close’);
});

$(“#openProducts”).mousedown(function () {
// close jqxWindow.
$(“#dialogProducts”).jqxWindow(‘open’);

// update the widgets inside jqxWindow.

});

$(“#saveButton”).mousedown(function () {
// close jqxWindow.
$(“#dialogProducts”).jqxWindow(‘close’);
// update edited row.
var editRow = parseInt($(“#dialogProducts”).attr(‘data-row’));
var rowData = {
ID: editRow+1,
Code: $(“#itemCode”).val(),
Name: $(“#itemName”).val(),
PriceIn: $(“#itemPriceIn”).val(),
PriceOut1: $(“#itemPriceOut1”).val(),
PriceOut2: $(“#itemPriceOut2”).val(),
PriceOut3: $(“#itemPriceOut3”).val(),
PriceOut4: $(“#itemPriceOut4”).val(),
PriceOut5: $(“#itemPriceOut5”).val()
};
$(“#dataTable”).jqxDataTable(‘updateRow’, editRow, rowData);
});

//products data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘ID’, type: ‘int’},
{ name: ‘Code’, type: ‘string’},
{ name: ‘Name’, type: ‘string’},
//{ name: ‘PriceIn’, type: ‘double’},
{ name: ‘PriceOut1’ , type: ‘double’},
{ name: ‘PriceOut2’ , type: ‘double’},
{ name: ‘PriceOut3’ , type: ‘double’},
{ name: ‘PriceOut4’ , type: ‘double’},
{ name: ‘PriceOut5’ , type: ‘double’}
],
url: ‘products_json.php’,
cache: false,
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) {
var data = “update=true&” + $.param(rowData);
$.ajax({
dataType: ‘json’,
url: ‘products_json.php’,
cache: false,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
commit(false);
alert(‘Does not work :(‘);
}
});
},
deleteRow: function (rowID, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#productsTable”).jqxDataTable(
{
width: 780,
pageable: true,
pagerButtonsCount: 10,
source: dataAdapter,
filterable: true,
filtermode: ‘simple’,
columnsResize: false,
columns: [
{ text: ‘Код’, dataField: ‘ID’, width: 100 },
{ text: ‘SKU’, dataField: ‘Code’, width: 200 },
{ text: ‘Описание’, dataField: ‘Name’, width: 350 },
//{ text: ‘Доставна цена’, dataField: ‘PriceIn’, cellsFormat: ‘f’, width: 100 },
{ text: ‘Цена дребно’, dataField: ‘PriceOut2’ , width: 130}
]
});

$(“#cancelButton”).jqxButton();
$(“#cancelButton”).mousedown(function () {
// close jqxWindow.
$(“#dialog”).jqxWindow(‘close’);
});
$(“#saveButton”).jqxButton();
$(“#saveButton”).mousedown(function () {
// close jqxWindow.
$(“#dialog”).jqxWindow(‘close’);
// update edited row.
var editRow = parseInt($(“#dialog”).attr(‘data-row’));
var rowData = {
ID: editRow+1,
Code: $(“#itemCode”).val(),
Name: $(“#itemName”).val(),
PriceIn: $(“#itemPriceIn”).val(),
PriceOut1: $(“#itemPriceOut1”).val(),
PriceOut2: $(“#itemPriceOut2”).val(),
PriceOut3: $(“#itemPriceOut3”).val(),
PriceOut4: $(“#itemPriceOut4”).val(),
PriceOut5: $(“#itemPriceOut5”).val()
};
$(“#productsTable”).jqxDataTable(‘updateRow’, editRow, rowData);
});
$(“#dialogProducts”).on(‘close’, function () {
// enable jqxDataTable.
$(“#productsTable”).jqxDataTable({ disabled: false });
});

$(“#productsTable”).on(‘rowDoubleClick’, function (event) {

productCodes.push(“2”);
productNames.push(“2”);
productPriceOut2.push(“2”);
productQuantity.push(“2”);

$(“#saleTable”).jqxDataTable(‘updateBoundData’);

console.log(productCodes.length);

$(“#dialogProducts”).jqxWindow(‘close’);
});

});

</script>

<button id=”openProducts”>Добави</button>
<br><br>
<div id=”saleTable”></div>

<div style=”visibility: hidden;” id=”dialogProducts”>
<div>Select product</div>
<div style=”overflow: hidden;”>
<table style=”table-layout: fixed; border-style: none;”>
<tr>
<td align=”right”>
<div id=”productsTable”></div>
<button id=”saveButton”>Запази</button> <button style=”margin-left: 5px;” id=”cancelButton”>Откажи</button></td>
</tr>
</table>
</div>

`

[DimitarParticipant]

Hi cpuin,

Here is a small example that demonstrates how to achieve the required functionality:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = [{ firstname: "Name", lastname: "LastName"}];

            var source =
            {
                localData: data,
                dataType: "array",
                dataFields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#table").jqxDataTable(
            {
                width: 850,
                pageable: true,
                pagerButtonsCount: 10,
                source: dataAdapter,
                columnsResize: true,
                columns: [
                  { text: 'Name', dataField: 'firstname', width: 200 },
                  { text: 'Last Name', dataField: 'lastname', width: 200 }
                ]
            });

            $("#addRow").click(function () {
                data.push({ firstname: "NewName", lastname: "NewLastName" });
                $("#table").jqxDataTable('updateBoundData');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="table">
    </div>
    <button id="addRow">
        Add row</button>
</body>
</html>

Best Regards,
Dimitar

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

[cpuinParticipant]

Many thanks!!!

[cpuinParticipant]

By the way,

On this way i got [object Object] in the table!!!
I tried also to put the valCode in commas, but it display it as string.

var args = event.args;
	      	                   var index = args.index;
	      	                   var row = args.row;
	      	                   var valCode = $("#itemCode").val(row.Code);
	      	                   var valName = $("#itemName").val(row.Name);
	      	                   data.push({ codes: valCode ,
	      	                   						 names: valName });

[DimitarParticipant]

Hi cpuin,

Does this occur in the rowDoubleClick event handler? We tested for such incorrect behaviour but event.args.row returns the correct cell values on our side.

Best Regards,
Dimitar

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

[DimitarParticipant]

P.S. Something that might fix your issue is:

var args = event.args;
var index = args.index;
var row = args.row;
var valCode = row.Code;
var valName = row.Name;
data.push({
    codes: valCode,
    names: valName
});

Best Regards,
Dimitar

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

[Author]

Posts