PHP Jqgrid Component Aditions (Upload, select, show/hide)

We need to extend the functionality of the Jqgrid PHP Component (The component, not the plugin): [url removed, login to view]

We need to add the next three things:

1. A modular way to be able to upload a file in a row by putting the option 'file' or 'image' in the parameter edittype. The info of the file name should be saved in MySQL. You can use the recommended plugin Ajax File Upload plugin for uploading the file or another AJAX / Jquery plugin.

See the help of the component - Editing options for more informations of the structure: [url removed, login to view]

Here is an example of a no-modular Image Upload: [url removed, login to view]

In the case of the edittype= image, the component should only allow to upload images and create the thumbnail of the image automatically.

Aditionally, we must be able to put a restriction to the size of the upload file, by adding a property in the editoptions, for example maxfilesize

Finally, when the edittype is an image, In the editoptions property add a parameter of zoom= true or false, if I put 'true' in the zoom property, when a click the image I should see a lightbox with the zoom of the image, something like this [url removed, login to view] and the thumbnail size of the image by putting the pixels or the percentage.

In conclusion, When I put something like this in the php code:

$grid->setColProperty('image',array("editable"=>true, "edittype"=>"image", "editoptions"=>array("zoom"=>"true","maxfilesize"=>"3000Kb", thumbwidth=>"150",thumbheight=>"10%"));

It should put an add and edit form, where I can upload an image smaller than 3000Kb, After I upload the image I should be able to see the thumb-nail of the image in the cell of the grid (the thumbnail should be of 150 px of width and 10% of the original height), and If I click the image I should see a zoom of the image with a lightbox. In the other files the result is a link to this one.

2. A modular way to be able to add chained selects in the add and edit dialogs:

An example of chained selects here: [url removed, login to view]

An example of a no-modular chained selects in jqdatagrid here: [url removed, login to view]

The idea will be to create a function that allow us to establish the chained relationships beteween the fileds.

An example of the result of this programming could be the next one:

$grid->setSelect("Country","SELECT DISTINCT Country, Country FROM customers ORDER BY Country", true, true, false);

$grid->setSelect("City", "SELECT DISTINCT(City) id, City value FROM customers", true, true, false, "chained"=>"Country")

The second select wiil be fill with the info of the sql query SELECT DISTINCT(City) id, City value FROM customers WHERE Country = the selected country

Should be possible to add multiple dependency, for example that city depend of the select value in continent and country - WHERE Country = xxx AND Continent = yyy

3. A modular way to be able to show/hide form fields dependending of previous select value:

An example of Show/hide fields here: [url removed, login to view]

An example of the result of this programming could be the next one:

$grid->setSelect("Home","SELECT DISTINCT Home, Home FROM customers ORDER BY Home", true, true, false);


The field Phone will be visible only if the user select the second option in the home select, the user choose the second option.

The deliverables of this project are the new code commented, a document showing where the original code was changed and a example of a single web page where is used the three new additions (upload an image, chained selects and show/hide fields) with the existing features of the component: search, paginate, add, edit, delete, export to excel and pdf, datepicker and autocomplete :

Skills: jQuery / Prototype, MySQL, PHP

See more: jqgrid upload image, jqgrid file upload example, jqgrid file upload, jqgrid upload, php jqgrid component, jqgrid upload file, upload image jqgrid, jqgrid image upload, image upload jqgrid, upload file jqgrid, jqgrid edittype file, jqgrid select, jqgrid php, jqgrid file upload ajax file upload plugin, jqgrid php component, jqgrid upload files, jqgrid file upload php, jqgrid demo image upload, jqgrid demo add select, jqgrid ajax upload, phpjqgrid, jqgrid example show hide, php jqgrid, upload file jqgrid php, jqgrid php examples pdf

About the Employer:
( 8 reviews ) Medellín, Colombia

Project ID: #1243919

Awarded to:


We have a huge expereince in developing the jquery and jqgrid based projects. Please check you PM.

$400 USD in 15 days
(4 Reviews)

2 freelancers are bidding on average $400 for this job


Lets do it now........thanks

$400 USD in 20 days
(109 Reviews)