• JQuery
• 259
• August-01-2022
• by Junaid A

How to add Image in jqGrid

How to add Image in jqGrid

how to add dynamic button in jqGrid

 formatter: function (cellValue, options, rowObject) {

                        var markup = "<a title=\"%ToolTip%\" href=%Href%;>%Text%</a>";
                        if (rowObject.ImageURL)
                        {
                            var replacements = {
                                "%Text%":"تصویر دیکھیے",
                                "%ToolTip%": "", "%Href%": "javascript:FinalSelection.openAddEditModal(&apos;" + rowObject.person_id + "&apos;)"
                            };
                        }
                        else
                        {
                            var replacements = {
                                "%Text%":"", // if no image hide button
                                "%ToolTip%": "", "%Href%": "javascript:FinalSelection.openAddEditModal(&apos;" + rowObject.person_id + "&apos;)"
                            };

                        }
                      
                        

                        
                        markup = markup.replace(/%\w+%/g, function (all) {
                            return replacements[all];
                        });
                        return markup;
                    }
                }     

 function RightsHolderPhoto(cellvalue, options, rowObject) // Generate img control and set its path
    {
       
       var html = "<img   height='70' width='100' src='"+cellvalue+"'/>";
      
    }

add column in grid as below

 colModel: [
                { name: "ImageURL", formatter: RightsHolderPhoto, width: 20 }

row select and cell select

 onCellSelect: function (rowid,
                iCol,
                cellcontent,
                e) {
             
              

             //   var rowData = $(this).jqGrid("getRowData", rowid);
               //// alert(rowData);
              //  alert(rowData.Image);
              
            },
            onSelectRow: function (rowid) {

                var rowData = $(this).jqGrid("getRowData", rowid);
                alert(rowData);
                var colData = rowData["person_id"];
                alert(colData);
              
            },