jQWidgets Forums

Forum Replies Created

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 22, 2013 at 10:19 am in reply to: Grid display an empty row when no record item from json datasource. Grid display an empty row when no record item from json datasource. #15669

    teguh
    Member

    Hi Dimitar,

    I use jQWidgets-2.5. Currently i added some codes below to solve my problem and working finely, is it good solution?

    $("#jqxgrid").bind('bindingcomplete', function (event) {
    	rows = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    	cellno = $("#jqxgrid").jqxGrid('getcell', 0, 'no');
    	cellname = $("#jqxgrid").jqxGrid('getcell', 0, 'name');
    	celldesc = $("#jqxgrid").jqxGrid('getcell', 0, 'description');
    	if((rows == 1) && (cellno.value == '') && (cellname.value == '') && (celldesc.value == ''))
    	{	var commit = $("#jqxgrid").jqxGrid('deleterow', 0); }
    });

    and below is my jqxgrid code:

    var source =
    {
    	datatype: "json",
        datafields: [   { name: 'no' }, { name: 'id'}, { name: 'name'}, { name: 'description'}    ],
        url: 'remote.cfc?method=getKomplek',
        data: { categoryLabel: value, categoryLevel: level },
        addrow: function (rowid, rowdata, position, commit) {  	commit(true);	},
        deleterow: function (rowid, commit) {	commit(true);	},
        updaterow: function (rowid, newdata, commit) {	commit(true);	}
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true 	});
    dataAdapter.dataBind();
    				
    $("#jqxgrid").jqxGrid(
    {
    	width: '100%',
    	height: '100%',
    	source: dataAdapter,
    	theme: customDemo.config.theme,
    	selectionmode: 'singlerow',
    	sortable: true,
    	columnsresize: true,
    	pagerheight: 40,
    	editable: false,
    	showtoolbar: true,
    	showstatusbar: true,
    	columns: [
    		{ text: 'No', datafield: 'no', width: 40, cellsalign: 'right' },
    		{ text: 'Name', datafield: 'name' },
    		{ text: 'Description', datafield: 'description' }
    	],
    	rendertoolbar: function (toolbar) {
    		var me = this;
    		var container = $("<div style='margin:4px;'></div>");
    		var addSpan = 	$("<a href='#' title='Add' id='addRecord'><span  class='ui-icon ui-icon-plus' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
    		var editSpan =  $("<a href='#' id='editRecord' title='Edit'><span  class='ui-icon ui-icon-pencil' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
    		var trashSpan = $("<a href='#' id='delRecord' title='Delete'><span  class='ui-icon ui-icon-trash' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
    		var tripNumberInput = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchTripNumber' type='text' style='height: 23px; float: right; width: 79px;margin-top: 1px;margin-left:145px;' />");
    		toolbar.append(container);
    		container.append(addSpan);
    		container.append(editSpan);
    		container.append(trashSpan);
    						
    		addSpan.bind('click',function(){});
    		editSpan.bind('click',function() { });
    		trashSpan.bind('click',function(){});
    	}
    });

    thanks for any suggestion.

    February 18, 2013 at 7:14 am in reply to: layout property inside splitbar changes after collapsed layout property inside splitbar changes after collapsed #15385

    teguh
    Member

    Hi,

    I got solution for this problem, i added “min: ” and “size: ” property to the right panel of splitter (second splitter), in this case i add codes below :

    var _initTabWidget = function(tab){
    				if(tab == '3'){
    					//
    					var lbrRightSplitter = lebarTab - 150 - 17;
    					tinggiTab = tinggiTab - 50;
    					$("#splitterTab").jqxSplitter({ theme: customDemo.config.theme, width: '99%', height: tinggiTab, splitBarSize: 5, panels: [{ min: 150, size: 150, collapsible: false, collapsed: false }, { min: lbrRightSplitter, size: '100%', collapsible: false, collapsed: false }] });
    					//
    			}

    thanks for your attention Dimitar,

    February 15, 2013 at 11:37 am in reply to: layout property inside splitbar changes after collapsed layout property inside splitbar changes after collapsed #15299

    teguh
    Member

    Hi,

    I added a screenshot of window popup with firebug after splitbar collapsed

    https://docs.google.com/drawings/d/1Rk4HD6AL77-1W1U2bXoYmcgu2bKW0jB7RlaD86pYOts/edit?usp=sharing

    thanks for any help

    February 15, 2013 at 8:02 am in reply to: layout property inside splitbar changes after collapsed layout property inside splitbar changes after collapsed #15286

    teguh
    Member

    I’m sorry Dimitar,

    I’ve a screenshot of window popup before splitbar collapsed at
    https://docs.google.com/drawings/d/1rHSAYvsODZ7CBZ642FthWQnsdmOFVh_Z1DtP_RkjUVE/edit?pli=1

    and below is part of my code :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Corporate Facility Management Information System</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	
    	<link rel="stylesheet" type="text/css" media="screen" href="../common/css/jquery-ui-1.8.21.custom.css" />
    	<link rel="stylesheet" type="text/css" media="screen" href="../common/js/jqwidgets/styles/jqx.base.css" />
    	<script type="text/javascript" src="../common/jquery/jquery-1.7.2.js"></script> 
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxcore.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxdata.js"></script> 
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxbuttons.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxscrollbar.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxmenu.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxcheckbox.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxlistbox.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxdropdownlist.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxwindow.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.pager.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.filter.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.grouping.js"></script>
        <script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.columnsresize.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.selection.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxgrid.aggregates.js"></script> 
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxpanel.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxtree.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxmenu.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../common/js/jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../common/js/jqwidgets/jqxdatetimeinput.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxtooltip.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript" src="../common/js/jqwidgets/jqxsplitter.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxtabs.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxinput.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/jqxdocking.js"></script>
    	<script type="text/javascript" src="../common/js/jqwidgets/globalization/jquery.global.js"></script>
    	<script type="text/javascript" src="../common/js/gettheme.js"></script> 
    	
    	<style type="text/css" title="currentStyle">
    		#createWindow { 	display: none;	}
    		#buktiKKIWindow { 	display: none;	}
    		#testWindow { display: none; }
    		#jqxdatetime { display: none; }
    		#listBoxContent { display: none; }
    		#listBoxContent1 { display: none; }
    	</style>
    	
    	<script type="text/javascript">
    		var customDemo = (function() {
    			
    			function _addEventListeners() {
    				$('#jqxTree').bind('select', function (event) {
    	                var args = event.args;
    			        var item = $('#jqxTree').jqxTree('getItem', args.element);
    			        var leveldB = [ "","Root","Komplek","Building","Floor","Zones","Spaces","Room" ];
    			        $('#jqxgrid1').hide();
    			        $('#jqxgrid2').hide();
    			        $('#jqxgrid').show();
    			        _displayGrid(item.value,leveldB[item.level+1]);
    			        $("#jqxgrid").jqxGrid('render');
    	            });
    				
    				$('#bkkIutilListrik').click(function(){ 
    					$('#jqxgrid').hide();
    					$('#jqxgrid1').hide(); 
    					$('#jqxgrid2').show();
    					$('#jqxgrid3').hide();
    					_getBuktiKasI()
    					$("#jqxgrid2").jqxGrid('render');
    				});
    				$('#bkkIIutilListrik').click(function(){ 
    					$('#jqxgrid').hide();
    					$('#jqxgrid1').hide(); 
    					$('#jqxgrid2').hide();
    					$('#jqxgrid3').show();
    					_getBuktiKasII()
    					$("#jqxgrid3").jqxGrid('render');
    				});
    				
    				$('#createWindow').on('open', function (event) {
    					_initTabWidget();
    					$('#GraphicsPopupTab').jqxTabs('select', 0);
    					$('#listbox').jqxListBox('selectIndex', 0);
    				});
    				
    				$('#splitter').on('expanded', function (event) {
    					$('#listBoxContent').jqxGrid('refresh');
    	            });
    	            
    	            $('#splitter').on('collapsed', function (event) {
    					$('#listBoxContent').jqxGrid('refresh');
    	            });
    	            
    				$("#listbox").bind('select', function(event){
    					var args = event.args;
    					var item = $("#listbox").jqxListBox('getItem', args.index);
    					if(item != null){
    						if(item.label == 'Account PLN'){
    							$('#listBoxContent1').hide();
    							$('#listBoxContent').show();
    							initGrid()
    						}
    						if(item.label == 'kWHmeter'){
    							$('#listBoxContent1').hide();
    							$('#listBoxContent').show();
    							initGrid()
    						}
    						if(item.label == 'Bukti Kas'){
    							$('#listBoxContent1').hide();
    							$('#listBoxContent').show();
    							initGrid();
    						}
    					}
    				});
    				
    				$('#GraphicsPopupTab').on('tabclick', function (event) { 
    					var clickedItem = event.args.item;
    					if(clickedItem == '3'){
    						$('#listbox').jqxListBox('clearSelection');
    						$('#listBoxContent').hide();
    					}
    				});
    				
    				_inputAreaEventHandlers();
    				_inputAreaBuktiKasEventHandlers();
    			};
    			
    			var _initTabWidget = function(tab){
    				if(tab == '3'){
    					var tinggiTab = $('#GraphicsPopupTab').height();
    					var lebarTab = $('#GraphicsPopupTab').width();
    					tinggiTab = tinggiTab - 50;
    					$("#splitterTab").jqxSplitter({ theme: customDemo.config.theme, width: '99%', height: tinggiTab, splitBarSize: 5, panels: [{ min: 150, size: 150, collapsible: false, collapsed: false }, { collapsible: false, collapsed: false }] });
    					var listBoxItem = ["Account PLN","kWHmeter","Bukti Kas"];
    					$('#listbox').jqxListBox({ source: listBoxItem, theme: customDemo.config.theme, width: '100%', height: tinggiTab });
    					$('#listbox').jqxListBox('clearSelection');
    				};
    			}
    			
    			var initGrid = function () {
                    var source =
                   	{
                       datatype: "csv",
                       datafields: [
                            { name: 'Date' },
                            { name: 'S&P 500' },
                            { name: 'NASDAQ' }
                        ],
                       url: 'nasdaq_vs_sp500_2.txt'
                   	};
                    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
                    $("#listBoxContent").jqxGrid(
                    {
                        width: '100%',
                        height: '100%',
                        showtoolbar: true,
                        showstatusbar: true,
                        statusbarheight: 39,
                        source: dataAdapter,
                        theme: customDemo.config.theme,
                        scrollmode: 'logical',
                        columns: [
                            { text: 'Date', datafield: 'Date', cellsformat: 'd' },
                            { text: 'S&P 500', datafield: 'S&P 500' },
                            { text: 'NASDAQ', datafield: 'NASDAQ' }
                        ],
                        rendertoolbar: function (toolbar) {
    						var me = this;
    						var container = $("<div style='margin:5px;'></div>");
    						var tambah = $("<a href='#'><input class='jqx-button jqx-widget-content jqx-rc-all' type='button' value='Add' id='addButton' style='height: 23px; float: right; margin-right: 5px; width: 80px;' /></a>");
    						var hapus = $("<a href='#'><input class='jqx-button jqx-widget-content jqx-rc-all' type='button' value='Remove' id='removeButton' style='height: 23px; float: right; margin-right: 5px; width: 80px;' /></a>");
    						toolbar.append(container);
    						container.append(hapus);
    						container.append(tambah);
    						
    						tambah.bind('click',function(){
    						});
    						hapus.bind('click',function(){
    						});
    					}
                    });
                }
    			
    			function _displayGrid(value,level) {
    				
    				var source =
    				{
    					datatype: "json",
    				    datafields: [   { name: 'no' }, { name: 'id'}, { name: 'name'}, { name: 'description'}    ],
    				    url: 'remote.cfc?method=getKomplek',
    				    data: { categoryLabel: value, categoryLevel: level },
    				    addrow: function (rowid, rowdata, position, commit) { 
    				    	alert(rowdata['table'] + '\r\n' + rowdata['table_record'] + '\r\n' + rowdata['name'] + '\r\n' + rowdata['description'] + '\r\n' + rowdata['country'] + '\r\n' + rowdata['province']);	
    				    	commit(true);	
    				    },
    	                deleterow: function (rowid, commit) {	commit(true);	},
    	                updaterow: function (rowid, newdata, commit) {	commit(true);	}
    				};
    	            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true 	});
    	            dataAdapter.dataBind();
    				
    	            $("#jqxgrid").jqxGrid(
    	            {
    	                width: '100%',
    	                height: '100%',
    	                source: dataAdapter,
    	                theme: customDemo.config.theme,
    	                selectionmode: 'singlerow',
    	                sortable: true,
    	                columnsresize: true,
    	                pagerheight: 40,
    	                editable: false,
    	                showtoolbar: true,
    	                showstatusbar: true,
    	                columns: [
    					             { text: 'No', datafield: 'no', width: 40, cellsalign: 'right' },
    					             { text: 'Name', datafield: 'name' },
    					             { text: 'Description', datafield: 'description' }
    				             ],
    				    rendertoolbar: function (toolbar) {
    						var me = this;
    						var container = $("<div style='margin:4px;'></div>");
    						var addSpan = 	$("<a href='#' title='Add' id='addRecord'><span  class='ui-icon ui-icon-plus' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
    						var editSpan =  $("<a href='#' id='editRecord' title='Edit'><span  class='ui-icon ui-icon-pencil' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
    						var trashSpan = $("<a href='#' id='delRecord' title='Delete'><span  class='ui-icon ui-icon-trash' style='display:inline-block;float: left; margin-top: 0px; margin-left: 10px;'></span></a>");
    						var tripNumberInput = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchTripNumber' type='text' style='height: 23px; float: right; width: 79px;margin-top: 1px;margin-left:145px;' />");
    						toolbar.append(container);
    						container.append(addSpan);
    						container.append(editSpan);
    						container.append(trashSpan);
    						var offset = $("#jqxgrid").offset();
    						
    						addSpan.bind('click',function(){
    							$('#GraphicsPopupTab').jqxTabs('select', 0);
    							$('#listBoxContent').jqxGrid('updatebounddata');
    							var item = $('#jqxTree').jqxTree('getSelectedItem');
    							var leveldB = [ "Root","Komplek","Gedung","Lantai","Zones","Spaces","Room" ];
    							var row = {};
    							
    							$("#createWindow").jqxWindow({ 
    								position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10},
    								title: 'Tambah Record ' + leveldB[item.level+1] + ' untuk ' + leveldB[item.level] + ' : ' + item.label,
    								width: 800,
    								theme: customDemo.config.theme,
    								isModal: true,
    								modalOpacity: 0.01,
    								autoOpen: false,
    								okButton: $('#PSave'), 
    								cancelButton: $('#PCancel'),
    								initContent: function(){
    									$('#GraphicsPopupTab').jqxTabs({ initTabContent:	_initTabWidget	});
    									$('#GraphicsPopupTab').jqxTabs('select', -1);
    									$('#listbox').jqxListBox('selectIndex', 0);
    									$('#GraphicsPopupTab').jqxTabs({ width: '100%' });
    								}
    							});
    							
    							$("#createWindow").jqxWindow('open');
    						});
    						
    						editSpan.bind('click',function() {
    							$('#GraphicsPopupTab').jqxTabs('select', 0);
    							$('#listBoxContent').jqxGrid('refresh');
    							var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    							if (selectedrowindex == -1) {
    								alert('Pilih record terlebih dahulu!');
    							}
    							var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    							if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    			                    var idrow = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    			                }
    							var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
    							var dataState = $("#jqxgrid").jqxGrid('getstate');
    							var item = $('#jqxTree').jqxTree('getSelectedItem');
    							var leveldB = [ "","Root","Komplek","Gedung","Lantai","Zones","Spaces","Room" ];
    							var idrecord = $().val(dataRecord.id);
    							
    							$("#createWindow").jqxWindow({ 
    								position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10},
    								title: 'Edit ' + leveldB[item.level+2] +' untuk ' + leveldB[item.level+1] + ' : ' + item.label,
    								width: 800,
    								theme: customDemo.config.theme,
    								isModal: true,
    								modalOpacity: 0.01,
    								autoOpen: false,
    								okButton: $('#PUpdate'), 
    								cancelButton: $('#PCancel'),
    								initContent: function(){
    									$('#GraphicsPopupTab').jqxTabs({	initTabContent:	_initTabWidget	});
    									$('#GraphicsPopupTab').jqxTabs({ width: '100%' });
    								}
    							});
    							
    							$("#createWindow").jqxWindow('open');
    						});
    						
    						trashSpan.bind('click',function(){
    							// code for delete item
    						});
    					}
    	            });
    			};
    			
    			function _createElements() {
    				var tinggi = screen.availHeight - 230;
    				var lebar = screen.availWidth - 310;
    				var availTinggi = screen.availHeight - 225;
    				var dataTree = 
    				{
    						datatype: "json",
    					    datafields: [   { name: 'id' },{ name: 'text' },{ name: 'parentid' },{ name: 'value' }	],
    						id: 'id',
    					    url: 'remote.cfc?method=getMenuKomplek'
    				}
    				var dataAdapter = new $.jqx.dataAdapter(dataTree, { async: false, autoBind: true });
    				dataAdapter.dataBind();
    				var theme = getTheme();
    				var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'value', map: 'value'},{name: 'text', map: 'label'}]);
    	            $('#jqxTree').jqxTree({ source: records, theme: theme, height: '100%', width: '100%' });
    	            $("#splitter").jqxSplitter({ theme: theme, width: '100%', height: availTinggi, panels: [{ size: 250}] });
    	            $("#jqxMenu").jqxMenu({ width: '100%', height: 30 });
    	            $("#jqxdatetime").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
    	            $('#GraphicsPopupTab').jqxTabs({ width: '100%' });
    			};
    			
    			return {
    				config: { theme: null },
    				init: function() {
    					_createElements();
    					_addEventListeners();
    					_initAddWindow();
    				}
    			};
    		}());
    		
    		
            $(document).ready(function () {
            	customDemo.config.theme = getTheme();
            	customDemo.init();
            });
    	</script>
    </head>
    <body class="default">
    <div id="content">
    <div id="header" style="margin:0 11px 0 0px;border-bottom:solid 0px #D4D4D4">
    	<div id='jqxMenu'  style="margin:6px 0px;padding-left:10px">
    		<cfinclude template="headerMenu.cfm">
    	</div>
    </div>
    <div id="splitter">
    	<div>
    		<div style="border: none;" id='jqxTree'></div>
    	</div>
    	<div id="ContentPanel">
    		<div style="float: left;" id="jqxgrid"></div>
    		<div style="float: left;" id="jqxgrid1"></div>
    		<div style="float: left;" id="jqxgrid2"></div>
    		<div style="float: left;" id="jqxgrid3"></div>
    	</div>
    </div>
    <div id="footer" style="font-size:12px;font-family: arial;margin:0 20px 0 20px;padding:2px; text-align: center">
    	<div>
    		<p></p>
    	</div>
    </div>
    <div id="createWindow">
    	<div>Create</div>
    	<div style="overflow: hidden">
    		<div  style="padding-bottom: 4px">
    		</div>
    		<div id="GraphicsPopupTab" style="height: 350px">
    			<ul style="margin-left: 30px;">
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ul>
    					
    			<div></div>
    			<div></div>
    			<div></div>
    			<div id="splitterTab" style="margin: 5px">
    				<div>
    					<div style="border: none;" id="listbox"></div>
    				</div>
    				<div>
    					<div style="border: none;width: 100%; height: 100%; overflow: hidden" id="listBoxContent"></div>
    					<div style="border: none;width: 100%; height: 100%; overflow: hidden" id="listBoxContent1"></div>
    				</div>
    			</div>
    			<div></div>
    			<div></div>
    			<div></div>
    		</div>
    	</div>
    </div>
    </div>
    </body>
    </html>

    thanks a lot

    February 15, 2013 at 7:40 am in reply to: layout property inside splitbar changes after collapsed layout property inside splitbar changes after collapsed #15283

    teguh
    Member

    below is part of my code :

    #createWindow { display: none; }
    #listBoxContent { display: none; }
    #listBoxContent1 { display: none; }

    var customDemo = (function() {

    function _addEventListeners() {
    $(‘#jqxTree’).bind(‘select’, function (event) {
    var args = event.args;
    var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);
    var leveldB = [ “”,”Root”,”Komplek”,”Building”,”Floor”,”Zones”,”Spaces”,”Room” ];
    $(‘#jqxgrid1’).hide();
    $(‘#jqxgrid2’).hide();
    $(‘#jqxgrid’).show();
    _displayGrid(item.value,leveldB[item.level+1]);
    $(“#jqxgrid”).jqxGrid(‘render’);
    });

    $(‘#bkkIutilListrik’).click(function(){
    $(‘#jqxgrid’).hide();
    $(‘#jqxgrid1’).hide();
    $(‘#jqxgrid2’).show();
    $(‘#jqxgrid3’).hide();
    _getBuktiKasI()
    $(“#jqxgrid2”).jqxGrid(‘render’);
    });
    $(‘#bkkIIutilListrik’).click(function(){
    $(‘#jqxgrid’).hide();
    $(‘#jqxgrid1’).hide();
    $(‘#jqxgrid2’).hide();
    $(‘#jqxgrid3’).show();
    _getBuktiKasII()
    $(“#jqxgrid3”).jqxGrid(‘render’);
    });

    $(‘#createWindow’).on(‘open’, function (event) {
    _initTabWidget();
    $(‘#GraphicsPopupTab’).jqxTabs(‘select’, 0);
    $(‘#listbox’).jqxListBox(‘selectIndex’, 0);
    });

    $(‘#splitter’).on(‘expanded’, function (event) {
    $(‘#listBoxContent’).jqxGrid(‘refresh’);
    });

    $(‘#splitter’).on(‘collapsed’, function (event) {
    $(‘#listBoxContent’).jqxGrid(‘refresh’);
    });

    $(“#listbox”).bind(‘select’, function(event){
    var args = event.args;
    var item = $(“#listbox”).jqxListBox(‘getItem’, args.index);
    if(item != null){
    if(item.label == ‘Account PLN’){
    $(‘#listBoxContent1’).hide();
    $(‘#listBoxContent’).show();
    initGrid()
    }
    if(item.label == ‘kWHmeter’){
    $(‘#listBoxContent1’).hide();
    $(‘#listBoxContent’).show();
    initGrid()
    }
    if(item.label == ‘Bukti Kas’){
    $(‘#listBoxContent1’).hide();
    $(‘#listBoxContent’).show();
    initGrid();
    }
    }
    });

    $(‘#GraphicsPopupTab’).on(‘tabclick’, function (event) {
    var clickedItem = event.args.item;
    if(clickedItem == ‘3’){
    $(‘#listbox’).jqxListBox(‘clearSelection’);
    $(‘#listBoxContent’).hide();
    }
    });

    _inputAreaEventHandlers();
    _inputAreaBuktiKasEventHandlers();
    };

    var _initTabWidget = function(tab){
    if(tab == ‘3’){
    var tinggiTab = $(‘#GraphicsPopupTab’).height();
    var lebarTab = $(‘#GraphicsPopupTab’).width();
    tinggiTab = tinggiTab – 50;
    $(“#splitterTab”).jqxSplitter({ theme: customDemo.config.theme, width: ‘99%’, height: tinggiTab, splitBarSize: 5, panels: [{ min: 150, size: 150, collapsible: false, collapsed: false }, { collapsible: false, collapsed: false }] });
    var listBoxItem = [“Account PLN”,”kWHmeter”,”Bukti Kas”];
    $(‘#listbox’).jqxListBox({ source: listBoxItem, theme: customDemo.config.theme, width: ‘100%’, height: tinggiTab });
    $(‘#listbox’).jqxListBox(‘clearSelection’);
    };
    }

    var initGrid = function () {
    var source =
    {
    datatype: “csv”,
    datafields: [
    { name: ‘Date’ },
    { name: ‘S&P 500’ },
    { name: ‘NASDAQ’ }
    ],
    url: ‘nasdaq_vs_sp500_2.txt’
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
    $(“#listBoxContent”).jqxGrid(
    {
    width: ‘100%’,
    height: ‘100%’,
    showtoolbar: true,
    showstatusbar: true,
    statusbarheight: 39,
    source: dataAdapter,
    theme: customDemo.config.theme,
    scrollmode: ‘logical’,
    columns: [
    { text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’ },
    { text: ‘S&P 500’, datafield: ‘S&P 500’ },
    { text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
    ],
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“

    “);
    var tambah = $(““);
    var hapus = $(““);
    toolbar.append(container);
    container.append(hapus);
    container.append(tambah);

    tambah.bind(‘click’,function(){
    });
    hapus.bind(‘click’,function(){

    });
    }
    });
    }

    function _displayGrid(value,level) {

    var source =
    {
    datatype: “json”,
    datafields: [ { name: ‘no’ }, { name: ‘id’}, { name: ‘name’}, { name: ‘description’} ],
    url: ‘remote.cfc?method=getKomplek’,
    data: { categoryLabel: value, categoryLevel: level },
    addrow: function (rowid, rowdata, position, commit) {
    alert(rowdata[‘table’] + ‘\r\n’ + rowdata[‘table_record’] + ‘\r\n’ + rowdata[‘name’] + ‘\r\n’ + rowdata[‘description’] + ‘\r\n’ + rowdata[‘country’] + ‘\r\n’ + rowdata[‘province’]);
    commit(true);
    },
    deleterow: function (rowid, commit) { commit(true); },
    updaterow: function (rowid, newdata, commit) { commit(true); }
    };

    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true });
    dataAdapter.dataBind();

    $(“#jqxgrid”).jqxGrid(
    {
    width: ‘100%’,
    height: ‘100%’,
    source: dataAdapter,
    theme: customDemo.config.theme,
    selectionmode: ‘singlerow’,
    sortable: true,
    columnsresize: true,
    pagerheight: 40,
    editable: false,
    showtoolbar: true,
    showstatusbar: true,
    columns: [
    { text: ‘No’, datafield: ‘no’, width: 40, cellsalign: ‘right’ },
    { text: ‘Name’, datafield: ‘name’ },
    { text: ‘Description’, datafield: ‘description’ }
    ],
    rendertoolbar: function (toolbar) {
    var me = this;
    var container = $(“

    “);
    var addSpan = $(““);
    var editSpan = $(““);
    var trashSpan = $(““);
    var tripNumberInput = $(“”);
    toolbar.append(container);
    container.append(addSpan);
    container.append(editSpan);
    container.append(trashSpan);

    var offset = $(“#jqxgrid”).offset();

    addSpan.bind(‘click’,function(){
    $(‘#GraphicsPopupTab’).jqxTabs(‘select’, 0);
    $(‘#listBoxContent’).jqxGrid(‘updatebounddata’);
    var item = $(‘#jqxTree’).jqxTree(‘getSelectedItem’);
    var leveldB = [ “Root”,”Komplek”,”Gedung”,”Lantai”,”Zones”,”Spaces”,”Room” ];
    var row = {};

    $(“#createWindow”).jqxWindow({
    position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10},
    title: ‘Tambah Record ‘ + leveldB[item.level+1] + ‘ untuk ‘ + leveldB[item.level] + ‘ : ‘ + item.label,
    width: 800,
    theme: customDemo.config.theme,
    isModal: true,
    modalOpacity: 0.01,
    autoOpen: false,
    okButton: $(‘#PSave’),
    cancelButton: $(‘#PCancel’),
    initContent: function(){
    $(‘#GraphicsPopupTab’).jqxTabs({ initTabContent: _initTabWidget });
    $(‘#GraphicsPopupTab’).jqxTabs(‘select’, -1);
    $(‘#listbox’).jqxListBox(‘selectIndex’, 0);
    $(‘#GraphicsPopupTab’).jqxTabs({ width: ‘100%’ });
    }
    });

    $(“#createWindow”).jqxWindow(‘open’);
    });

    editSpan.bind(‘click’,function() {
    $(‘#GraphicsPopupTab’).jqxTabs(‘select’, 0);
    $(‘#listBoxContent’).jqxGrid(‘refresh’);
    var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
    if (selectedrowindex == -1) {
    alert(‘Pilih record terlebih dahulu!’);
    }
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var idrow = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    }
    var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
    var dataState = $("#jqxgrid").jqxGrid('getstate');
    var item = $('#jqxTree').jqxTree('getSelectedItem');
    var leveldB = [ "","Root","Komplek","Gedung","Lantai","Zones","Spaces","Room" ];
    var idrecord = $().val(dataRecord.id);

    $("#createWindow").jqxWindow({
    position: { x: parseInt(offset.left) + 10, y: parseInt(offset.top) + 10},
    title: 'Edit ' + leveldB[item.level+2] +' untuk ' + leveldB[item.level+1] + ' : ' + item.label,
    width: 800,
    theme: customDemo.config.theme,
    isModal: true,
    modalOpacity: 0.01,
    autoOpen: false,
    okButton: $('#PUpdate'),
    cancelButton: $('#PCancel'),
    initContent: function(){
    $('#GraphicsPopupTab').jqxTabs({ initTabContent: _initTabWidget });
    $('#GraphicsPopupTab').jqxTabs({ width: '100%' });
    }
    });

    $("#createWindow").jqxWindow('open');
    });

    trashSpan.bind('click',function(){
    // code for delete item
    });
    }
    });
    };

    function _createElements() {
    var tinggi = screen.availHeight – 230;
    var lebar = screen.availWidth – 310;
    var availTinggi = screen.availHeight – 225;
    var dataTree =
    {
    datatype: "json",
    datafields: [ { name: 'id' },{ name: 'text' },{ name: 'parentid' },{ name: 'value' } ],
    id: 'id',
    url: 'remote.cfc?method=getMenuKomplek'
    }
    var dataAdapter = new $.jqx.dataAdapter(dataTree, { async: false, autoBind: true });
    dataAdapter.dataBind();
    var theme = getTheme();
    var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'value', map: 'value'},{name: 'text', map: 'label'}]);
    $('#jqxTree').jqxTree({ source: records, theme: theme, height: '100%', width: '100%' });
    $("#splitter").jqxSplitter({ theme: theme, width: '100%', height: availTinggi, panels: [{ size: 250}] });
    $("#jqxMenu").jqxMenu({ width: '100%', height: 30 });
    $("#jqxdatetime").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
    $('#GraphicsPopupTab').jqxTabs({ width: '100%' });
    };

    return {
    config: { theme: null },
    init: function() {
    _createElements();
    _addEventListeners();
    _initAddWindow();
    }
    };
    }());

    $(document).ready(function () {
    customDemo.config.theme = getTheme();
    customDemo.init();
    });

    Create

    January 9, 2013 at 3:31 am in reply to: Doubling addrow Doubling addrow #13334

    teguh
    Member

    I moved
    $(“#PSave”).bind(‘click’, function(){ * } ;
    to the outside
    $(“#jqxgrid”).jqxGrid({ * });
    and the problem solved.

    thank’s peter

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)