jqGridScript.cfm

<cfif thisTag.executionMode is "start">
	<cfsilent>
		<!------------------------------------------------------------------------
			Author		:	Curt Gratz
			Date		:	7/9/2010
			Description	:
				Custom tag to render script sections of the jqGrid.
				Needs to be inside
				$(document).ready(function(){
				)};
			Usage:

				<cf_jqGridScript
					url="/someURL/someCFC.cfc?method=someMethod"
					colName = "
						'ID',
						'Test'
					"
					colModel = "
						{name: 'id', index:'id', width:0, sorttype:'int', hidden:true},
						{name: 'Test', index:'Test', width:21, align:'center'},
					"
					caption="Test"
				>
			Width:
				Column widths must total...
				962 pixels to fill full body area with no sidebar
				863 pixels to fill uniform area with no sidebar
				773 pixels to fill full body area with sidebar
				761 pixels to fill accordion area with sidebar
				680 pixels to fill uniform area with sidebar
		------------------------------------------------------------------------->
		<cfparam name="attributes.gridID" default="list">
		<cfparam name="attributes.url" default="">
		<cfparam name="attributes.datatype" default="json">
		<cfparam name="attributes.postData" default="">
		<cfparam name="attributes.colNames" default="">
		<cfparam name="attributes.colModel" default="">
		<cfparam name="attributes.pagerID" default="pager">
		<cfparam name="attributes.recordtext" default="{0} to {1} of {2}">
		<cfparam name="attributes.emptyrecords" default="">
		<cfparam name="attributes.emptyDataText" default="Sorry, there are no records to display.">
		<cfparam name="attributes.hidegrid" default="false">
		<cfparam name="attributes.rowNum" default="10">
		<cfparam name="attributes.cellEdit" default="false">
		<cfparam name="attributes.cellsubmit" default="remote">
		<cfparam name="attributes.cellurl" default="">
		<cfparam name="attributes.reloadAfterEdit" default="false">
		<cfif attributes.rowNum GT 10>
			<cfparam name="attributes.toppager" default="true">
		<cfelse>
			<cfparam name="attributes.toppager" default="false">
		</cfif>
		<cfparam name="attributes.rowList" default="5,10,25,50,100">
		<cfparam name="attributes.pagerpos" default="right">
		<cfparam name="attributes.recordpos" default="center">
		<cfparam name="attributes.sortorder" default="asc">
		<cfparam name="attributes.sortname" default="">
		<cfparam name="attributes.viewrecords" default="true">
		<cfparam name="attributes.pgbuttons" default="true">
		<cfparam name="attributes.pginput" default="true">
		<cfparam name="attributes.height" default="auto">
		<cfparam name="attributes.width" default="">
		<cfparam name="attributes.caption" default="">
		<cfparam name="attributes.onSelectRow" default="">
		<cfparam name="attributes.gridComplete" default="">
		<cfparam name="attributes.jsonReader" default="
					root: 'ROWS', //our data
					page: 'PAGE', //current page
					total: 'TOTAL', //total pages
					records: 'RECORDS', //total record
					cell: '',
					id: '0' //will default first column as ID
			">
	</cfsilent>
	<cfoutput>
		var colModelArray = [#attributes.colModel#];

		var debugMode = false;
		if(debugMode){ console.log(colModelArray); }

		<!---if we don't have a width passed in don't do the work to calculate column widths--->
		<cfif len(attributes.width)>
			var gridWidthTotal = #attributes.width#;
			var remainingWidth = gridWidthTotal;
			var autoColumns = [];
			var actionNonTouchWidth = 21;
			var actionTouchWidth = 55;

			if(debugMode){ console.log("Grid Width: " + gridWidthTotal); }

			//touch or not?
			if ($('html').hasClass('touch')) {
				var touch = true;
			} else {
				var touch = false;
			}

			if(debugMode){
				if(touch){
					console.log("Touch enabled and action width set to " + actionTouchWidth);
				} else {
					console.log("Touch disabled and action width set to " + actionNonTouchWidth);
				}
			}

			var totalVisibleColumns = 0;

			//loop through the array of objects
			for (var i in colModelArray) {
				if(debugMode){ var debugInfo = {} }

				//set the column object to the current array element
				var columnObj = colModelArray[i];

				if(debugMode){ debugInfo.Name = columnObj['name'] }

				//if the current column is an 'auto' width column
				if (columnObj['width'] == 'auto') {
					if(debugMode){ debugInfo.Width = columnObj['width'] }

					//if the column has a hidden property
					if (columnObj.hasOwnProperty('hidden')) {
						//if it is not hidden add it to our auto columns
						if (columnObj['hidden'] == false) {
							autoColumns.push(i);

							if(debugMode){ debugInfo.Hidden = "No" }
						}
					} else {
						autoColumns.push(i);

						if(debugMode){
							console.log("'" + columnObj['name'] + "' added to list of automatically calulated columns");
							debugInfo.Hidden = "No";
						}
					}

					totalVisibleColumns = totalVisibleColumns + 1;
				} else {
					//if the column has a hidden property
					if (columnObj.hasOwnProperty('hidden')) {
						//if it is not hidden subtract the total from the width
						if (columnObj['hidden'] == false) {
							if(debugMode){ debugInfo.Hidden = "No" }

							if (columnObj.hasOwnProperty('action')) {
								if(debugMode){ debugInfo.Action = "Yes" }

								if (touch) {
									colModelArray[i]['width'] = actionTouchWidth;
									remainingWidth = remainingWidth - colModelArray[i]['width'];
								} else {
									colModelArray[i]['width'] = actionNonTouchWidth;
									remainingWidth = remainingWidth - colModelArray[i]['width'];
								}

								if(debugMode){ debugInfo.Width = colModelArray[i]['width'] }
							}

							totalVisibleColumns = totalVisibleColumns + 1;
						} else {
							colModelArray[i]['width'] = 0;
						}
					//if it is not hidden subtract the total from the width
					} else if (columnObj.hasOwnProperty('action')) {
						if(debugMode){ debugInfo.Action = "Yes" }

						if (touch) {
							colModelArray[i]['width'] = actionTouchWidth;
							remainingWidth = remainingWidth - colModelArray[i]['width'];
						} else {
							colModelArray[i]['width'] = actionNonTouchWidth;
							remainingWidth = remainingWidth - colModelArray[i]['width'];
						}

						totalVisibleColumns = totalVisibleColumns + 1;

						if(debugMode){ debugInfo.Width = colModelArray[i]['width'] }
					} else {
						if (columnObj.hasOwnProperty('width')) {
							remainingWidth = remainingWidth - columnObj['width'];

							if(debugMode){ debugInfo.Width = columnObj['width'] }
						} else {
							autoColumns.push(i);

							if(debugMode){
								console.log("'" + columnObj['name'] + "' added to list of automatically calulated columns");
							}
						}

						totalVisibleColumns = totalVisibleColumns + 1;
					}
				}

				if(debugMode){ console.log( debugInfo ); }
			}

			//if there is one or more auto columns set the values
			if (autoColumns.length) {
				//remove 5 pixels per column and 1 pixel overall (padding and border widths?)
				remainingWidth = remainingWidth - ((totalVisibleColumns * 5) - 1);

				if(debugMode){
					console.log( "Total Visible Columns: " + totalVisibleColumns);
					console.log( "Remaining Width: " + remainingWidth);
				}

				var remainder = remainingWidth % autoColumns.length;

				if(debugMode){ console.log( "Remainder: " + remainder); }

				for (var i = 0; i < autoColumns.length; i++) {
					//set the auto column(s) to the remaining width
					if (autoColumns.length-1 == i) {
						colModelArray[autoColumns[i]]['width'] = Math.floor(remainingWidth / autoColumns.length) + remainder;
					} else {
						colModelArray[autoColumns[i]]['width'] = Math.floor(remainingWidth / autoColumns.length);
					}

					if(debugMode){ console.log( "Auto column '" + colModelArray[autoColumns[i]]['name'] + "' width set to " + colModelArray[autoColumns[i]]['width'] ); }
				}
			}

			if(debugMode){ console.log(colModelArray) }
		</cfif>

		$("###attributes.gridID#").jqGrid({
			shrinkToFit: false,
			url: '#attributes.url#',
			datatype: '#attributes.datatype#',
			colNames: [#attributes.colNames#],
			colModel: colModelArray,
			pager: $('###attributes.pagerID#'),
			pgbuttons: #attributes.pgbuttons#,
			pginput: #attributes.pginput#,
			recordtext: '#attributes.recordtext#',
			toppager: #attributes.toppager#,
			emptyrecords: '#attributes.emptyrecords#',
			emptyDataText: '#attributes.emptyDataText#',
			hidegrid: #attributes.hidegrid#,
			rowNum: #attributes.rowNum#,
			rowList: [#attributes.rowList#],
			pagerpos: '#attributes.pagerpos#',
			recordpos: '#attributes.recordpos#',
			sortorder: '#attributes.sortorder#',
			sortname: '#attributes.sortname#',
			height: '#attributes.height#',
			<cfif len(attributes.width)>width: '#attributes.width#',</cfif>
			sortorder: '#attributes.sortorder#',
			viewrecords: #attributes.viewrecords#,
			caption: '#attributes.caption#',
			<cfif len(attributes.onSelectRow)>onSelectRow: #attributes.onSelectRow#,</cfif>
			cellEdit: #attributes.cellEdit#,
			cellsubmit: '#attributes.cellsubmit#',
			cellurl: '#attributes.cellurl#',
			<cfif attributes.reloadAfterEdit EQ true>
			afterSubmitCell : function(rowid,cellname,value,iRow,iCol) {
				$("###attributes.gridID#").trigger("reloadGrid");
			},
			</cfif>
			gridComplete:
				function ()
				{
					#attributes.gridComplete#
				}
			,
			loadComplete:
				function ()
				{
					if ($('###attributes.gridID#').getGridParam('records') == 0) { // are there any records?
						var grid = $('###attributes.gridID#');
						var emptyText = grid.getGridParam('emptyDataText'); // get the empty text
						var container = grid.parents('.ui-jqgrid-view'); // find the grid's container
						container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').hide(); // hide the column headers and the cells below
						container.find('.no-records').hide();
						container.find('.ui-jqgrid-titlebar').after('<div class="no-records">' + emptyText + '</div>'); // insert the empty data text
					} else {
						var grid = $('###attributes.gridID#');
						var emptyText = grid.getGridParam('emptyDataText'); // get the empty text
						var container = grid.parents('.ui-jqgrid-view'); // find the grid's container
						container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show();
						container.find('.no-records').hide();
					}

					//add span to icons anchors so we can make them touch capable
					$('html.touch .ui-icon').wrapInner('<span />');
				}
			,
			jsonReader: {
					#attributes.jsonReader#
		}});

		$.jgrid.formatter.integer = {thousandsSeparator: ","};
	</cfoutput>
</cfif>