dataTable update

[cpuinParticipant]

I’m trying to achieve the following:

Empty dataTable.a button above.When the button is clicked another dataTable with products appears, the user select a product and when double click the products appears in the empty table.Until this moment everything work great.BUT.When i add another and another products i want to change the quantity of some of the selected products.I make it, i run:

$('#saleTable').on('cellValueChanged', function (event) {
	                        var args = event.args;
	                        var value = args.value;
	                        productQuantity[args.index]=value;		 
	                        $("#saleTable").jqxDataTable('updateBoundData');
	                        $("#log").html("The cell's new value is: " + productQuantity[args.index] );
	                    
	                    });

I keep all selected products in array.The problem is that when i open the products table and select another product and it appears in the first one, the quantity remains unchanged.

[DimitarParticipant]

Hello cpuin,

I am not sure I understand your issue. Could you, please, share the relevant parts of your code (or a JSFiddle example) to help us better undesrstand your scenario?

Best Regards,
Dimitar

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

[cpuinParticipant]

The problem is that after add a product to the first table i edit the quantity.
After that i add another product and when the table refresh, the changed quantity is not chenged

Here is the full code:

<script type="text/javascript">
	    $(document).ready(function () {               
	        
	        //init table
	        // prepare the data
	                    var data = new Array();
	                    var productCodes =
	                    [
	                        
	                    ];
	                    var productNames =
	                    [
	                        
	                    ];
	                    var productPriceOut2 =
	                    [
	                        
	                    ];
	                    var productQuantity =
	                    [
	                        
	                    ];
	                    var productTotal =
	                    [
	                        
	                    ];
	                    
	                    
	                    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"] = productTotal[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' }
	                        ],
	                        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) {
	                                            // synchronize with the server - send update command
	                                            // call commit with parameter true if the synchronization with the server is successful 
	                                            // and with parameter false if the synchronization failed.
	                                            commit(true);
	                                        },
	                                        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);
	               
	                    $("#saleTable").jqxDataTable(
	                    {
	                        width: 850,
	                        pageable: false,
	                        pagerButtonsCount: 10,
	                        source: dataAdapter,
	                        filterable: false,
	                        filtermode: 'simple',
	                        editable: true,
	                        editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
	                        showAggregates: true,
	                        aggregatesHeight: 60,
	                        columnsResize: false,
	                        columns: [
	                          { text: 'Код', dataField: 'codes', width: 160, editable: false },
	                          { text: 'Описание', dataField: 'names', width: 420, editable: false },
	                          { 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', editable: false }
	                        ]
	                    });
	                    
	                    
	                    
	                    
	                    // Cell begin Edit
	                    $("#saleTable").on('cellBeginEdit', function (event) {
	                                    var args = event.args;
	                                    // row key
	                                    var rowKey = args.key;
	                                    // row's index.
	                                    var rowIndex = args.index;
	                                    // row's data.
	                                    var rowData = args.row;
	                                    // row's index in the data source.
	                                    var rowBoundIndex = args.boundIndex;
	                                    // column's data field.
	                                    var columnDataField = args.dataField;
	                                    // column's display field.
	                                    var columnDisplayField = args.displayField;
	                                    // cell's value.
	                                    var value = args.value;
	                                    $("#log").html("cellBeginEdit - Row: " + rowIndex + ", Column: " + columnDataField + ", Value: " + value + "<br/>" + $("#log").html());
	                                 });
	                                 
	                    // Cell End Edit
	                                $("#saleTable").on('cellEndEdit', function (event) {
	                                    var args = event.args;
	                                    // row key
	                                    var rowKey = args.key;
	                                    // row's index.
	                                    var rowIndex = args.index;
	                                    // row's data.
	                                    var rowData = args.row;
	                                    // row's index in the data source.
	                                    var rowBoundIndex = args.boundIndex;
	                                    // column's data field.
	                                    var columnDataField = args.dataField;
	                                    // column's display field.
	                                    var columnDisplayField = args.displayField;
	                                    // cell's value.
	                                    var value = args.value;
	                                    $("#log").html("<br/>cellEndEdit - Row: " + rowIndex + ", Column: " + columnDataField + ", Value: " + value +"<br/>" + $("#log").html());
	                                });
	                    
	        //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) {
	      	                   var args = event.args;
	      	                   var index = args.index;
	      	                   var row = args.row;
	      	                   var qty = 1;
	      	                   data.push({ codes: row.Code ,
	      	                   						 names: row.Name,
	      	                   						 quantity: qty,
	      	                   						 prices: row.PriceOut2,
	      	                   						 total: qty*row.PriceOut2 });
	      	        					 
	      	        					 
	      	                   $("#saleTable").jqxDataTable('updateBoundData');
	      	                   $("#dialogProducts").jqxWindow('close');
	      	                   $("#log").html("Array: " + data.toString());
	      	                   
	      	              });
	       
	          $("#productsTable").on('cellBeginEdit', function (event) {
	                          	var args = event.args;
	                          	// row key
	                          	var rowKey = args.key;
	                          	// row's index.
	                          	var rowIndex = args.index;
	                          	// row's data.
	                          	var rowData = args.row;
	                          	// row's index in the data source.
	                          	var rowBoundIndex = args.boundIndex;
	                          	// column's data field.
	                          	var columnDataField = args.dataField;
	                          	// column's display field.
	                          	var columnDisplayField = args.displayField;
	                          	// cell's value.
	                          	var value = args.value;
	                          	
	                          	
	                       });  
	                       
	           $("#productsTable").on('cellEndEdit', function (event) {
	                           	var args = event.args;
	                           	// row key
	                           	var rowKey = args.key;
	                           	// row's index.
	                           	var rowIndex = args.index;
	                           	// row's data.
	                           	var rowData = args.row;
	                           	// row's index in the data source.
	                           	var rowBoundIndex = args.boundIndex;
	                           	// column's data field.
	                           	var columnDataField = args.dataField;
	                           	// column's display field.
	                           	var columnDisplayField = args.displayField;
	                           	// cell's value.
	                           	var value = args.value;
	                           	
	                       	});           
	        
	    });
	    
	    
	</script>
	
	
	
	 
	 		
	 		
	 <br><br>
	 <div id="saleTable"></div>
	 <br>
	  <button id="openProducts">Добави</button>
	  <div id="log"></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,

You will need to implement a code which synchronises the data source with the data table when you edit the quantity. This is usually done in the source updaterow callback function. You can see sample implementations in the tutorials Build CRUD Web App with jqxGrid using PHP and MySQL and CRUD with jqxGrid, ASP.NET MVC3 and SQL.

Best Regards,
Dimitar

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

[cpuinParticipant]

Dear Dimitar,

I have checked them.I can’t see something different.
Please , note i use array instead of some data base.

I perform the update here:

$("#productsTable").on('rowDoubleClick', function (event) {
	      	                   var args = event.args;
	      	                   var index = args.index;
	      	                   var row = args.row;
	      	                   var qty = 1;
	      	                   data.push({ codes: row.Code ,
	      	                   						 names: row.Name,
	      	                   						 quantity: qty,
	      	                   						 prices: row.PriceOut2,
	      	                   						 total: qty*row.PriceOut2 });
	      	        					 
	      	        					 
	      	                   $("#saleTable").jqxDataTable('updateBoundData');
	      	                   $("#dialogProducts").jqxWindow('close');
	      	                   $("#log").html("Array: " + data.toString());
	      	                   
	      	              });

The table update, but every time i update the quantity of the cell and after that add new row, the change of the quantity is the one before the change

[cpuinParticipant]

The problem is that can’t call:

// Cell Begin Edit
	                    $("#saleTable").on('cellBeginEdit', function (event) {
	                                    	var args = event.args;
	                                    	// row key
	                                    	var rowKey = args.key;
	                                    	// row's index.
	                                    	var rowIndex = args.index;
	                                    	// row's data.
	                                    	var rowData = args.row;
	                                    	// row's index in the data source.
	                                    	var rowBoundIndex = args.boundIndex;
	                                    	// column's data field.
	                                    	var columnDataField = args.dataField;
	                                    	// column's display field.
	                                    	var columnDisplayField = args.displayField;
	                                    	// cell's value.
	                                    	var value = args.value;
	                                    	$("#log").html("test");
	                                    	
	                                 });  
	                                 
	                     $("#saleTable").on('cellEndEdit', function (event) {
	                                     	var args = event.args;
	                                     	// row key
	                                     	var rowKey = args.key;
	                                     	// row's index.
	                                     	var rowIndex = args.index;
	                                     	// row's data.
	                                     	var rowData = args.row;
	                                     	// row's index in the data source.
	                                     	var rowBoundIndex = args.boundIndex;
	                                     	// column's data field.
	                                     	var columnDataField = args.dataField;
	                                     	// column's display field.
	                                     	var columnDisplayField = args.displayField;
	                                     	// cell's value.
	                                     	var value = args.value;
	                                     	$("#log").html("test");
	                                 	});

columns are editable:

$("#saleTable").jqxDataTable(
	                    {
	                        width: 850,
	                        pageable: false,
	                        pagerButtonsCount: 10,
	                        source: dataAdapter,
	                        filterable: false,
	                        filtermode: 'simple',
	                        editable: true,
	                        editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
	                        showAggregates: true,
	                        aggregatesHeight: 60,
	                        columnsResize: false,
	                        columns: [
	                          { text: 'Код', dataField: 'codes', width: 160, editable: false },
	                          { text: 'Описание', dataField: 'names', width: 420, editable: false },
	                          { text: 'Количество', dataField: 'quantity', width: 90, cellsAlign: 'right', align: 'right',editable: true },
	                          { text: 'Ед.Цена', dataField: 'prices', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2' },
	                          { text: 'Тотал', dataField: 'total', width: 90, cellsAlign: 'right', align: 'right', cellsFormat: 'c2', editable: false }
	                        ]
	                    });

[DimitarParticipant]

Hi cpuin,

Your code seems correct. The cellBeginEdit and cellEndEdit events should be called for the columns “quantity” and “prices”.

Best Regards,
Dimitar

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

[cpuinParticipant]

Yes, but simply doesn’t work!

[DimitarParticipant]

Hi cpuin,

You can see the events implemented here: http://jsfiddle.net/jqwidgets/yTx7z/.

Best Regards,
Dimitar

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

[cpuinParticipant]

I already did it!!
This forum is the last instation, when no source can help me.

[DimitarParticipant]

Hi cpuin,

Do you get any errors in your browser’s console? And could you provide us with a JSFiddle example which demonstrates the reported issue?

Best Regards,
Dimitar

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

[cpuinParticipant]

Dear Dimitar,

I left only the code you need here in order to reproduce the problem.
No error in the browser console!

<script type="text/javascript">
	    $(document).ready(function () {               
	        
	        //init table
	        // prepare the data
	                    var data = new Array();
	                    var productCodes =
	                    [
	                        0001
	                    ];
	                    var productNames =
	                    [
	                        'myName'
	                    ];
	                    var productPriceOut2 =
	                    [
	                        10
	                    ];
	                    var productQuantity =
	                    [
	                        1
	                    ];
	                    var productTotal =
	                    [
	                        10
	                    ];
	                    
	                    
	                    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"] = productTotal[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' }
	                        ],
	                        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) {
	                                            // synchronize with the server - send update command
	                                            // call commit with parameter true if the synchronization with the server is successful 
	                                            // and with parameter false if the synchronization failed.
	                                            commit(true);
	                                        },
	                                        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);
	               
	                    $("#saleTable").jqxDataTable(
	                    {
	                        width: 850,
	                        pageable: false,
	                        pagerButtonsCount: 10,
	                        source: dataAdapter,
	                        filterable: false,
	                        filtermode: 'simple',
	                        editable: true,
	                        editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true, cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
	                        showAggregates: true,
	                        aggregatesHeight: 60,
	                        columnsResize: false,
	                        columns: [
	                          { text: 'Код', dataField: 'codes', width: 160, editable: false },
	                          { 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' }
	                        ]
	                        
	                    });
	                    
	                    // Cell Begin Edit
	                    $("#saleTable").on('cellBeginEdit', function (event) {
	                                    	var args = event.args;
	                                    	// row key
	                                    	var rowKey = args.key;
	                                    	// row's index.
	                                    	var rowIndex = args.index;
	                                    	// row's data.
	                                    	var rowData = args.row;
	                                    	// row's index in the data source.
	                                    	var rowBoundIndex = args.boundIndex;
	                                    	// column's data field.
	                                    	var columnDataField = args.dataField;
	                                    	// column's display field.
	                                    	var columnDisplayField = args.displayField;
	                                    	// cell's value.
	                                    	var value = args.value;
	                                    	$("#log").html(value);
	                                    	
	                                    	
	                                 });  
	                                 
	                     $("#saleTable").on('cellEndEdit', function (event) {
	                                     	var args = event.args;
	                                     	// row key
	                                     	var rowKey = args.key;
	                                     	// row's index.
	                                     	var rowIndex = args.index;
	                                     	// row's data.
	                                     	var rowData = args.row;
	                                     	// row's index in the data source.
	                                     	var rowBoundIndex = args.boundIndex;
	                                     	// column's data field.
	                                     	var columnDataField = args.dataField;
	                                     	// column's display field.
	                                     	var columnDisplayField = args.displayField;
	                                     	// cell's value.
	                                     	var value = args.value;
	                                     	$("#log").html(value);
	                                     	
	                                 	});
	                    
	                    
	                    
	                    
	        //END SALE TABLE
	                 
	        
	    });
	    
	    
	</script>
	
	
	
	 
	 		
	 		
	 <br><br>
	 <div id="saleTable"></div>
	 <br>
	  <button id="openProducts">Добави</button>
	  <div id="log"></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>

[Peter StoevKeymaster]

Hey cpuin,

The jqxDataTable in the provided code works correctly according to us. What is the expected behavior for you? As far as I see from the demo, I can edit the record and when save the changes by clicking outside or hitting Enter, the saves are changed in the DataTable.

Best Regards,
Peter Stoev

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

[cpuinParticipant]

Dear Dimitar,

Why the $(“#log”).html(value);

can’t get called than?

[Peter StoevKeymaster]

Hi cpuin,

(“#log”).html(value); is called. I suggest you to reset your browser’s history and carefully debug, because at least in what you provided in the last email, there is no problem on our side.

Best Regards,
Peter Stoev

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

[Author]

Posts