title: jqgrid image cell custom formatter
body: <p>I have a problem where i need to show the images with some details in each and every cell of a row. 
  To achieve this i used custom formatter for a cell.</p>
  
  <p><img src="https://i.stack.imgur.com/Nz2pm.png" alt="enter image description here"></p>
  
  <p>The cellvalue will give image source. but what to do to get the info <strong>Name</strong> and <strong>phone</strong> in custom formatter method.</p>
  
  <p>Client side code for grid.</p>
  
  <pre><code>var functionsMapping = {
          "abc": function (cellValue, opts, rowObject) {
              var tbl = "&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;a href='/home1/About'&gt;&lt;img src='" + cellValue + "' alt='a' /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
              tbl += "&lt;table&gt;&lt;tr&gt;&lt;td&gt;Name :aaa&lt;/td&gt;&lt;/tr&gt;";
              tbl += "&lt;table&gt;&lt;tr&gt;&lt;td&gt;Phone :8888&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
              return tbl;
          }
      };
  
  
      $(document).ready(function () {
          $.ajax({
              type: "POST",
              async: true,
              url: "/home1/GetGridModel",
  
              success: function (data) {
                  colMM = data.colmodel;
                  ColNN = data.colN;
                  for (i = 0; i &lt; colMM.length; i++) {
                      cm = colMM[i];
                      if (cm.hasOwnProperty("formatter") &amp;&amp; functionsMapping.hasOwnProperty(cm.formatter)) {
                          cm.formatter = functionsMapping[cm.formatter];
                      }
                  }
                  jQuery("#mygrid").jqGrid({
                      url: '/home1/GetImageGridData',
                      datatype: "json",
                      mtype: "POST",
                      colNames: ColNN,
                      colModel: colMM,
                      rowNum: 4,
                      width: 700,
                      height: '300',
                      pager: $("#pager")
                  });
              }
          });
      });
  </code></pre>
  
  <p>Controller Code:</p>
  
  <pre><code>[HttpPost]
          public JsonResult GetImageGridData(FormCollection frmcl)
          {
              int icol = 3;
  
              // it gives array of data
              object[] entity = this.FetchData();
  
  
              string[] colnames = new string[icol];
  
              for (int icount = 1, ilength = icol; icount &lt;= ilength; icount++)
              {
                  colnames[icount - 1] = "Col" + icount.ToString();
              }
  
              var eee = this.ToExpandoObject();
              object[] data1 = null;
              data1 = (from s in eee
                       select new
                       {
                           id = 1,
                           cell = GetColumns(s,colnames)
                       }).ToArray();
  
              var jsonData = new
              {
                  total = data1.Count() / 4,
                  page = 1,
                  records = data1.Count(),
                  rows = data1,
                  userData = "aaa"
              };
              return Json(jsonData);
          }
  
  
          private object[] GetColumns(object s, string[] colnames)
          {
              object[] row = new object[colnames.Length];
              IDictionary&lt;string, object&gt; propertyValues = (IDictionary&lt;string, object&gt;)s;
              int i = 0;
              foreach (string col in colnames)
              {
                  row[i++] = propertyValues[col].ToString();
              }
              return row;
          }
          public List&lt;dynamic&gt; ToExpandoObject()
          {
              var result = new List&lt;dynamic&gt;();
  
              int icol = 3;
              object[] entity = this.FetchData();
              string imagefieldname = "ImageSrc1";
              string[] colnames = new string[icol];
  
              for (int irow = 0; irow &lt; entity.Count(); irow++)
              {
                  dynamic e = new ExpandoObject();
                  var d = e as IDictionary&lt;string, object&gt;;
                  for (int collength = 0; collength &lt; icol; collength++)
                  {
                      d.Add("Col" + (collength+1).ToString() , entity[irow].GetType().GetProperty(imagefieldname).GetValue(entity[irow], null));
                  }
                  result.Add(e);
              }
              return result;
          }
      }
  </code></pre>