Deprecated: iconv_set_encoding(): Use of iconv.internal_encoding is deprecated in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/string/string.php on line 28

Deprecated: iconv_set_encoding(): Use of iconv.input_encoding is deprecated in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/string/string.php on line 29

Deprecated: iconv_set_encoding(): Use of iconv.output_encoding is deprecated in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/string/string.php on line 30

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
jqGrid & fancyBox Integration

Most Popular  


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
   

Deprecated: Non-static method PhocaGalleryPath::getPath() should not be called statically, assuming $this from incompatible context in /home/datamerx/public_html2/codemerx/jqgrid/plugins/content/phocagallery/phocagallery.php on line 57

Deprecated: Non-static method PhocaGalleryPath::getInstance() should not be called statically, assuming $this from incompatible context in /home/datamerx/public_html2/codemerx/jqgrid/administrator/components/com_phocagallery/libraries/phocagallery/path/path.php on line 36

Deprecated: Non-static method PhocaGalleryLibrary::getLibrary() should not be called statically, assuming $this from incompatible context in /home/datamerx/public_html2/codemerx/jqgrid/plugins/content/phocagallery/phocagallery.php on line 64

Deprecated: Non-static method PhocaGalleryLibrary::getInstance() should not be called statically, assuming $this from incompatible context in /home/datamerx/public_html2/codemerx/jqgrid/administrator/components/com_phocagallery/libraries/phocagallery/library/library.php on line 44

Deprecated: Non-static method PhocaGalleryPath::getPath() should not be called statically, assuming $this from incompatible context in /home/datamerx/public_html2/codemerx/jqgrid/plugins/content/phocagalleryslideshow/phocagalleryslideshow.php on line 40

Deprecated: Non-static method PhocaGalleryPath::getInstance() should not be called statically, assuming $this from incompatible context in /home/datamerx/public_html2/codemerx/jqgrid/administrator/components/com_phocagallery/libraries/phocagallery/path/path.php on line 36

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652

jqGrid and fancyBox Integration

  Using fancyBox inside jqGrid is a pretty common scenario. Clicking on the contents of the Shipment column in the grid above will display a fancyBox showing the name of the shipping company.

So, this demo describes all the steps necessary to integrate these two popular jQuery plugins.

 

1. fancyBox links in jqGrid

We have chosen to use a custom formatter to generate the <a> tags fancyBoxs hooks up to. The formatter is placed on the shipment column in the colModel.

{name: 'shipment', index: 'shipment', width: 80, align: 'center', formatter:fancyBoxFormatter} 

And here is how the formatter looks like:

function fancyBoxFormatter ( cellvalue, options, rowObject )
{
	var result, 
		link,
		fancyBoxHTML,
		fancyBoxContent;
		
		link = "<a class=\"fancybox\" href=\"#data" + options.rowId + "\">" + cellvalue + "</a>";
					
		switch (cellvalue)
		{
			case "FE":
				fancyBoxContent = "FedEx";
				break;
			case "TN":
				fancyBoxContent = "TNT";
				break;						
			case "IN":
				fancyBoxContent = "Intime";
				break;	
			case "us":
				fancyBoxContent = "USPS";
				break;							
		}
		
		fancyBoxHTML = "<div style=\"display:none\"><div id=\"data" + options.rowId + "\">" + fancyBoxContent + "</div></div>";
		
	return link + fancyBoxHTML;	
}

The formatter above would generate markup along the lines of:

<a class="fancybox" href="#data1">FE</a>

<div style="display:none">
  <div id="data1">FedEx</div>
</div>

 So, attaching fancyBox to the <a> tag above will result in fancyBox contents being set to "FedEx".

2. Attaching fancyBox to the links generated in jqGrid

That's a really simple thing to do:

gridComplete: function () 
{
	$(".fancybox").fancybox();
}

 That is all it takes. The complete code of the demo follows.

$(document).ready(function () {
	'use strict';
	 var gidData = [
			{id: "1", orderdate: "2013-10-01", customer: "customer",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
			{id: "2", orderdate: "2013-10-02", customer: "customer2",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
			{id: "3", orderdate: "2011-07-30", customer: "customer3",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
			{id: "4", orderdate: "2013-10-04", customer: "customer4",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
			{id: "5", orderdate: "2013-11-31", customer: "customer5",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
			{id: "6", orderdate: "2013-09-06", customer: "customer6",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},
			{id: "7", orderdate: "2011-08-30", customer: "customer7",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},
			{id: "8", orderdate: "2013-10-03", customer: "customer8",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},
			{id: "9", orderdate: "2013-09-01", customer: "customer9",  price: "400.00", vat: "30.00", completed: false, shipment: "TN", total: "430.00"},
			{id: "10", orderdate: "2013-09-08", customer: "customer10", price: "500.00", vat: "30.00", completed: true, shipment: "IN", total: "530.00"},
			{id: "11", orderdate: "2013-09-08", customer: "customer11",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"},
			{id: "12", orderdate: "2013-09-10", customer: "customer12",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"}
		],
		theGrid = $("#theGrid"),
		numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number'};

	theGrid.jqGrid({
		datatype: 'local',
		data: gidData,
		colNames: ['Customer', 'Date',  'Price', 'VAT', 'Total', 'Completed', 'Shipment'],
		colModel: [
			{name: 'customer', index: 'customer', width: 90},
			{name: 'orderdate', index: 'orderdate', width: 100, align: 'center', sorttype: 'date',
				formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
			{name: 'price', index: 'price', width: 55, template: numberTemplate},
			{name: 'vat', index: 'vat', width: 42, template: numberTemplate},
			{name: 'total', index: 'total', width: 50, template: numberTemplate},
			{name: 'completed', index: 'completed', width: 30, align: 'center', formatter: 'checkbox'},
			{name: 'shipment', index: 'shipment', width: 80, align: 'center', formatter:fancyBoxFormatter}                  
		],
		gridview: true,             
		rownumbers: false,
		rowNum: 10,
		rowList: [5, 10, 15],
		pager: '#gridPager',
		sortname: 'orderdate',
		viewrecords: true,
		sortorder: 'desc',
		caption: 'jqGrid and fancyBox integration',
		height: '100%',
		gridComplete: function () 
		{
			$(".fancybox").fancybox();
		}
	});
});

function fancyBoxFormatter ( cellvalue, options, rowObject )
{
	var result, 
		link,
		fancyBoxHTML,
		fancyBoxContent;
		
		link = "<a class=\"fancybox\" href=\"#data" + options.rowId + "\">" + cellvalue + "</a>";
					
		switch (cellvalue)
		{
			case "FE":
				fancyBoxContent = "FedEx";
				break;
			case "TN":
				fancyBoxContent = "TNT";
				break;						
			case "IN":
				fancyBoxContent = "Intime";
				break;	
			case "us":
				fancyBoxContent = "USPS";
				break;							
		}
		
		fancyBoxHTML = "<div style=\"display:none\"><div id=\"data" + options.rowId + "\">" + fancyBoxContent + "</div></div>";
		
	return link + fancyBoxHTML;	
}

 

 


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
Posted: 2 years 3 months ago by raju #608

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
raju's Avatar
need this article

   

Social Login  


 
   

Your Cart  


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
The cart is empty
   

Latest Forum Posts  


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652

    Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
    • emo
    • Education
    • In Codemerx Controls / jqGrid for ASP.NET

    • Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652
      Last post by adamjohnson
    • 14 hours 30 minutes ago

  • Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652

  • Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/datamerx/public_html2/codemerx/jqgrid/libraries/joomla/filter/input.php on line 652