jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Images Renderer
Tagged: grid, Image Renderer
This topic contains 3 replies, has 2 voices, and was last updated by ekaperintis 12 years, 6 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorImages Renderer Posts
-
This is my captured :
[img=http://s8.postimage.org/g39tkmukh/Imagerenderer.jpg]
How implementation for my captured
thanks
Hi ekaperintis,
For rendering of images in Grid cells, please take a look at this sample: imagecolumn.htm.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHii master Peter ,
Yes, I know, but don’t work in my source code, please look in
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to use the Grid API to customize a column's rendering.</title> <link rel="stylesheet" href="./../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="./../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="./../scripts/gettheme.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="./../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var movies = new Array(); // Avatar movies[0] = { Status: 'Y', Image: 'Y.png', Title: 'Avatar', Year: 2009 }; movies[1] = { Status: 'Y', Image: 'Y.png', Title: 'Priest', Year: 2006 }; movies[2] = { Status: 'N', Image: 'no.png', Title: 'End Game', Year: 2006 }; movies[3] = { Status: 'Y', Image: 'Y.png', Title: 'Unknown', Year: 2011 }; movies[4] = { Status: 'Y', Image: 'Y.png', Title: 'Unstoppable', Year: 2010 }; movies[5] = { Status: 'Y', Image: 'Y.png', Title: 'Twilight', Year: 2008 }; movies[6] = { Status: 'N', Image: 'no.png', Title: 'Kung Fu Panda', Year: 2008 }; movies[7] = { Status: 'N', Image: 'no.png', Title: 'Knockout', Year: 2011 }; movies[8] = { Status: 'N', Image: 'no.png', Title: 'The Plane', Year: 2010 }; movies[9] = { Status: 'N', Image: 'no.png', Title: 'Big Daddy', Year: 1999 }; var imagerenderer = function (row, datafield, value) { return '<img style="margin-left: 5px;" height="30" width="30" src="./../images/' + value + '"/>'; } var source = { localdata: movies, datatype: "array" }; var dataAdapter = new $.jqx.dataAdapter(source); // Create jqxGrid. $("#jqxgrid").jqxGrid( { width: 700, source: dataAdapter, theme: theme, editable: true, rowsheight: 30, columns: [ { text: 'Status', datafield: 'Status', width: 140, columntype: 'combobox', validation: function (cell, value) { if (value =="Y") { return '<img style="margin-left: 5px;" height="30" width="30" src="./../images/no.png" />'; } return true; }, }, { text: 'Bad', datafield: 'Image', width: 140, cellsrenderer: imagerenderer }, { text: 'Title', datafield: 'Title', width: 200}, { text: 'Year', datafield: 'Year'} ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> </div></body></html>
Can you help me,,
I want selection field Status =”Y” then field value image =”Y.png” else “no.png”
thank you
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.