jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by svetoslav_borislavov 2 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

creation order + refresh data sources Posts

August 1, 2022 at 7:30 pm creation order + refresh data sources #122242

Participant

Hi,
I have my jqxTabs with 6 tabs on it.
Each tab has a different jqxGrid which their contents depend on a jqxDropDownList onchange event (Customer selection).

I know that the creation order inside the jqxTabs should look something like this:


	$('#tabs').jqxTabs({ 
		theme: 'energyblue', 
		width: "99%",  
		height: "89%", 
		position: 'top', 
		initTabContent: initWidgets
	});

But… When should I set/update every Grid’s dataadapter ?

I guess I could handle it on the onchange event of my jqxDropDownList…
But, what happens if, let’s say, tab #2 isn’t stil clicked ? jqxGrid is not created yet, is it ?
So I shouldn’t set jqxGrid’s source property. Should I ?

August 2, 2022 at 6:49 am creation order + refresh data sources #122248

svetoslav_borislavov

Participant

Hi,

You said that the content depends on a dropdown list, so you have to decide what will be the content when the item is not selected.
If no data is provided to the grid, it will initialize with no data and will look something like this:
http://jsfiddle.net/53Lrbaev/

After that onChange of the DropDownList you can set the data and updatebounddata().

Should you have any questions do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

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

August 2, 2022 at 1:44 pm creation order + refresh data sources #122252

omargarro

Participant

Thank you for your answer!
I still can’t get it work properly. Perhaps I didn’t explain myself clear enough.

If you see my code below you will see that everytime dropdownlist changes, I call a function which sets #gridGoods source property again.
What happens ? The hole grid is being recreated which I noticed because the “cdsButton_x” on the statusbar is added twice.
This happens only if I don’t click on “Goods” tab prior than selecting a customer on the dropdownlist.
If I first click on “Goods” tab, then I choose a customer, then everything works just fine.
But If I load my page, I choose a customer from the dropdownlist, then I click on “Goods” tab then two “cdxButton_x” are appended.
I double checked with debugger.


<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>TEST</title>
<head>
	<link rel="icon" type="image/ico" href="img/elevator.png" />
	<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	
	<script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
	
	<script type="text/javascript">
        $(document).ready(function () {
			// Customers
			var srcCustomers = {
				cache: false, 
				datatype: "json",  
				url: 'inc/getClientes.php', 
				type: 'post', 
				data: {},
				datafields: [ 
					{name: 'idcliente', type: 'string'}, 
					{name: 'razon_social', type: 'string'}
				]
			};
			var dataCustomers = new $.jqx.dataAdapter( srcCustomers );
			$("#customer").jqxDropDownList({ 
				source: dataCustomers, 
				displayMember: "razon_social", 
				valueMember: "idcliente", 
				width: 400, 
				height: 25, 
				selectedIndex: -1, 
				placeHolder: 'Customer ?'
				
			}).change( function() {
				
				Goods();
				
			});
			
			var initTabGeneralData = function () {
			}	
			
			var initTabContacts = function () {
			}	
			
			var initTabPrinting = function () {
			}	
			
			var initTabServices = function () {
			}	
			
			var initTabGoods = function() {
				$("#gridGoods").jqxGrid({
					theme: 'classic', 
					width: "100%", height: "93%", columnsresize: true, sortable: true, showtoolbar: false, enabletooltips: true, showsortcolumnbackground: false, 
					showstatusbar: true, statusbarheight:38, filterable: true, showfilterrow: false, showaggregates: false,  editable: false, 
					rowdetails: false, groupable: true, groupsexpandedbydefault: false,
					renderstatusbar: function(statusbar) {
						let cdsButton_x  = $("<div style='float: left; margin-top:5px; margin-left: 5px;' title='Seguimiento de Envío'><img style='position: relative; margin-left: -1px; width:18px;' src='./img/cruzdelsur.png'/></div>");
						
						debugger 
						statusbar.append(cdsButton_x);		// it's being executed twice !!!!
						
						cdsButton_x.jqxButton({width: 16, height: 16}).click(function (event) {
							alert("ok");
						});
					},
					columns: [
						{text: 'Fecha', datafield: 'fecha_1', width: "7%", cellsalign: 'center', filterable: false, cellsformat: 'dd-MM-yyyy'},
						{text: 'Remito', datafield: 'comprobante', width: "9%", cellsalign: 'center'},
						{text: 'Item', datafield: 'ITEM', width: "3%", cellsalign: 'right'},
						{text: 'Código', datafield: 'idarticulobarra', width: "7%"},
						{text: 'Artículo', datafield: 'nombre', width: "20%"},
						{text: 'Cant.', datafield: 'cantidad', width: "3%", cellsalign: 'right'},
						{text: 'Localidad', datafield: 'LOCALIDAD', width: "10%"},
						{text: 'Domicilio', datafield: 'DOMICILIO', width: "20%"},
						{text: 'Anotaciones', datafield: 'ANOTACIONES', width: "25%"},
					]
				});
				
				return false;
			}
			
			var initTabAccountings = function () {
			}	
			
			var initWidgets = function(tab) {
				switch(tab) {
					case 0:
						initTabGeneralData();
						break;
					case 1:
						initTabContacts();
						break;
					case 2:
						initTabPrinting();
						break;
					case 3:
						initTabServices();
						break;
					case 4:
						initTabGoods();
						break;
					case 5:
						initTabAccountings();
						break;
					default:
						break;
				}
			}
			
			// Tabs
			$('#tabs').jqxTabs({ 
				width: "99%",  
				height: "89%", 
				position: 'top', 
				initTabContent: initWidgets
			});
			
			function Goods() {
				var source = {
					cache: false, 
					datatype: "json",  
					url: 'inc/getRemitosItems.php', 
					type: 'post', 
					data: {
						cli: $("#customer").val(),
					},
					datafields: [ 
						{name: 'idarticulobarra', type: 'string' },
						{name: 'nombre', type: 'string' },
						{name: 'cantidad', type: 'decimal' },
						{name: 'ITEM', type: 'number'},
						{name: 'fecha_1', type: 'date'},
						{name: 'comprobante', type: 'string'},
						{name: 'LOCALIDAD', type: 'string'},
						{name: 'idarticuloequipo', type: 'string'},			
						{name: 'ANOTACIONES', type: 'string'},
						{name: 'DOMICILIO', type: 'string'},
						
					]
				};
				
				var params = {
					async: false,
					loadError: function(xhr, status, error) {
						console.log(status);
						console.log(error);
						console.log(xhr);
					},
					loadComplete: function(){
					}
				}
				var dataAdapter = new $.jqx.dataAdapter( source, params);
				$("#gridGoods").jqxGrid({source: dataAdapter});
			}
			
        });
    </script>	
	
	
</head>

<body>
	
	<div id="content" style="height: 800px;">
	
		<div id="customer"></div>
		<hr/>
		<div id='tabs'>
			<ul>
				<li style="margin-left: 30px;">General data</li>
				<li>Contacts</li>
				<li>Printing</li>
				<li>Services</li>
				<li>Goods</li>
				<li>Accounting</li>
			</ul>
			
			<div style="padding:30px;"> <!-- General Data -->
				<div id="gridGeneralData"></div>
			</div>
			
			<div style="padding:30px;">	<!-- Contacts -->
				<div id="gridContacts"></div>
			</div>
			
			<div style="padding:30px;">	<!-- Printing -->
				<div id="gridPrinting"></div>
			</div>
			
			<div style="padding:30px;">	<!-- Services -->
				<div id="gridServices"></div>
			</div>
			
			<div style="padding:30px;">	<!-- Goods -->
				<div id="gridGoods"></div>
			</div>
			
			<div style="padding:30px;">	<!-- Accounting -->
				<div id="gridAccounting"></div>
			</div>
			
		</div>
	</div>
</body>
</html>

August 3, 2022 at 7:27 am creation order + refresh data sources #122263

svetoslav_borislavov

Participant

Hi,

I suggest you see the Grid’s refresh data demo in the Data Binding –> Refresh Data.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/refreshdata.htm
It will be useful to get familiar with updating the data grid.

Also here is detailed info about updatebounddata method: Updates the bound data and refreshes the grid. You can pass 'filter' or 'sort' as parameter if the update reason is changed in 'filtering' or 'sorting'. To update only the data without the columns, use the 'data' parameter. To make a quick update of the cells, pass "cells" as a parameter. Passing "cells" will refresh only the cells values when the new rows count is equal to the previous rows count. To make a full update, do not pass any parameter.

Best regards,
Svetoslav Borislavov

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

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.