[davistomParticipant]

Very sorry for the oversight. Thanks again.

[davistomParticipant]

Thanks.

I unpacked jqxgrid.js and located the following code block:

which led me to suspect some sort of timing issue.

[davistomParticipant]

I definitely use v3.2.1 and I observe the described behavior both with my own app and with the indicated demos. Essentially, when I click inside the “Go to page” textbox, or drag across the text in the textbox, nothing happens. I cannot alter the text to enter a new requested page number. But sometimes it does work as I expect, i.e. I can use the field to navigate to a new page, for a few attempts after first browsing to the relevant page.

[davistomParticipant]

Thanks for the explanation.

[davistomParticipant]

I used the link button to construct the site link but the link does not appear. It is –
http://fotgp.com/nhgw/cemeteries_and_burials.php

[davistomParticipant]

To illustrate the problem, I have constructed a live site at . Please visit it and execute the steps described in the paragraphs below to observe the problem. A complete copy of the tabs/grid initialization javascript is included at the end of this post.

At the Cemeteries and Burials portal, select the Ancillary Documents tab. The displayed grid page includes five grave marker records extracted from the underlying MySql database. In this case, the thumbnail image for each record is a pdf document file icon in the form of a 64×64 pixel png image. Note that the thumbnail images are clipped vertically. Apparently each row height is the “autorowheight computed” value determined by the text field wrap state of the row. It appears that the thumbnail field is not used in computing row heights.

Now page forward one page and examine the grid content. On this page, two photo images appear and are severely clipped. Throughout the database, thumbnail image sizes are constrained to 100px for the largest dimension. Paging through the grid yields similar results for the first visit to each page.

Next, retreat to the first page and note that the redrawn page has all pdf icon thumbnails displayed correctly, i.e. the grid rows are redrawn to accommodate the thumbnail image dimensions.

Finally, return to the second grid page and note that all thumbnails, including the photo thumbs are now displayed correctly on that page also.

Apparently, the first time a grid page is rendered, the thumbnail image, which has to be retrieved via the img tag src attribute, is not available for the row height calculation, so row heights are computed based upon the remaining fields, in this case text fields with varying wrap requirements. However, when the page gets revisited, the row height calculation correctly incorporates the image dimensions. Once the page is redrawn with correct row heights, re-demonstrating the problem requires clearing the browser cache.

Following is the complete code block.

$(document).ready(function(){
	//-- Define a function for extracting current grid selected id values
	function current_id(grid){
		var id = grid.jqxGrid('getselectedrowindex');
		if(id >= 0) id = grid.jqxGrid('getrowid', id);
		return id;
	}
	//-- Define an array for the tab titles
	var Tabs = new Array(
		"Cemeteries List", 
		"Burials List", 
		"Selected Cemetery", 
		"Selected Burial", 
		"Update History", 
		"Ancillary Documents", 
		"Grave Markers"
	);
	//-- Define default grid initialization objects
	var default_da_init = {
		datatype: "json",
		id: "id",
		url: site_url + "cemeteries_and_burials.php",
		type: "POST"
	};
	var default_grid_init = {
		theme: "energyblue",
		columnsresize: true,
		filterable: true,
		sortable: true,
		altrows: true,
		pageable: true,
		showstatusbar: true, 
		statusbarheight: 38,
		autoheight: true,
		autorowheight: true, 
		width: '100%',
		selectionmode: 'singlerow'
	};
	//-- Define a button initialiaztion object
	var button_init = {width: 96, height: 28, disabled: true};
	//-- Define button tooltip message templates and a function for implementing them
	var clear_tooltip = "Clear the current ## record selection";
	if(admin){
		var new_tooltip = "Add a new ## record";
	 	var edit_tooltip = "Edit the selected ## record";
		var delete_tooltip = "Delete the selected ## record";
	}
	function button_tooltips(grid, item){
		grid.find('.clear').jqxTooltip({content: clear_tooltip.replace('##', item)});
		if(admin){
			grid.find('.add').jqxTooltip({content: new_tooltip.replace('##', item)});
			grid.find('.edit').jqxTooltip({content: edit_tooltip.replace('##', item)});
			grid.find('.delete').jqxTooltip({content: delete_tooltip.replace('##', item)});
		}
	}
	//-- Define a function for managing grid buttons state
	function buttons_state(grid, clear){
		grid.find('button').each(function(index){
			$(this).jqxButton({disabled: clear});
		});
		if(admin){
			grid.find('button.add').jqxButton({disabled: !clear});
		}
	}
	//-- Define a function for rendering a media item thumbnail/link into a media path cell
	var media_link_renderer = function(row, columnfield, value){
		return '<div class="center" style="margin: 4px;"><a href="../nhco/media/' + value + '" target="_blank">'
			+ '<img style="vertical-align: middle;" src="../nhco/media/thumbs/' + value + '"/></a></div>';
	}
	//-- Initialize the widgets on each tab when the tab is initially selected
	var initTabs = function(tab){
		//-- Switch on the selected tab index
		switch(tab){
			//-- Case 0 is the cemeteries list tab
			case 0:
				//-- Construct the cemeteries list data adapter
				var cemeteries_list_grid_da = new $.jqx.dataAdapter(
					$.extend(true, {}, default_da_init, {datafields: [{name: "id", type: "int"},
							{name: "cemetery"},
							{name: "type"},
							{name: "burials", type: "int"},
							{name: "location"}],
						data: {"ajax": true, "tab": "cemeteries_list", action: "read", "ajax_token": ajax_token}
					})
				);
				//-- Construct the cemeteries list grid initialization object
				var cemeteries_list_grid_init = $.extend(true, {}, default_grid_init, {
					source: cemeteries_list_grid_da,
					columns: [{text: 'id', datafield: 'id', hidden: true},
						{text: 'Cemetery', datafield: 'cemetery', align: 'center'},
						{text: 'Type', datafield: 'type', width: "8%", align: 'center'},
						{text: 'Burials', datafield: 'burials', width: "5%", align: 'center'},
						{text: 'Location', datafield: 'location', align: 'center'}],
					renderstatusbar: function(statusbar){
						var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
						var clearButton = $("<button class='clear' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Clear_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Clear</span></button>");
						if(admin){
							var addButton = $("<button class='add' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Add_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>New</span></button>");
							var editButton = $("<button class='edit' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Edit_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></button>");
							var deleteButton = $("<button class='delete' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Delete_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></button>");
						}
						container.append(clearButton);
						if(admin){
							container.append(addButton);
							container.append(editButton);
							container.append(deleteButton);
						}
						statusbar.append(container);
						clearButton.jqxButton(button_init);
						if(admin){
							addButton.jqxButton($.extend(true, {}, button_init, {disabled: false}));
							editButton.jqxButton(button_init);
							deleteButton.jqxButton(button_init);
						}
						clearButton.click(function(event){
							$('#cemeteries_and_burials_tabs').jqxTabs('disableAt', Tabs.indexOf('Selected Cemetery'));
							$('#cemeteries_and_burials_tabs').jqxTabs('disableAt', Tabs.indexOf('Selected Burial'));
							$('#burials_list_grid').jqxGrid('clearselection');
							$('#update_history_grid').jqxGrid('clearselection');
							$('#ancillary_documents_grid').jqxGrid('clearselection');
							$('#cemeteries_list_grid').jqxGrid('clearselection');
							buttons_state($('#cemeteries_list_grid'), true);
						});
						if(admin){
							addButton.click(function(event){
								alert('New');
							});
							editButton.click(function(event){
								alert('Edit');
							});
							deleteButton.click(function(event){
								alert('Delete');
							});
						}
					}
				});
				//-- Initialize the cemeteries list grid
				$('#cemeteries_list_grid').jqxGrid(cemeteries_list_grid_init);
				//-- Set the button tooltips
				button_tooltips($('#cemeteries_list_grid'), 'cemetery');
				//-- Set the cemeteries list grid click, double click and rowunselect handlers
				$('#cemeteries_list_grid').on('rowclick', function(event){
					$('#cemeteries_and_burials_tabs').jqxTabs('enableAt', Tabs.indexOf('Selected Cemetery'));
					buttons_state($('#cemeteries_list_grid'), false);
				});
				$('#cemeteries_list_grid').on('rowdoubleclick', function(event){
					$('#cemeteries_and_burials_tabs').jqxTabs('select', Tabs.indexOf('Selected Cemetery'));
				});
				$('#cemeteries_list_grid').on('rowunselect', function(event){
					$('#burials_list_grid').jqxGrid('clearselection');
					$('#cemeteries_and_burials_tabs').jqxTabs('disableAt', Tabs.indexOf('Selected Burial'));
				});
				break;
			//-- Case 1 is the burials list tab
			case 1:
				//-- Construct the burials list data adapter
				var burials_list_grid_da = new $.jqx.dataAdapter(
					$.extend(true, {}, default_da_init, {datafields: [{name: "id", type: "int"},
							{name: "cid", type: "int"},
							{name: "decedent"},
							{name: "dob"},
							{name: "dod"},
							{name: "cemetery"}],
						data: {"ajax": true, "tab": "burials_list", action: "read", "ajax_token": ajax_token},
						formatData: function(data){
							var cid = $('#cemeteries_list_grid').jqxGrid('getselectedrowindex');
							if(cid >= 0){
								$.extend(data, {cid: $('#cemeteries_list_grid').jqxGrid('getrowid', cid)});
							}
							return data;
						}
					})
				);
				//-- Construct the burials list grid initialization object
				var burials_list_grid_init = $.extend(true, {}, default_grid_init, {
					source: burials_list_grid_da,
					columns: [{text: 'id', datafield: 'id', hidden: true},
						{text: 'cid', datafield: 'cid', hidden: true},
						{text: 'Decedent', datafield: 'decedent', align: 'center'},
						{text: 'Date of Birth', datafield: 'dob', width: "12%", align: 'center'},
						{text: 'Date of Death', datafield: 'dod', width: "12%", align: 'center'},
						{text: 'Cemetery', datafield: 'cemetery', align: 'center'}
					],
					renderstatusbar: function(statusbar){
						var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
						var clearButton = $("<button class='clear' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Clear_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Clear</span></button>");
						if(admin){
							var addButton = $("<button class='add' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Add_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>New</span></button>");
							var editButton = $("<button class='edit' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Edit_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></button>");
							var deleteButton = $("<button class='delete' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Delete_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></button>");
						}
						container.append(clearButton);
						if(admin){
							container.append(addButton);
							container.append(editButton);
							container.append(deleteButton);
						}
						statusbar.append(container);
						clearButton.jqxButton(button_init);
						if(admin){
							addButton.jqxButton($.extend(true, {}, button_init, {disabled: false}));
							editButton.jqxButton(button_init);
							deleteButton.jqxButton(button_init);
						}
						clearButton.click(function(event){
							$('#cemeteries_and_burials_tabs').jqxTabs('disableAt', Tabs.indexOf('Selected Burial'));
							$('#burials_list_grid').jqxGrid('clearselection');
							$('#grave_markers_grid').jqxGrid('clearselection');
							buttons_state($('#burials_list_grid'), true);
						});
						if(admin){
							addButton.click(function(event){
								alert('New');
							});
							editButton.click(function(event){
								alert('Edit');
							});
							deleteButton.click(function(event){
								alert('Delete');
							});
						}
					}
				});
				//-- Initialize the burials list grid
				$('#burials_list_grid').jqxGrid(burials_list_grid_init);
				//-- Set the button tooltips
				button_tooltips($('#burials_list_grid'), 'burial');
				//-- Set the burials list grid click and double click handlers
				$('#burials_list_grid').on('rowclick', function(event){
					$('#cemeteries_and_burials_tabs').jqxTabs('enableAt', Tabs.indexOf('Selected Burial'));
					buttons_state($('#burials_list_grid'), false);
				});
				$('#burials_list_grid').on('rowdoubleclick', function(event){
					$('#cemeteries_and_burials_tabs').jqxTabs('select', Tabs.indexOf('Selected Burial'));
				});
				break;
			//-- Case 2 is the selected cemetery tab
			case 2:
				//-- Construct the selected cemetery data adapter
				var selected_cemetery_grid_da = new $.jqx.dataAdapter({datatype: "json",
					datafields: [{name: "tag"},
						{name: "value"}],
					id: "tag",
					url: site_url + "cemeteries_and_burials.php",
					data: {"ajax": true, "tab": "selected_cemetery", action: "read", "ajax_token": ajax_token},
					type: "POST"},
					{formatData: function(data){
						var cid = $('#cemeteries_list_grid').jqxGrid('getselectedrowindex');
						if(cid >= 0){
							$.extend(data, {cid: $('#cemeteries_list_grid').jqxGrid('getrowid', cid)});
						}
						return data;},
					downloadComplete: function(data, status, jqXHR){
						$('#selected_cemetery_title').html(data[0].value);
						$('#selected_cemetery_name').html(data[0].value);
					}
				});
				//-- Initialize the selected cemetery grid
				$('#selected_cemetery_grid').jqxGrid({
					theme: "energyblue",
					source: selected_cemetery_grid_da,
					columns: [{text: ' ', datafield: 'tag', width: '28%', 
							cellsrenderer: function(row, columnfield, value){return '<div style="text-align: center; font-weight: bold; margin: 5px;">' + value + '</div>';}},
						{text: ' ', datafield: 'value', width: '72%'}
					],
					columnsresize: true,
					altrows: true,
					autoheight: true,
					autorowheight: true, 
					width: '50%', 
					selectionmode: 'none'
				});
				//-- Set the selected cemetery grid double click handler
				$('#selected_cemetery_grid').on('rowdoubleclick', function(event){
					switch(event.args.rowindex){
						case 5:
							$('#cemeteries_and_burials_tabs').jqxTabs('select', Tabs.indexOf('Update History'));
							break;
						case 6:
							$('#cemeteries_and_burials_tabs').jqxTabs('select', Tabs.indexOf('Ancillary Documents'));
							break;
						case 8:
							$('#cemeteries_and_burials_tabs').jqxTabs('select', Tabs.indexOf('Burials List'));
							break;
						default:
							break;
					}
				});
				break;
			//-- Case 3 is the selected burial tab
			case 3:
				//-- Construct the selected burial list data adapter
				var selected_burial_grid_da = new $.jqx.dataAdapter({datatype: "json",
					datafields: [{name: "tag"},
						{name: "value"}],
					id: "tag",
					url: site_url + "cemeteries_and_burials.php",
					data: {"ajax": true, "tab": "selected_burial", action: "read", "ajax_token": ajax_token},
					type: "POST"},
					{formatData: function(data){
						var bid = $('#burials_list_grid').jqxGrid('getselectedrowindex');
						if(bid >= 0){
							$.extend(data, {bid: $('#burials_list_grid').jqxGrid('getrowid', bid)});
						}
						return data;},
					downloadComplete: function(data, status, jqXHR){
						var name = data[1].value + ' ' + data[0].value;
						$('#selected_burial_title').html(name + ' Burial');
						$('#selected_burial_name').html(name + ' burial');
					}
				});
				//-- Initialize the selected burial grid
				$('#selected_burial_grid').jqxGrid({
					theme: "energyblue",
					source: selected_burial_grid_da,
					columns: [{text: ' ', datafield: 'tag', 
							width: '28%', 
							cellsrenderer: function(row, columnfield, value){return '<div style="text-align: center; font-weight: bold; margin: 5px;">' + value + '</div>';}},
						{text: ' ', datafield: 'value', width: '72%'}
					],
					columnsresize: true,
					altrows: true,
					autoheight: true,
					autorowheight: true, 
					width: '50%', 
					selectionmode: 'none'
				});
				//-- Set the selected burial grid double click handler
				$('#selected_burial_grid').on('rowdoubleclick', function(event){
					switch(event.args.rowindex){
						case 7:
							$('#cemeteries_and_burials_tabs').jqxTabs('select', Tabs.indexOf('Grave Markers'));
							break;
						default:
							break;
					}
				});
				break;
			//-- Case 4 is the update history tab
			case 4:
				//-- Construct the update history data adapter
				var update_history_grid_da = new $.jqx.dataAdapter(
					$.extend(true, {}, default_da_init, {datafields: [{name: "id", type: "int"},
						{name: "cid", type: "int"},
						{name: "cemetery"},
						{name: "date"},
						{name: "recorder"},
						{name: "description"}],
						data: {"ajax": true, "tab": "update_history", action: "read", "ajax_token": ajax_token},
						formatData: function(data){
							var cid = $('#cemeteries_list_grid').jqxGrid('getselectedrowindex');
							if(cid >= 0){
								$.extend(data, {cid: $('#cemeteries_list_grid').jqxGrid('getrowid', cid)});
							}
							return data;
						}
					})
				);
				//-- Construct the update history grid initialization object
				var update_history_grid_init = $.extend(true, {}, default_grid_init, {
					source: update_history_grid_da,
					columns: [{text: 'id', datafield: 'id', hidden: true},
						{text: 'cid', datafield: 'cid', hidden: true},
						{text: 'Cemetery', datafield: 'cemetery', align: 'center'},
						{text: 'Date', datafield: 'date', width: '8%', align: 'center'},
						{text: 'Recorder', datafield: 'recorder', width: '16%', align: 'center'},
						{text: 'Description', datafield: 'description', align: 'center'}
					],
					renderstatusbar: function(statusbar){
						var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
						var clearButton = $("<button class='clear' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Clear_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Clear</span></button>");
						if(admin){
							var addButton = $("<button class='add' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Add_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>New</span></button>");
							var editButton = $("<button class='edit' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Edit_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></button>");
							var deleteButton = $("<button class='delete' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Delete_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></button>");
						}
						container.append(clearButton);
						if(admin){
							container.append(addButton);
							container.append(editButton);
							container.append(deleteButton);
						}
						statusbar.append(container);
						clearButton.jqxButton(button_init);
						if(admin){
							addButton.jqxButton($.extend(true, {}, button_init, {disabled: false}));
							editButton.jqxButton(button_init);
							deleteButton.jqxButton(button_init);
						}
						clearButton.click(function(event){
							$('#update_history_grid').jqxGrid('clearselection');
							buttons_state($('#update_history_grid'), true);
						});
						if(admin){
							addButton.click(function(event){
								alert('New');
							});
							editButton.click(function(event){
								alert('Edit');
							});
							deleteButton.click(function(event){
								alert('Delete');
							});
						}
					},
					pagesize: 5
				});
				//-- Initialize the update history grid
				$('#update_history_grid').jqxGrid(update_history_grid_init);
				//-- Set the button tooltips
				button_tooltips($('#update_history_grid'), 'update history');
				//-- Set the update history grid click handler
				$('#update_history_grid').on('rowclick', function(event){
					buttons_state($('#update_history_grid'), false);
				});
				break;
			//-- Case 5 is the ancillary documents tab
			case 5:
				//-- Construct the ancillary documents data adapter
				var ancillary_documents_grid_da = new $.jqx.dataAdapter(
					$.extend(true, {}, default_da_init, {datafields: [{name: "id", type: "int"},
						{name: "cid", type: "int"},
						{name: "cemetery"},
						{name: "title"},
						{name: "path"},
						{name: "description"}],
						data: {"ajax": true, "tab": "ancillary_documents", action: "read", "ajax_token": ajax_token},
						formatData: function(data){
							var cid = $('#cemeteries_list_grid').jqxGrid('getselectedrowindex');
							if(cid >= 0){
								$.extend(data, {cid: $('#cemeteries_list_grid').jqxGrid('getrowid', cid)});
							}
							return data;
						}
					})
				);
				//-- Construct the ancillary documents grid initialization object
				var ancillary_documents_grid_init = $.extend(true, {}, default_grid_init, {
					source: ancillary_documents_grid_da,
					columns: [{text: 'id', datafield: 'id', hidden: true},
						{text: 'cid', datafield: 'cid', hidden: true},
						{text: 'Cemetery', datafield: 'cemetery', align: 'center'},
						{text: 'Title', datafield: 'title', align: 'center'},
						{text: 'Thumbnail', datafield: 'path', cellsrenderer: media_link_renderer, align: 'center', width: '12%'},
						{text: 'Description', datafield: 'description', align: 'center'}
					],
					renderstatusbar: function(statusbar){
						var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
						var clearButton = $("<button class='clear' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Clear_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Clear</span></button>");
						if(admin){
							var addButton = $("<button class='add' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Add_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>New</span></button>");
							var editButton = $("<button class='edit' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Edit_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></button>");
							var deleteButton = $("<button class='delete' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Delete_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></button>");
						}
						container.append(clearButton);
						if(admin){
							container.append(addButton);
							container.append(editButton);
							container.append(deleteButton);
						}
						statusbar.append(container);
						clearButton.jqxButton(button_init);
						if(admin){
							addButton.jqxButton($.extend(true, {}, button_init, {disabled: false}));
							editButton.jqxButton(button_init);
							deleteButton.jqxButton(button_init);
						}
						clearButton.click(function(event){
							$('#ancillary_documents_grid').jqxGrid('clearselection');
							buttons_state($('#ancillary_documents_grid'), true);
						});
						if(admin){
							addButton.click(function(event){
								alert('New');
							});
							editButton.click(function(event){
								alert('Edit');
							});
							deleteButton.click(function(event){
								alert('Delete');
							});
						}
					},
					pagesize: 5
				});
				//-- Initialize the ancillary documents grid
				$('#ancillary_documents_grid').jqxGrid(ancillary_documents_grid_init);
				//-- Set the button tooltips
				button_tooltips($('#ancillary_documents_grid'), 'ancillary document');
				//-- Set the ancillary documents grid click handler
				$('#ancillary_documents_grid').on('rowclick', function(event){
					buttons_state($('#ancillary_documents_grid'), false);
				});
				break;
			//-- Case 6 is the grave markers tab
			case 6:
				//-- Construct the grave markers data adapter
				var grave_markers_grid_da = new $.jqx.dataAdapter(
					$.extend(true, {}, default_da_init, {datafields: [{name: "id", type: "int"},
						{name: "bid", type: "int"},
							{name: "decedent"},
							{name: "path"},
							{name: "caption"},
							{name: "cemetery"}],
						data: {"ajax": true, "tab": "grave_markers", action: "read", "ajax_token": ajax_token},
						formatData: function(data){
							var cid = $('#cemeteries_list_grid').jqxGrid('getselectedrowindex');
							if(cid >= 0){
								$.extend(data, {cid: $('#cemeteries_list_grid').jqxGrid('getrowid', cid)});
							}
							var bid = $('#burials_list_grid').jqxGrid('getselectedrowindex');
							if(bid >= 0){
								$.extend(data, {bid: $('#burials_list_grid').jqxGrid('getrowid', bid)});
							}
							return data;
						}
					})
				);
				//-- Construct the grave markers grid initialization object
				var grave_markers_grid_init = $.extend(true, {}, default_grid_init, {
					source: grave_markers_grid_da,
					columns: [{text: 'id', datafield: 'id', hidden: true},
						{text: 'bid', datafield: 'bid', hidden: true},
						{text: 'Decedent', datafield: 'decedent', align: 'center'},
						{text: 'Thumbnail', datafield: 'path', cellsrenderer: media_link_renderer, align: 'center', width: '12%'},
						{text: 'Caption', datafield: 'caption', align: 'center'},
						{text: 'Cemetery', datafield: 'cemetery', align: 'center'}
					],
					renderstatusbar: function(statusbar){
						var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
						var clearButton = $("<button class='clear' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Clear_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Clear</span></button>");
						if(admin){
							var addButton = $("<button class='add' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Add_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>New</span></button>");
							var editButton = $("<button class='edit' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Edit_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></button>");
							var deleteButton = $("<button class='delete' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Delete_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></button>");
						}
						container.append(clearButton);
						if(admin){
							container.append(addButton);
							container.append(editButton);
							container.append(deleteButton);
						}
						statusbar.append(container);
						clearButton.jqxButton(button_init);
						if(admin){
							addButton.jqxButton($.extend(true, {}, button_init, {disabled: false}));
							editButton.jqxButton(button_init);
							deleteButton.jqxButton(button_init);
						}
						clearButton.click(function(event){
							$('#grave_markers_grid').jqxGrid('clearselection');
							buttons_state($('#grave_markers_grid'), true);
						});
						if(admin){
							addButton.click(function(event){
								alert('New');
							});
							editButton.click(function(event){
								alert('Edit');
							});
							deleteButton.click(function(event){
								alert('Delete');
							});
						}
					},
					pagesize: 5
				});
				//-- Initialize the grave markers grid
				$('#grave_markers_grid').jqxGrid(grave_markers_grid_init);
				//-- Set the button tooltips
				button_tooltips($('#grave_markers_grid'), 'grave marker');
				//-- Set the grave markers grid click handler
				$('#grave_markers_grid').on('rowclick', function(event){
					buttons_state($('#grave_markers_grid'), false);
				});
				break;
			default:
				break;
		}
	}
	//-- Initialize the tabs
	$('#cemeteries_and_burials_tabs').jqxTabs({width: "100%", theme: "energyblue", initTabContent: initTabs});
	$('#cemeteries_and_burials_tabs').jqxTabs("disableAt", Tabs.indexOf('Selected Cemetery'));
	$('#cemeteries_and_burials_tabs').jqxTabs("disableAt", Tabs.indexOf('Selected Burial'));
	//-- Initialize the tab tool tips
	$('#cemeteries_list_tab').jqxTooltip({content: 'Paged list of documented cemeteries'});
	$('#burials_list_tab').jqxTooltip({content: 'Paged list of documented burials'});
	$('#selected_cemetery_tab').jqxTooltip({content: 'Details page for the selected cemetery'});
	$('#selected_burial_tab').jqxTooltip({content: 'Details page for the selected burial'});
	$('#update_history_tab').jqxTooltip({content: 'Paged list of cemetery update history records'});
	$('#ancillary_documents_tab').jqxTooltip({content: 'Paged list of cemetery ancillary document records'});
	$('#grave_markers_tab').jqxTooltip({content: 'Paged list of burial grave marker records'});
	//-- Set a handler for processing a new tab selection
	$('#cemeteries_and_burials_tabs').on('selected', function(event){
	//-- Get the currently selected cemetery and burial id is values
	var cid = $('#cemeteries_list_grid').jqxGrid('getselectedrowindex');
	if(cid >= 0) cid = $('#cemeteries_list_grid').jqxGrid('getrowid', cid);
		//-- Switch on the selected tab index
		switch(event.args.item){
			//-- Case 0 is the cemeteries list tab
			case 0:
				break;
			//-- Case 1 is the burials list tab
			case 1:
				//-- Test for update and branch accordingly
				var cid = current_id($('#cemeteries_list_grid'));
				if($('#burials_list .last_refreshed_cid').val() != cid){
					$('#burials_list_grid').jqxGrid('clearselection');
					$('#cemeteries_and_burials_tabs').jqxTabs('disableAt', Tabs.indexOf('Selected Burial'));
					$('#burials_list_grid').jqxGrid('updatebounddata');
					$('#burials_list .last_refreshed_cid').val(cid);
				}
				if(current_id($('#burials_list_grid')) === -1){
					buttons_state($('#burials_list_grid'), true);
				}
				break;
			//-- Case 2 is the selected cemetery tab
			case 2:
				//-- Test for update and branch accordingly
				var cid = current_id($('#cemeteries_list_grid'));
				if($('#selected_cemetery .last_refreshed_cid').val() != cid){
					$('#selected_cemetery_grid').jqxGrid('updatebounddata');
					$('#selected_cemetery .last_refreshed_cid').val(cid);
				}
				break;
			//-- Case 3 is the selected burial tab
			case 3:
				//-- Test for update and branch accordingly
				var bid = current_id($('#burials_list_grid'));
				//-- Test for update and branch accordingly
				if($('#selected_burial .last_refreshed_bid').val() != bid){
					$('#selected_burial_grid').jqxGrid('updatebounddata');
					$('#selected_burial .last_refreshed_bid').val(bid);
				}
				break;
			//-- Case 4 is the update history tab
			case 4:
				//-- Test for update and branch accordingly
				var cid = current_id($('#cemeteries_list_grid'));
				if($('#update_history .last_refreshed_cid').val() != cid){
					$('#update_history_grid').jqxGrid('clearselection');
					$('#update_history_grid').jqxGrid('updatebounddata');
					$('#update_history .last_refreshed_cid').val(cid);
				}
				if(current_id($('#update_history_grid')) === -1){
					buttons_state($('#update_history_grid'), true);
				}
				break;
			//-- Case 5 is the ancillary documents tab
			case 5:
				//-- Test for update and branch accordingly
				var cid = current_id($('#cemeteries_list_grid'));
				if($('#ancillary_documents .last_refreshed_cid').val() != cid){
					$('#ancillary_documents_grid').jqxGrid('clearselection');
					$('#ancillary_documents_grid').jqxGrid('updatebounddata');
					$('#ancillary_documents .last_refreshed_cid').val(cid);
				}
				if(current_id($('#ancillary_documents_grid')) === -1){
					buttons_state($('#ancillary_documents_grid'), true);
				}
				break;
			//-- Case 6 is the grave markers tab
			case 6:
				//-- Test for update and branch accordingly
				var cid = current_id($('#cemeteries_list_grid'));
				var bid = current_id($('#burials_list_grid'));
				if(!($('#grave_markers .last_refreshed_cid').val() == cid &&
					$('#grave_markers .last_refreshed_bid').val() == bid)){
					$('#grave_markers_grid').jqxGrid('clearselection');
					$('#grave_markers_grid').jqxGrid('updatebounddata');
					$('#grave_markers .last_refreshed_cid').val(cid);
					$('#grave_markers .last_refreshed_bid').val(bid);
				}
				if(current_id($('#grave_markers_grid')) === -1){
					buttons_state($('#grave_markers_grid'), true);
				}
				break;
			default:
				break;
		}
	});
});

[davistomParticipant]

The grids are initialized in an initTabContent function. All of the code included in the previous post is located inside a case table block for the relevant grid in an initTabContent callback.

I think the problem may be related to different execution paths for autorowheight calculations between normal, e.g. plain text fields and more complicated cell rendering callback cases, e.g. when constructing anchor links with embedded img tags with external sources. In any case, that is the behavior I observe. If I have plain text fields with values long enough to wrap, everything seems to work as expected. But using a cellsrenderer callback to replace a text field value, e.g. an external file path, with an anchor linked to the file and an embedded img tag for the file thumbnail, the grid is initially displayed with something like a default row height, resulting in clipping the thumbnail image. However, it seems that anything which causes the grid to be redrawn, e.g. paging away and returning, results in the grid being displayed with correct row heights.

[davistomParticipant]

Using jQuery 1.10.2, jQWidgets 3.2.1.

Code snippets appear after the following description.

The application concerns a cemeteries and burials database used in a genealogy website. It uses a jqxTabs widget with five tabs, each incorporating a jqxGrid which displays linked table data extracted from a MySql database. The particular tab/grid in question displays data records representing grave marker photographs, locator maps or other related media objects. Each row of data delivered to the grid includes text fields for a decedent’s name, a file path to the external media file, a caption and a cemetery name. The grid is initialized with paging enabled, autoheight: true, autorowheight: true and a custom cell rendering function which transforms the file path field into a link anchor for the file and an embedded img tag with src set to a thumbnail version of the linked file. The cell rendering function appears below. It all works fine except that when a grid page is first rendered, the row heights do not accommodate the thumbnail dimensions, i.e. the thumbnails are clipped vertically. If any of the text fields overflow, they are wrapped and the row heights adjusted as expected. If the grid page gets redrawn, e.g. by paging ahead or behind by one page and then returning to the subject page, the row heights get adjusted to correctly accommodate the thumbnail dimensions.

The first code snippet below is the cell rendering function used to transform the external file path text field into a web link/thumbnail display. It is invoked by function name in the ‘cellsrenderer’ property of the ‘Thumbnail’ column in the grid initialization object, which appears as the second snippet.

	//-- Define a function for rendering a media item thumbnail/link into a media path cell
	var media_link_renderer = function(row, columnfield, value){
		return '<div class="center" style="margin: 4px;"><a href="../nhco/media/' + value + '" target="_blank">'
			+ '<img style="vertical-align: middle;" src="../nhco/media/thumbs/' + value + '"/></a></div>';
	}

				//-- Construct the grave markers grid initialization object
				var grave_markers_grid_init = $.extend(true, {}, default_grid_init, {
					source: grave_markers_grid_da,
					columns: [{text: 'id', datafield: 'id', hidden: true},
						{text: 'bid', datafield: 'bid', hidden: true},
						{text: 'Decedent', datafield: 'decedent', align: 'center'},
						{text: 'Thumbnail', datafield: 'path', cellsrenderer: media_link_renderer, align: 'center', width: '12%'},
						{text: 'Caption', datafield: 'caption', align: 'center'},
						{text: 'Cemetery', datafield: 'cemetery', align: 'center'}
					],
					renderstatusbar: function(statusbar){
						var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
						var clearButton = $("<button class='clear' style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='images/Clear_16.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Clear</span></button>");
						container.append(clearButton);
						statusbar.append(container);
						clearButton.jqxButton(button_init);
						clearButton.click(function(event){
							$('#grave_markers_grid').jqxGrid('clearselection');
							buttons_state($('#grave_markers_grid'), true);
						});
					},
					pagesize: 5
				});
				//-- Initialize the grave markers grid
				$('#grave_markers_grid').jqxGrid(grave_markers_grid_init);

Thanks for looking

[davistomParticipant]

Sorry about the unsuccessful attempts to display the cell rendering function. It is just a div tag enclosing an anchor tag with href set to the field value (the media file path), enclosing an img tag with src set to a thumbnail version of the media file. It isn’t the problem anyway. The problem is that the grid row height is not auto adjusted to accommodate the thumbnail dimensions on page load. However, paging ahead (or behind) the subject grid page and then returning to the subject page causes the grid to be redrawn with the correct row heights.

[davistomParticipant]

The cellsrenderer function is – function(row, columnfield, value){
return ‘<div class=”center” style=”margin: 4px;”>‘
+ ‘</div>’;

[davistomParticipant]

Thank you.

Since toggle select/unselect on click is the design behavior for multiplerows selection mode, I expected the same for singlerow, and upon discovering otherwise, wondered whether altering the design behavior with a click handler would upset something else that I didn’t understand.

Thanks again.

[davistomParticipant]

I would sincerely appreciate a reply to my last. Thanks.

[davistomParticipant]

I understand the design behavior. I just don’t understand why unselect on mouse click isn’t the design behavior. More to the point, I wonder whether I can implement unselect on click via a click handler, and whether doing so will disturb something else that I don’t yet understand.

[davistomParticipant]

Thanks for the reply.

[Author]

Posts