image in grid won't show

Questionsimage in grid won't show
BiLe asked 1 year ago


I am trying to show an image, but frontend only returns:

<img src=”undefined”>

The “intro-image” fields value would be for example ‘images/videos/video-id-9.jpg’.

Did I miss something?

In addition: is it possible to use crop/scale with image upload? I will need some images in a specific size.

$col = array();
$col[“title”] = “intro_image”; // caption of column
$col[“name”] = “intro_image”; // grid column name, must be exactly same as returned column-name from sql (tablefield or field-alias)
$col[“width”] = “50”;
$col[“align”] = “left”;
$col[“search”] = false;
$col[“sortable”] = false;
$col[“editable”] = true;
$col[“edittype”] = “image”; // render as textarea on edit
$col[“upload_dir”] = “images/temp”; // upload here
//$col[“editoptions”] = array(“rows”=>2, “cols”=>20); // with these attributes
//$col[“editoptions”] = array(“size”=>20); // with default display of textbox with size 20
//$col[“editrules”] = array(“required”=>true); // required:true(false), number:true(false), minValue:val, maxValue:val
$col[“formatter”] = “function(cellval,options,rowdata){ return ‘<img src=\”‘+cellval+’\” />’; }”;
$col[“formatoptions”] = array(“width”=>’160′,”height”=>’90’);
//$col[“hidden”] = true; // don’t show this column in list, but in edit/add mode
//$col[“editrules”] = array(“edithidden”=>true); // don’t show this column in list, but in edit/add mode
//$col[“export”] = true;
//$col[“template”] = “<img height=20 src=’’>&#8221;; // make this a custom column with no relation to database
$cols[] = $col;


5 Answers
BiLe answered 1 year ago

Tried this, where {intro_image} is supposed to be the value in database:

$col[“default”] = “<img width=160 height=90 src=’{intro_image}’ >”;

Will not work either.

Should I use the formatter or default? Difference?

Abu Ghufran Staff answered 1 year ago


To use image in datagrid, You need 2 fields.

Referring this demo code:

One for file add/edit purpose which is not shown in listing (line 96-108)

And other one for displaying purpose which is actually shown on listing (line 110-147)

In the later column, You can have this code with placeholder in default property {intro_image}.

Abu Ghufran - Dev Team
Grid 4 PHP Framework
Abu Ghufran Staff replied 1 year ago

PS: I’m adding the crop feature in todos.

BiLe answered 1 year ago


thank you for adding the crop feature.

I have looked at the example and tried to replicate, but there still has to be something wrong with my code.

As said, I have a database column “intro_image” with value e.g. “images/videos/myvideo.jpg”. I would like to display the image inside the grid and on click link to another page.

Right now I am getting “None” as output 🙂

// intro_image
$col = array();
$col[“title”] = “intro_image”; // caption of column
$col[“name”] = “intro_image”; // database field name
$col[“show”] = array(“list”=>false,”edit”=>true,”add”=>true); // show in list, edit, add
$col[“resizable”] = true;
$col[“width”] = “50”;
$col[“align”] = “left”;
$col[“search”] = false;
$col[“sortable”] = false;
$col[“editable”] = true;
$col[“edittype”] = “file”;
$col[“upload_dir”] = “images/temp”;
$col[“editrules”][“allowedext”] = “png,jpeg,jpg”; // comma separated list of extensions
$col[“editrules”][“allowedsize”] = 5 * 640 * 360; // allowed size in bytes e.g. 3 MB = 3 x 1024 x 1024
$cols[] = $col;

// virtual column
$col = array();
$col[“title”] = “image”;
$col[“name”] = “image”;
$col[“width”] = “360”;
$col[“editable”] = true;
$col[“on_data_display”] = array(“display_image”,””);
function display_image($data) {
$upload_url = explode(“/”,$_SERVER[“REQUEST_URI”]);
$upload_url = implode(“/”,$upload_url).”/”;
$file = $data[“intro_image”];
$arr = explode(“.”,$file);
$ext = $arr[count($arr)-1];

if (empty($file))
return “None”;
else if (strtolower($ext) == “doc” || strtolower($ext) == “xls” || strtolower($ext) == “docx” || strtolower($ext) == “xlsx” || strtolower($ext) == “pdf”)
return “<a href=’$upload_url/$file’ target=’_blank’>Download File</a>”;
else if (strtolower($ext) == “png” || strtolower($ext) == “jpg” || strtolower($ext) == “jpeg”)
return “<a href=’$upload_url/$file’ target=’_blank’><img height=50 src=’$upload_url/$file’></a>”;
return $file;

$col[“show”] = array(“list”=>true,”edit”=>false,”add”=>false,”view”=>true);
$col[“editoptions”][“dataInit”] = “function(o){jQuery(o).parent().html(o.value);}”;
$cols[] = $col;

BiLe answered 1 year ago

I think I found one mistake I made. I need to select all columns I want to show:

$g->select_command = “SELECT
app_id = 6

Abu Ghufran Staff answered 1 year ago

Thanks correct. If you provide sql query, only selected fields will be there in dataset.

I’ve sent you latest build as well.

Abu Ghufran - Dev Team
Grid 4 PHP Framework
Your Answer

8 + 7 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.

How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?