Closed

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

This project was awarded to sonikunal for $400 USD.

Get free quotes for a project like this
Employer working
Awarded to:
Skills Required
Project Budget
$100-$450 USD
Total Bids
2
Project Description

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);
$grid->setColProperty('Phone',"showif"=>(Home,2);

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 :

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online