Free – JQgrid PHP Grid Control

Download :: Screenshots :: Changelog :: Support :: Comments

Download Latest Release

with usage example

For Live Support, Add in Gtalk

gridphp@gmail.com

For Community Support

Visit Support Forum

Generate fully functional PHP Datagrid in just 7 lines code. Enabling Add, Edit, Del, Search, Sort, Page, Themes etc. PHP Ajax Datagrid Control is based on JQGrid. Why do repetitive operations every time? Significantly reduce time and cost by using this jqgrid php component. Ideal for prototyping Admin interfaces. PHP Datagrid Control is very customizable using various parameters & custom events. Supports all major databases including Mysql, PGsql, SQL Server, Oracle … etc.

UPDATE (2nd May, 2013): New Feature Updates
New features include Autocomplete option for fast data lookup, Column based formatting, Clone Records, Twitter Bootstrap Integration, Grouping Headers and File Upload Option. Visit official  website for more www.phpgrid.org.

UPDATE (4th Feb, 2013): Released version v1.4.8 (for premium customers)
New featured examples include HTML / WYSIWYG editor integration, FancyBox integration, Loading Grid from phpArray, Conditional formatting, Conditional Data display, Controlling multiple detail grids from master, Server side validation, Custom client side validation, MySQLi support added. Visit official  website for more www.phpgrid.org.

Italia: Genera pienamente funzionale griglia PHP in soli 7 linee di codice. Aggiungi abilitanti, Modifica, Del, Ricerca, Ordina, Page, temi ecc PHP Ajax DataGrid di controllo si basa sulla jqGrid.

This piece of code will result in fully functional JQuery Ajax-ified PHP Datagrid with:

• Adding record
• Editing record
• Delete record
• Auto-filter Search
• Sorting the Data
• Pagination (customizable)
• Grouping Display By Column (with aggregate summary)
• Date-picker Integration
• Custom Display Formatter (dropdown/checkbox/image/password/link etc)
• Multilingual Support (Italian, French, German, Arabic, Chinese etc)
• RTL Support and UTF8 Support
• Customizable Themes (using ThemeRoller)
• No time limit in Free version
• — Premium Features —
• Integration with all Major Databases (mysql,pgsql,mssql … and odbc support)
• Master-Detail Subgrid (multi-level hierarchy) *
• Custom Events for own Add/Update/Delete implementations *
• Inline Row Addition
• Export to Excel *
• Export to PDF (with Custom PDF formats) *
• Source Code (neat clean with comments) *
• Technical Support in Integration *
• Free Upgrades (on request)*
• Advance Search *
• Excel like Navigation *
• Unlimited Developers Usage License
• Unlimited Production Website License
• Unlimited Themes Support (Theme roller)

Here is the PHP Code …

include("jqgrid.php");

$g = new jqgrid();
$grid["caption"] = "My Sample Grid"; // set grid customizable params
$g->set_options($grid);
$g->table = "tags"; // db table for CRUD operations.

// You can also specify SQL query for displaying data (download code with examples)
// $g->select_command = "select f1,f2,f3 from tags";

$out = $g->render("my_grid_1"); // render grid

... and in HTML after including JS files ...

<div><?php echo $out?></div>

Need Customization or Full Source Code?

- Full source code is flexible and new custom features can be added easily

- Full source code can be given after payment of $50 of appreciation

- Technical Support for component integration (on need basis)

- Free Upgrades & Bug fixes (on request)

- If interested Contact Me

Free version has no time limitation, but source code is encrypted and some marked (*) features are not allowed.

Download Latest Release

with usage example

UPDATE (15th Jan, 2013): New featured examples include Custom toolbar button, Export to CSV, Date Time picker control, Open grid in edit mode by default, Added more themes (24 total), Add Data Grouping example + updated documentation. Visit official  website for more www.phpgrid.org.

UPDATE (11th Nov, 2012): New featured examples include Multiple grids, Master-detail non hierarchical grid, Custom validation, Bar graph with updated documentation. Visit official  website for more www.phpgrid.org.

UPDATE (31st July, 2012): New featured examples include Postgresql integration samples, Conditional Display of Buttons / Data in Rows. Product now got a new home www.phpgrid.org with a new version 1.4.6. Refer this site for all future updates.

Technical support in paid package for Intergation with CakePHP, CodeIgnitor, Zend Framework & WordPress. CakePHP & Jqgrid integration is now easier than never before using our PHP Grid library. No need to go in complex JQgrid Javascripts. Just utilize this component and release quickly.

Roadmap:

- Bulk Updates

- Custom JS validation

- Excel view like google-docs (auto refresh, row/cell lock)

UPDATE: Version 1.4.5 is available  (February 12, 2012) – for paid members

- support for all major databases (mysql,pgsql,mssql,sybase … and odbc support) (db-layer.php)

- inline row addition (excel_view.php)

- pdf export custom template sample (export-pdf.php)

- export to pdf/excel in same grid

- fix for non integer primary key

- fix for mysql keyword based column name

- Fix for non-integer PK column

- multiselect fix in lib jqgrid 4.3.1

UPDATE: 21st December, 2011

Version 1.4 is available

Features:

- Datepicker integration

- Group by field

- Runtime change “group by” field

- Password mask formatter / edittype

- Excel export support for numeric columns

UPDATE: 21st July, 2011

Version 1.3 is available

Features:

- PDF export feature (export-pdf.php)

- Multiple fonts in pdf export

- External link with grid data (external-link.php)

- Export filtered/all data option

- Export specific columns (export-pdf.php, $col["export"] = false;)

Fixes:

- persist where filter in export option

- Jquery fix for IE

- utf8 encoding fix

- json fix for php 5.1

- slashes fix

UPDATE: 31st December, 2010

1. Version 1.2 is available

- Several bug fixes (with thanks to all reporters)

- Support for Subqueries

- Must review README.txt when migration from previous implementations

- Get latest version from above link

2. Image Formatter

Introduced image formatter to display image in grid, if URL is fetched from DB.

$col["formatter"] = “image”; // format as image — if data is image url e.g. http://<domain>/test.jpg

$col["formatoptions"] = array(“width”=>’20′,”height”=>’30′); // image width / height etc

3. Excel like Navigation

- Navigate through arrow keys

- Enter to Edit / Save

- Include Intrinsic Operations

—-

UPDATE: 2nd November, 2010

Several fixes and incorporated in latest version. Please get your latest copy.

* Support for formatters e.g.

$col["formatter"] = “date”; // format as date

$col["formatoptions"] = array(“srcformat”=>’Y-m-d’,”newformat”=>’d/m/Y’); // format as date

* Cell editing navigation support, like excel

* Table alias fields are fixed

* Enabled support for GROUP BY custom query

* Export excel fix for ? based url

—-

UPDATE: 5th October, 2010

Following features are now incorporated in free version …

1. Sub-Grid/ Master Detail support

And it is available with all main operations … like search/add/edit/delete/sort/paging etc. You can have multi-level subgrids.

JQGrid Subgrid & Master Detail Example

2. Custom Events Support

Now you can write you own custom implementations on UPDATE / INSERT / DELETE.

E.g. code …

// params are array(<function-name>,<class-object> or <null-if-global-func>,<continue-default-operation>)

$e["on_insert"] = array(“add_client”, null, false);

$e["on_update"] = array(“update_client”, null, true);

$e["on_delete"] = array(“delete_client”, null, true);

$grid->set_events($e);

—-

Technical FAQs / issues available here

• Custom Display Formatter (dropdown/checkbox/image/password etc)
• RTL Support and UTF8 Support

Genera pienamente funzionale griglia PHP in soli 7 linee di codice. Aggiungi abilitanti, Modifica, Del, Ricerca, Ordina, Page, temi ecc PHP Ajax DataGrid di controllo si basa sulla jqGrid.

UPDATE (6th June, 2012): Product now got a new home ‘www.phpgrid.org‘ with a new version 1.4.6. Refer this site for all future updates.

JS Decompress (Dean Edwards) / JS code indent or formatting

Today, i was searching some JS library indentation / formatting tool to decompress obfuscated js file … and went through this nice online tool. Here are the details …

http://jsbeautifier.org/

This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

The source code for the latest version is always available on github, and you can download the beautifier for local use (zip, tar.gz) as well.

Javascript Grid and Spreadsheet Controls

Update: A much better research is available here.

After little research, i found several JS grid controls to create google docs like Speadsheet UI. For backend functionality one can copy the implementation used in tikiwiki codebase which is opensource. Another backend approach could be to use many columns spatial database table structure (as used in MS Sharepoint lists)

- http://www.sigmawidgets.com/products/sigma_grid2/
- http://dhtmlx.com/docs/products/dhtmlxGrid/features.shtml
- http://www.extjs.com/deploy/dev/examples/ (GPL)
- http://developer.yahoo.com/yui/datatable/
- http://www.trirand.net/demophp.aspx or http://trirand.com/blog/jqgrid/jqgrid.html
- http://www.grridjs.org/
- http://www.activewidgets.com/grid/
- http://plugins.jquery.com/project/flexigrid or http://code.google.com/p/flexigrid/

Still In dev, I guess …

- http://www.reconstrukt.com/ingrid/
- http://wiki.github.com/mleibman/SlickGrid/http://roberto.open-lab.com/2010/01/18/javascript-grid-editor-i-want-to-be-excel/

jqGrid 3.5 Auto-filter option

Updated 1st Aug, 2010: A JqGrid PHP Component is also available (free of cost), Generate fully functional Grid in record time.

For excel like Autofilter option using javascript … i found 2 solutions …

1. Tabular data in table form is common on web sites and web applications, and a common requirement is to manipulate the data tables on the client side, rather than going back to the server to sort, filter, page, etc. This library offers the key functionality that is typical – the most common of which is client-side table sorting.

Some of the key features of this library are:

• Sorting is fast. Much faster than most other libraries, due to a number of optimizations
• Rowspan and Colspan in headers will not confuse the code
• Alternate row coloring (a common item) is handled by re-shading after sorting or filtering
• Tbody contents are handled separately, so there can be separate sortable sections of a table
• Easy CSS classes are applied to cells after filtering, sorting, etc which you can hook into from your CSS rules to show the sorted column or the cells which are filtered.

http://www.javascripttoolbox.com/lib/table/

2. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

New thing for me was auto filter feature.

http://trirand.com/jqgrid/jqgrid.html

Here is the sample code …

== HTML ==

<table id="s2list"></table>
<div id="s2pager"></div>
<div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
<script src="search2.js" type="text/javascript"> </script> 

Search Invoices


== JS CODE ==

   	var mygrid = jQuery("#s3list").jqGrid({
   	url:'search.php?q=1',
	datatype: "json",
	width: 700,
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:65},
   		{name:'invdate',index:'invdate', width:90,searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});} }},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right", stype:'select', editoptions:{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}},
   		{name:'total',index:'total', width:80,align:"right"},
   		{name:'note',index:'note', width:150, sortable:false}
   	],
   	rowNum:10,
   	mtype: "POST",
   	rowList:[10,20,30],
   	pager: '#s3pager',
   	sortname: 'id',
    viewrecords: true,
	rownumbers: true,
    sortorder: "desc",
	gridview : true,
    caption:"Toolbar Search Example"
});
jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false});
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
	onClickButton:function(){
		mygrid[0].toggleToolbar()
	}
});
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
	onClickButton:function(){
		mygrid[0].clearToolbar()
	}
});
jQuery("#s3list").jqGrid('filterToolbar');

jQuery – Horizontal Accordion

Currrent functionality:

• No dependencies
• Optional use of easing plugin
• Close and open content one after the other
• Close and open at the same time
• Choose trigger (mouseover, click …)
• Easily control through external calls
• Open content on load
• Open content through hash tags in the url (#tab1, #tab2…)
• Position of handle (left, right)
• Mixed handle positions – 2 left , 2 right …
• Cycle through content by interval
• Events when animations starts and ends
• Hide content until all has been assembled

http://www.portalzine.de/index?/Horizontal_Accordion

Text-overflow: ellipsis for Firefox via jQuery

There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.

Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.

Lorem ipsum dolor sit amet, c…

I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox.

You can download the plugin here.

To use, just call ellipsis() on a jQuery object. For example:

$("span").ellipsis();

Source: http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Prototype MultiSelect Control

Demo

Click here for demo

Download

Click here to download

Eval Script Tags in Ajax Response

I found this code after many research, and back

function parse_script(str)
{
var scripts = (str.match(/]*)>([sS]*?)</script>/g));
if (scripts && scripts.length)
{
for(var i=0;i
{
var arr = scripts[i].match(/]*)>([sS]*?)</script>/im);
var s;
if (YAHOO.env.ua.ie > 0)
{
s = document.createElement('SCRIPT');
s.text = arr[2];
}
else
{
s = document.createElement('script');
s.appendChild( document.createTextNode( arr[2] ));
}

document.getElementsByTagName(“head”)[0].appendChild(s);
}
}
}

Cross Browser Client-Side Persistent Storage Without Cookies

PersistJS, a client-side JavaScript persistent storage library. Features include:

• Small (9.3k minified, 3k gzipped)
• Standalone: Does not need any additional browser plugins or JavaScript libraries to work on the vast majority of current browsers.
• Consistent: Provides a consistent, opaque API, regardless of the browser.
• Extensible: Custom backends can be added easily.
• Backwards Compatible: Can fall back to flash or cookies if no client-side storage solution for the given browser is available.
• Forwards Compatible: Supports the upcoming versions of Internet Explorer, Firefox, and Safari (Opera too, if you have Flash).
• Unobtrusive: Capability testing rather than browser detection, so newer standards-compliant browsers will automatically be supported.

WHY

Why use PersistJS? What’s the problem with using cookies directly or simply requiring Flash?

Currently the only reliable cross-platform and cross-browser mechanism for storing data on the client side are cookies. Unfortunately, using cookies to store persistent data has several problems:

• Size: Cookies are limited to about 4 kilobytes in size.
• Bandwidth: Cookies are sent along with every HTTP transaction.
• Complexity: Cookies are difficult to manipulate correctly.

Modern web browsers have addressed these issues by adding non-Cookie mechanisms for saving client-side persistent data. Each of these solutions are simpler to use than cookies, can store far more data, and are not transmitted along with HTTP requests. Unfortunately, each browser has addressed the problem in a different and incompatible way. There are currently 4 different client side persistent data solutions:

• globalStorage: Firefox 2.0+, Internet Explorer 8
• localStorage: development WebKit
• openDatabase: Safari 3.1+
• userdata behavior: Internet Explorer 5.5+

Some developers have attempted to address the client side storage issue with the following browser plugins:

• Adobe Flash
• Google Gears

The problem with relying on plugins, of course, is that users without the plugin installed miss out on the feature in question, and your application is dependent on software from a particular vendor. Google Gears, for example, is not widely deployed. Flash is, but it has problems of its own:

• Many users block Flash or require a click in order to enable flash content; this makes Flash unsuitable as a transparent, client-side data store.
• Flash is notoriously unreliable on newer 64-bit machines.
• Some businesses block Flash content as a security measure.

6 Keys to Understanding Modern CSS-based Layouts

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

These are the six things that will help people get over the hump.

Box Model

• W3C CSS2.1 Spec
• The Box Model
• Tantek’s Box model hack
• Quirks mode and strict mode
• Activating the Right Layout Mode Using the Doctype Declaration
  

Floated Columns

• Floatorial
• Clearing floats
• Faux Columns
• Creating Liquid Faux Columns

Sizing Using Ems

• How to size text using ems
• Elastic Design
• Fixed or fluid width? Elastic!

Image Replacement

• Revised Image Replacement
  Sums up most, if not all, of the image replacement techniques currently in use
• sIFR 2 with documentation and sIFR 3 is in developmen

Floated Navigation

• Listamatic
• Sliding Doors

Sprites

• Fast Rollovers without Preload
• CSS Sprites: Image Slicing’s Kiss of Death
• Reducing HTTP Requests

http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/