jQWidgets Forums

Tagged: grid, jqxgrid, load element, showloadelement

This topic contains 7 replies, has 2 voices, and was last updated by Thiago Arantes 11 years, 11 months ago.

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

Author

Load Element now showing Posts

May 15, 2013 at 12:32 pm Load Element now showing #21208

Member

I’m trying to make the Load Element appear each time I reaload my grid, but it just doesn’t show.

I tried to set the showdefaultloadelement and autoshowloadelement properties to true (even though their default value is already true), and also tried the showloadelement method, but nothing works.

I used 2.8.1 and 2.8.3 versions.

Any thoughts?

May 16, 2013 at 5:19 am Load Element now showing #21237

Dimitar

Participant

Hello Thiago Arantes,

If your grid is small and loads quickly, the load element will not be shown. However, the showloadelement should show it no matter the loading time. Please post a code sample, which we may test locally to determine the source of the issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 16, 2013 at 2:46 pm Load Element now showing #21267

Thiago Arantes

Member

Hi,

This is the code I’m trying to make work:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>Grid</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> 
	<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script> 
	<script type="text/javascript" src="../../demos/jqxgrid/generatedata.js"></script>
	<!-- page instructions -->
	<script type="text/javascript">
		var namesColumns = ""; // Selected treeview names that will appear in the grid
		var theme = ""; // Theme CSS du webpart
		
		// TreeView objects
		var dataTree = null; // Raw source of data
		var sourceTree = null; // Formatted source of data
		var dataAdapterTree = null; // DataAdapter do bound to grid
		var recordsTree = null; // Hierachically sorted version of dataAdapterTree
		
		// Grid objects
		var dataGrid = null; // Raw source of data
		var sourceGrid = null; // Formatted source of data
		var dataAdapterGrid = null; // DataAdapter do bound to grid
		
		$(document).ready(function () {
			theme =  getDemoTheme();
			dataGrid = generatedata(100); //first load of data
			
			// Create jqxButtons
			$("#excelExport").jqxButton({ theme: theme });
			$("#refreshGrid").jqxButton({ theme: theme });
		
			// Create jqxSplitter
			$("#jqxSplitter").jqxSplitter(
			{
				theme: theme,
				width: '100%',
				height: 615,
				panels:
				[
					{ size: 200 }
				]
			});
			
			// Create jqxTree
			loadTree();
		
			// Create Handler for Treeview click
			$('#jqxTree').on('select', function (event) {
				// get values from tree and create an array of it
				var e = event.args.element;
				var child = $(e).find(">ul>li");
				var result = event.args.element.id + "|" + child.text();
				result = result.substring(0, result.length - 1)
				
				/********** Highlight all items under this selected item */
				$(document).find("div.draggable").each(function() {
					$(this).css("background-color", "");
				});
				$(e).find("div.draggable").each(function(index) {
					if ($(this).text() != event.args.element.id + "|") {
						$(this).css("background-color", "#EFEFEF");
					}
				});
				/***********/
				// split string with names into new array and build columns definition
				var arrayNames = result.split("|");
				namesColumns = "";
				for (var i = 0; i < arrayNames.length; i++) {
					namesColumns += "{ text: '" + arrayNames[i] + "', datafield: 'd" + i + "', width: 150, filtertype: 'textbox', filtercondition: 'starts_with' },";
				}
				
				// Create jqxGrid
				loadGrid(false);
			});
			
			// Select the first item in the TreeView
			$('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
			
			// Create Handler for Grid Export to Excel Button
			$("#excelExport").click(function () {
                $("#excelExport").jqxGrid('exportdata', 'xls', 'jqxGrid');
            });
			
			// Create Handler for Refresh Grid Button
			$("#refreshGrid").click(function () {
                loadGrid(true);           
            });
		});
		
		// load treeview into the page
		function loadTree() {
			dataTree = [{"id":"Item 1","parentid":"-1","text":"Item 1\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.1","parentid":"Item 1","text":"Item 1.1\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.2","parentid":"Item 1","text":"Item 1.2\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.2.1","parentid":"Item 1.2","text":"Item 1.2.1\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.2.2","parentid":"Item 1.2","text":"Item 1.2.2\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.3","parentid":"Item 1","text":"Item 1.3\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.4","parentid":"Item 1","text":"Item 1.4\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 1.4.1","parentid":"Item 1.4","text":"Item 1.4.1\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 2","parentid":"-1","text":"Item 2\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 2.1","parentid":"Item 2","text":"Item 2.1\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 2.2","parentid":"Item 2","text":"Item 2.2\u003cspan\u003e|\u003c/span\u003e"},{"id":"Item 2.3","parentid":"Item 2","text":"Item 2.3\u003cspan\u003e|\u003c/span\u003e"}]
			
			sourceTree = {
				datatype: "json",
				datafields: [
					{ name: 'id' },
					{ name: 'parentid' },
					{ name: 'text' }
				],
				id: 'id',
				localdata: dataTree
			};
			
			//Apply data - Tree
			dataAdapterTree = new $.jqx.dataAdapter(sourceTree);
			dataAdapterTree.dataBind();
			recordsTree = dataAdapterTree.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
			
			// Create jqxTree
			$('#jqxTree').jqxTree({	source: recordsTree, height: '100%', width: '100%', theme: theme });
			$('#jqxTree').jqxTree('expandAll');
		}
		
		// load grid into the page
		function loadGrid(newData) {
			// Load new data only if button refresh is pressed
			if (newData) {
				dataGrid = generatedata(100);
			}
			
			sourceGrid = {
				localdata: dataGrid,
				datatype: "array",
                datafields: [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]   
			};
			
			dataAdapterGrid = new $.jqx.dataAdapter(sourceGrid);
		
			$('#jqxgrid').jqxGrid('showloadelement'); // Load appears
			
			// Create jqxGrid
			eval(defineGrid(namesColumns));
			
			$('#jqxgrid').jqxGrid('hideloadelement'); // Load disappears
		}
		
		// define how the grid will be loaded into the page
		function defineGrid(namesColumns) {
			var command = "";
			
			command += "$('#jqxgrid').jqxGrid("
			command += "{";
			command += "	width: 1053,";
			command += "	height: 615,";
			command += "	source: dataAdapterGrid,";
			command += "	showfilterrow: true,";
			command += "	filterable: true,";
			command += "	theme: theme,";
			command += "	columnsresize: true,";
			command += "	sortable: true,";
			command += "	columns: [";
			command += "		{ text: 'First Name', datafield: 'firstname', width: 150, filtertype: 'textbox', filtercondition: 'starts_with', pinned: true },";
			command += "		{ text: 'Last Name', datafield: 'lastname', width: 150, filtertype: 'textbox', filtercondition: 'starts_with', pinned: true },";
			command += 			namesColumns;
			command += "		{ text: 'Product', datafield: 'productname', width: 250, filtertype: 'textbox', filtercondition: 'starts_with' },";
			command += "		{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center', filtertype: 'bool' },";
			command += "		{ text: 'Ship Date', datafield: 'date', width: 150, align: 'right', cellsalign: 'right', cellsformat: 'd', filtertype: 'date' },";
			command += "		{ text: 'Quantity', datafield: 'quantity', width: 100, align: 'right', cellsalign: 'right', filtertype: 'number' },";
			command += "		{ text: 'Price', datafield: 'price', width: 150, cellsalign: 'right', align: 'right', cellsformat: 'c2', filtertype: 'number' }";
			command += "	]";
			command += "});";
			
			return command;
		}
	</script>
	<style>
		div.jqx-tree-item span {
			display:none;
		}
		div.saveButton {
			float: right;
			padding-bottom: 10px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="saveButton">
			<input type="button" value="Refresh Grid" id='refreshGrid' />
			<input type="button" value="Export Grid to Excel" id='excelExport' />
		</div>
		<div id="jqxSplitter">
			<div style="border: none;" id='jqxTree'></div>
			<div id="jqxgrid"></div>
		</div>
	</div>
</body>
</html>

May 17, 2013 at 6:16 am Load Element now showing #21313

Dimitar

Participant

Hi Thiago Arantes,

Here is a small modification to your code:

From:

$('#jqxgrid').jqxGrid('showloadelement'); // Load appears
// Create jqxGrid
eval(defineGrid(namesColumns));
$('#jqxgrid').jqxGrid('hideloadelement'); // Load disappears

to:

eval(defineGrid(namesColumns));
$('#jqxgrid').jqxGrid('showloadelement'); // Load appears
setTimeout(function () {
    $('#jqxgrid').jqxGrid('hideloadelement'); // Load disappears
}, 300);

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 21, 2013 at 3:10 pm Load Element now showing #21557

Thiago Arantes

Member

Thanks Dimitar,

So, for now, there’s no way to make the load appear when the grid is actually loading, right?

Let’s wait for a future update on that, but for now I think this trick would work.

Thanks again!

May 22, 2013 at 5:53 am Load Element now showing #21589

Dimitar

Participant

Hi Thiago Arantes,

This is not an issue, the load element would show if the grid needed more time to load. It is not purely cosmetic, it shows during the loading time. If your grid loads within milliseconds, the load element will not be seen.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 4, 2013 at 1:29 pm Load Element now showing #22538

Thiago Arantes

Member

Hi Dimitar,

Maybe it is something I’ve been doing wrong, then, because I never see the loading message, even when my grid takes 5 seconds (or even more) to load.

Since all related parameters are set by default for it to appear, in my opinion this should work.

Thanks

June 7, 2013 at 3:08 pm Load Element now showing #22788

Thiago Arantes

Member

I’ve found a way to make it work:

$('#jqxgrid').jqxGrid('showloadelement'); // Load appears
// Waits .5 seconds before starting the process for the load image to be able to appear...
setTimeout(function() {
	//loadgrid function
}, 500);

What this code does it delaying the grid load for half a second in other for the loading image to be able to appear.

Author

Posts

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

You must be logged in to reply to this topic.