Image column for jqfrid RSS

• • Reply
  

  gslakmal

  Member

  118 Points

  425 Posts

  Image column for jqfrid

  Mar 01, 2012 10:50 AM|LINK

  Hi,

  How can i create image column to jqgrid

  <script type="text/javascript">
      jQuery(document).ready(function () {
          jQuery("#list").jqGrid({
              url: '/Tippees/LinqGridData/',
              datatype: 'json',
              mtype: 'POST',
              colNames: ['UserId', 'Dep-Name', 'Hotel-Name', 'Picture', ''],
              colModel: [
        { name: 'UserId', index: 'UserId', width: 300, align: 'left' },
        { name: 'department.Name', index: 'department.Name', width: 100, align: 'left' },
        { name: 'hotel.Name', index: 'hotel.Name', width: 100, align: 'left' },
        { name: 'Picture', index: 'Picture', width: 100, align: 'left' },
        { name: 'Rating', index: 'Rating', width: 100, align: 'left' },
        ],
              pager: '#pager',
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              sortname: 'Id',
              sortorder: "desc",
              viewrecords: true,
              caption: 'My first grid'
          });
          $("#list").navGrid("#pager", { edit: false, add: false, del: false });
      });
   
  </script>

  (MCPD MCTS) G S Lakmal
• • Reply
  

  tpeczek

  Contributor

  2112 Points

  260 Posts

  Re: Image column for jqfrid

  Mar 01, 2012 11:08 AM|LINK

  All you need to do is create a formatter for the column that will render <img> element. You should be able to find what you need in below sample project:

  • http://tpeczek.codeplex.com/releases/view/61796

  Just open Formatting.cshtml and take a look at unitsInStockFormatter for UnitsInStock column.

  Please indicate "Mark as Answer" if a post has answered the question.
  Yet another developer blog <-- visit my blog
  • Edited by tpeczek on Mar 01, 2012 11:10 AM
• • Reply
  

  gslakmal

  Member

  118 Points

  425 Posts

  Re: Image column for jqfrid

  Mar 01, 2012 03:50 PM|LINK

  Hi,

  I have done this way, But still image dont display , becouse its dont take correct path

  <script type="text/javascript">
      jQuery(document).ready(function () {
          jQuery("#list").jqGrid({
              url: '/Tippees/LinqGridData/',
              datatype: 'json',
              mtype: 'POST',
              colNames: ['UserId', 'Dep-Name', 'Hotel-Name', 'Picture', ''],
              colModel: [
        { name: 'UserId', index: 'UserId', width: 300, align: 'left' },
        { name: 'department.Name', index: 'department.Name', width: 100, align: 'left' },
        { name: 'hotel.Name', index: 'hotel.Name', width: 100, align: 'left' },
        { name: 'Picture', index: 'Picture', align: 'left', formatter: unitsInStockFormatter, search: false },
        { name: 'Rating', index: 'Rating', width: 100, align: 'left' },
        ],
              pager: '#pager',
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              sortname: 'Id',
              sortorder: "desc",
              viewrecords: true,
              caption: 'My first grid'
          });
          $("#list").navGrid("#pager", { edit: false, add: false, del: false });
      });
  
        function unitsInStockFormatter(cellvalue, options, rowObject) {
              var imgPath = "~/images/" + cellvalue ;
              alert(imgPath);
              return "<img src='@Url.Content("~/images/'"+imgPath +'")' alt='" + cellvalue + "'  />";
          };
   
  </script>

  (MCPD MCTS) G S Lakmal
• • Reply
  

  ignatandrei

  All-Star

  135204 Points

  21687 Posts

  Moderator

  MVP

  Re: Image column for jqfrid

  Mar 01, 2012 03:52 PM|LINK

  gslakmal

  But still image dont display , becouse its dont take correct path

  What is the outputed html path and what will be the correct path?

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  gslakmal

  Member

  118 Points

  425 Posts

  Re: Image column for jqfrid

  Mar 01, 2012 04:10 PM|LINK

  I have modify code like below

  return "<img src='@Url.Content("~/images/'"+cellvalue +'")' alt='" + cellvalue + "'  />";

  its raise error

  An opening "(" is missing the corresponding closing ")".

  (MCPD MCTS) G S Lakmal
• • Reply
  

  ignatandrei

  All-Star

  135204 Points

  21687 Posts

  Moderator

  MVP

  Re: Image column for jqfrid

  Mar 01, 2012 05:47 PM|LINK

  ='@Url.Content("~/images/'"+cellvalue +'")' alt='" + cellvalue + "' />"; after cellvalue must be ", not '
  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
  • Marked as answer by Young Yang - MSFT on Mar 07, 2012 12:47 PM
• • Reply
  

  gslakmal

  Member

  118 Points

  425 Posts

  Re: Image column for jqfrid

  Mar 01, 2012 06:04 PM|LINK

  Still same error

  (MCPD MCTS) G S Lakmal
• • Reply
  

  ignatandrei

  All-Star

  135204 Points

  21687 Posts

  Moderator

  MVP

  Re: Image column for jqfrid

  Mar 01, 2012 08:08 PM|LINK

  gslakmal

  Still same error

  please share code now.

  (Did you understand the reason of the previous error?)

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools
• • Reply
  

  gslakmal

  Member

  118 Points

  425 Posts

  Re: Image column for jqfrid

  Mar 02, 2012 02:06 AM|LINK

  Hi,

  Here is new code

            return "<img src='@Url.Content("~/images/'"+cellvalue +'")' alt='" + cellvalue + "' />";

  error is  

  An opening "(" is missing the corresponding closing ")".

  (MCPD MCTS) G S Lakmal
  • Edited by gslakmal on Mar 02, 2012 02:07 AM
  • Edited by gslakmal on Mar 02, 2012 02:09 AM
• • Reply
  

  ignatandrei

  All-Star

  135204 Points

  21687 Posts

  Moderator

  MVP

  Re: Image column for jqfrid

  Mar 02, 2012 04:16 AM|LINK

  gslakmal

  '"+cellvalue +'"

  this does not fit.Must be

  '"+cellvalue +"'

  My .NET blog : http://msprogrammer.serviciipeweb.ro/ |2012 Programmer tools