jQuery UI Widgets Forums Navigation Tabs creation order + refresh data sources

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

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

  • omargarro
    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 ?

    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/


    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>
    

    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/

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

You must be logged in to reply to this topic.