Adding image in the column of jqgrid

Question

I want to display a small image in the first column of jqgrid for all data I get from DB.

jquery("#tableName").jqgrid({
.....
colNames : ['', ''],
colModel : [{
    width : '25%',
    },{
    name : 'someValue',
    index : 'somevalue',
    widht : '75%',
    sorttype: 'text'
}]
});

I want to add an image in the first colmodel. i tried formatter, but not sure about cellvalue, row object, options. Any help would be appreciated.

I did something like this for image

function imageFormat( cellvalue, options, rowObject ){
        return '<img src="'+cellvalue+'" />';
    }

Where should i give the image src ? how to mention the imageformat in the colmodel ?

Thanks

Impulsion

Do you need add different images in different rows? Where you hold URL to the image? What you mean under "imageformat"? – Synapsis

I don't need different images. I just need a single image to be displayed in all the rows. I got this function from one of the pages. so just tried it out. – Impulsion

Answer 1

If you need to set image in for example the first column of the grid you can define the grid

$("#tableName").jqGrid({
    .....
    colNames: ['', ''],
    colModel: [
        {
            name: 'someUniqueColumnName',
            width: 25,
            fixed: true,
            formatter: function () {
                return "<img src='http://myserver/path/i.jpg' alt='my image' />";
            }
        },
        {
            name: 'someValue',
            width: 123 // width of column in pixel
        }
    ],
    ...
});

The formatter need just return a string which is HTML fragment which need be placed in the column. Because all parameters in JavaScript are optional and we need no then we can define formatter as function without parameters. The property width is the size of column in pixel. If you use other jqGrid options like autowidth: true or specify the whole width of the grid with respect of width option (and if you don't use shrinkToFit: false option) then jqGrid will scale the column width based on the value of width property of the column in colModel. To have no scaling of the column with the image I included fixed: true property additionally.

Some common remark: you should be careful with case of names in JavaScript. For example the first line of code which you posted (jquery("#tableName").jqgrid({) should be replaced with jQuery("#tableName").jqGrid({.

Synapsis

@Oleg, How do i image bind dynamic content for eg: collection of image in to the folder – Substage

@Sajith: custom formatter have assess to the full information for the row of data by the 3-d parameter (rowObject). It allows to extend the information returned from the server for every row with additional dynamic information, for example, URL of the image, tooltip (the value of title attribute) and so on. – Synapsis

Answer 2

You can move the image through xml or json in your url parameter like this:

$image = "<a href='#'><img src='folders/images/arrow.jpg' border='0' valign='middle' title='Edit something'><a>";



echo "<?xml version='1.0' encoding='iso-8859-1'?$et\n"; 
echo "<rows>"; echo "<page>".$page."</page>"; 
echo "<total>".$total_pages."</total>"; 
echo "<records>".$count."</records>"; // be sure to put text data in CDATA 

    echo "<row id='". $id."'>"; 
    echo "<cell>". $image."</cell>"; 
    echo "</row>"; 
    } 
 echo "</rows>"; 

note that < is <

Supergalaxy

Answer 3

Look this example :)

$("#jsgrid").jsGrid({
autoload: true,
width: 350,
filtering: true,
inserting: true,
controller: {
    loadData: function(filter) {
        return !filter.Name 
            ? data
            : $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });

        // use ajax request to load data from the server
        /*
        return $.ajax({
            method: "GET",
            url: "/YourUrlToAddItemFilteringScript",
            data: filter
        });
        */
    },
    insertItem: function(insertingItem) {
        var formData = new FormData();
        formData.append("Name", insertingItem.Name);
        formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);

        return $.ajax({
            method: "post",
            type: "POST",
            url: "/YourUrlToAddItemAndSaveImage",
            data: formData,
            contentType: false,
            processData: false
        });
    }        
},
fields: [
    {
        name: "Img",
        itemTemplate: function(val, item) {
            return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
                $("#imagePreview").attr("src", item.Img);
                $("#dialog").dialog("open");
            });
        },
        insertTemplate: function() {
            var insertControl = this.insertControl = $("<input>").prop("type", "file");
            return insertControl;
        },
        insertValue: function() {
            return this.insertControl[0].files[0]; 
        },
        align: "center",
        width: 120
    },
    { type: "text", name: "Name" },
    { type: "control", editButton: false }
]});

You can see the complete example here: http://jsfiddle.net/tabalinas/ccy9u7pa/16/

Mornings