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

Answer 1

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 <

Answer 2

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/

Answer 3

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