jQWidgets Forums

Forum Replies Created

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

Author

Posts

August 2, 2022 at 1:44 pm in reply to: creation order + refresh data sources 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>

April 5, 2019 at 12:59 pm in reply to: updaterow rowdetails collapse updaterow rowdetails collapse #104679

omargarro

Participant

Hi Nadezhda,
I’m having the same issue and your demo in jsfiddle doesn’t solve the problem. (the button still collapse the rowdetail after updating)
Can you provide a piece of code to solve this ?
Thanks in adv,
Omar

March 18, 2016 at 4:13 pm in reply to: Preventing closing a wndow Preventing closing a wndow #82640

omargarro

Participant

Hi out there!
If someone is still looking for some workarround for this, what I did on my jqxWindow was:

Set
– showCloseButton: false
– cancelButton: null
– keyboardCloseKey :’none’

then I created a jqxButton (#closeWinButton) and:

$(‘#closeWinButton’).on(‘click’, function() {
if( $(“#some_condition”).val() ) {
if( confirm(“Do you really want to exit (without saving) ?”) ) {
$(“#myWindow”).jqxWindow(‘close’);
}
} else {
$(“#win”).jqxWindow(‘close’);
}
});

June 1, 2015 at 11:24 am in reply to: DateTimeInput over jqxWindow with isModal: true DateTimeInput over jqxWindow with isModal: true #71839

omargarro

Participant

Hi Ivailo, actually it worked !

As I can see you initialize the DateTimeInput object on windows initContent event

I was doing it after window was created. Something like:

$(“#jqxwindow”).jqxWindow({
height: 100, width: 300, isModal: true, theme: ‘energyblue’
});
$(“#jqxDateTimeInput”).jqxDateTimeInput({width: ‘250px’, height: ’25px’, theme: ‘energyblue’});

April 1, 2015 at 12:24 pm in reply to: Row Selection upon field value Row Selection upon field value #69428

omargarro

Participant

Nadezhda, thanks for your reply.
In your example, a db field is been inserted (according(to its value checked or not)
I dont need that field being showed.
I need to show only one string field and select the row according to another bool field
is that possible ? any grid event to work with ?

March 19, 2015 at 6:25 pm in reply to: page reloads after re setting source dataadapter page reloads after re setting source dataadapter #68865

omargarro

Participant

eyyy… after a while I found the problem

The only button I had was included inside a <form> so it was acting like a submit button.

removing the form or preventing default behaviour of that form, solved the problem

thanks anyway

Author

Posts

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