jQWidgets Forums

Forum Replies Created

Viewing 14 posts - 76 through 89 (of 89 total)

← 1 … 5 6

Author

Posts

November 18, 2014 at 8:42 am in reply to: dataTable update dataTable update #62937

cpuin

Participant

Dear Dimitar,

I have cleared the cahe of my browser.i’m using OS X and i tested the file on latest Safari and on Latest Firefox.
This function doesn’t get called!I tried also with console.log(value), but there is no result.

November 17, 2014 at 6:39 pm in reply to: dataTable update dataTable update #62894

cpuin

Participant

Dear Dimitar,

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

can’t get called than?

November 17, 2014 at 4:01 pm in reply to: dataTable update dataTable update #62881

cpuin

Participant

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>

November 17, 2014 at 1:41 pm in reply to: dataTable update dataTable update #62869

cpuin

Participant

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

November 17, 2014 at 9:28 am in reply to: dataTable update dataTable update #62838

cpuin

Participant

Yes, but simply doesn’t work!

November 15, 2014 at 7:49 pm in reply to: dataTable update dataTable update #62796

cpuin

Participant

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 }
	                        ]
	                    });

November 15, 2014 at 7:23 pm in reply to: dataTable update dataTable update #62795

cpuin

Participant

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

October 27, 2014 at 1:00 pm in reply to: dataTable update dataTable update #61672

cpuin

Participant

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>

August 6, 2014 at 2:10 pm in reply to: update DataTable update DataTable #58088

cpuin

Participant

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 });

August 6, 2014 at 10:27 am in reply to: update DataTable update DataTable #58059

cpuin

Participant

Many thanks!!!

August 6, 2014 at 7:42 am in reply to: update DataTable update DataTable #58046

cpuin

Participant

//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>

August 6, 2014 at 5:38 am in reply to: update DataTable update DataTable #58035

cpuin

Participant

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

May 28, 2014 at 2:32 pm in reply to: sortable sortable #55037

cpuin

Participant

Now it works.Thank you a lot!

May 28, 2014 at 12:41 pm in reply to: sortable sortable #55028

cpuin

Participant

It was my mistake, i mean i need filtering not sorting.

Author

Posts

Viewing 14 posts - 76 through 89 (of 89 total)

← 1 … 5 6