Grid rowsize using custom cellsrenderer

[davistomParticipant]

I use a jqxGrid to display a paged list of data extracted from a MySql database. The data records represent external media objects linked by the web application. The records include fields for the media object mime type, a caption, the media external file path and a description. The jqxGrid initialization object sets autoheight and autorowheight true and uses a cellsrenderer function to replace the file path column value with a link anchor for the media file and an embedded thumbnail img element. The function is depicted below.

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

The problem which prompts this post is that when a grid page is initially displayed, the row heights are not set by the thumbnail image element height, and the thumbs are usually clipped. If the grid is paged away from the page in question and then returned, the page gets redrawn with correct row height. I would appreciate some help resolving this issue. Thanks.

[davistomParticipant]

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

[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.

[DimitarParticipant]

Hello davistom,

Please re-post your code and format it by selecting it and clicking on the code button in the toolbar. Also make sure you are using the latest version of jQWidgets (3.2.1).

Best Regards,
Dimitar

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

[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

[DimitarParticipant]

Hi davistom,

Make sure you initialize the grids inside the different tabs through the initTabContent callback function. Please check out the demo Integration with other widgets to see how to implement the initialization.

Best Regards,
Dimitar

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

[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.

[DimitarParticipant]

Hi davistom,

Here is an example with a similar scenario, based on the demo Image Column:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var movies = new Array();

            // Avatar
            movies[0] = { Image: 'avatar.png', Title: 'Avatar', Year: 2009 };
            movies[1] = { Image: 'priest.png', Title: 'Priest', Year: 2006 };
            movies[2] = { Image: 'endgame.png', Title: 'End Game', Year: 2006 };
            movies[3] = { Image: 'unknown.png', Title: 'Unknown', Year: 2011 };
            movies[4] = { Image: 'unstoppable.png', Title: 'Unstoppable', Year: 2010 };
            movies[5] = { Image: 'twilight.png', Title: 'Twilight', Year: 2008 };
            movies[6] = { Image: 'kungfupanda.png', Title: 'Kung Fu Panda', Year: 2008 };
            movies[7] = { Image: 'knockout.png', Title: 'Knockout', Year: 2011 };
            movies[8] = { Image: 'theplane.png', Title: 'The Plane', Year: 2010 };
            movies[9] = { Image: 'bigdaddy.png', Title: 'Big Daddy', Year: 1999 };

            var imagerenderer = function (row, datafield, value) {
                return '<img style="margin-left: 5px;" height="60" width="50" src="../../images/' + value + '"/>';
            }

            var source = { localdata: movies, datatype: "array" };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // Create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                width: 400,
                source: dataAdapter,
                autorowheight: true,
                pageable: true,
                pagesize: 5,
                columns: [
                  { text: 'Image', datafield: 'Image', width: 60, cellsrenderer: imagerenderer },
                  { text: 'Title', datafield: 'Title', width: 200 },
                  { text: 'Year', datafield: 'Year' }
               ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Would you be able to modify it somehow so that the issue can be reproduced with it?

Best Regards,
Dimitar

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

[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]

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

[Peter StoevKeymaster]

Hi davistom,

Let me try to bring some info how jqxGrid works. jqxGrid does not automatically modify the height of its rows. They are with fixed height and that fixed height depends on the rowsheight property value. There is property which if enabled tries to automatically resize the Grid rows in the very specific case when the cell content is Text i.e the default case. Ex: http://jsfiddle.net/jqwidgets/QheNZ/. “autorowheight” would not work in case of dynamic content such as images because images are loaded usually with some latency and the size of the images is determined after they are loaded, but by that time the Grid is already rendered. Our suggestion for your scenario is to use the “rowsheight” property.

Best Regards,
Peter Stoev

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

[davistomParticipant]

Thanks for the explanation.

[kukabukaParticipant]

Thanks for the info, Peter. It’s not just images though. Using a cellsrenderer that returns enough text to make it wrap will break the autorowheight also.

I’m going to try looping through my data, and modifying it before passing it to the grid instead of using the cellsrenderer. Pity, because the cellsrenderer seemed a more elegant solution.

[Peter StoevKeymaster]

Hi kukabuka,

Ok, Thank you for your comment.

Best Regards,
Peter Stoev

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

[Author]

Posts