Free – JQGrid PHP Control

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

php-ajax-datagrid-jqgrid

Download Latest Release

with usage example

For Live Support, Add in Gtalk

gridphp@gmail.com

For Community Support

Visit Support Forum

Generate JQGrid based PHP Ajax Datagrid with just configuration (No complex Javascript). Enabling Add, Edit, Del, Search, Sort, Page, Themes etc. Fed up by repetitive operations every time? Significantly reduce time and cost by using this jqgrid php component. Ideal for prototyping Admin interfaces and quick setup tables. PHP Datagrid Control is customizable using parameters & custom events. Supports major databases including Mysql, PGsql, SQL Server, Oracle … etc.

UPDATE (17th July 2016): Tons of New Features Updated …

Custom Forms: Sometime we need custom Add or Edit forms for data entry purpose. With this feature it’s now doable to connect your HTML Forms with PHP Grid and it will use PHP Grid API for add/edit operations.

Multiple Files Uploading: Now PHP Grid support multiple file upload option. You can multi-select the files as in screenshot and upload to server.

Firebird & SQLite Database Editor Support: These fast, slick and reliable databases will help in running portable apps with PHP Grid.

Search with Multiple Group Conditions: We’ve added most robust and efficient complex searching method in PHPGrid.

Grid with Vertical Header Text: When we have many columns in a grid with less amount of data in cells, there is a requirement to have vertical text in column headers to improve overall visibility.

Exporting selected Columns & Rows (at Runtime): Now you can export selected rows and columns at runtime. This means no code change, Export selection options are now on accessible with grid operations toolbar.

Multiselect Filter in PHPGrid: Filter columns having a dropdown with checkboxes to select multiple items. It also support textbox to quickly search your desired item within filter options. This is similar to excel like auto filtering.

Integrating Select2 with PHPGrid: Now you can use ‘Select2‘ control with PHP Grid’s Add or Update operations. Select2 is a jQuery based replacement for select boxes.

New Additions to Form Layout Design: You can have 2, 4, 6 column layout in your Add or Edit dialog forms of PHP Grid.

Multiple Subgrids at Same level: Added a new feature, that allow you to have multiple subgrids at same level.

UPDATE (26th Mar, 2015):

A lot of exciting new features are added in this product. The magic is it’s all transparent using PHP Class. You can need to switch on/off the feature with no backend complex jqgrid/php coding.

Search with Multiple Group Conditions

This enables the more advanced search dialog allowing to add any number of complex group conditions. The user can now add or delete an unlimited number of conditions to perform the search as shown in screenshot.

search-group

Visit www.phpgrid.org/updates and subscribe to RSS / G+ or Twitter feed.

UPDATE (19th Nov, 2014):
We have rolled out several features that we wish our visitors to be aware of.

1) Multiselect Filter:
Added a new filter option, that let you filter columns having a dropdown with checkboxes to select multiple items. It also support textbox to quickly search your desired item within filter options. This is similar to excel like auto filtering.
Live Demo: http://www.phpgrid.org/demo/demos/integrations/multiselect-filter.php

2) Select2 Integration:
Now you can use ‘Select2‘ control with PHP Grid’s Add or Update operations. Select2 is a jQuery based replacement for select boxes. It supports searching, with in your large select box data items. It gives behavior similar to ‘Combo-box’ control of Microsoft development tools.

3) New Additions to Form Layout Design:
We have made several additions in our customized dialog layout feature.
1) You can have 2, 4, 6 column layout in your Add or Edit dialog forms of PHP Grid.
2) You can also Add sections (sub-titles) within form to separate input data group.
3) A field can span to several columns where required. (e.g. Id)
4) Custom form buttons are also supported. (e.g. Load Default)

Visit official  website for more www.phpgrid.org/ -> Updates

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

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

Advertisements

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.

jqgrid demos 1249352783153

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> 




== 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

[Image]

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

Posted in Javascript. Tags: , . 1 Comment »