jQWidgets Forums

jQuery UI Widgets Forums Grid Images 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)
  • Author
  • Images Renderer #12904

    ekaperintis
    Participant

    This is my captured :

    [img=http://s8.postimage.org/g39tkmukh/Imagerenderer.jpg]

    How implementation for my captured

    thanks

    Images Renderer #12906

    ekaperintis
    Participant
    Images Renderer #12915

    Peter Stoev
    Keymaster

    Hi ekaperintis,

    For rendering of images in Grid cells, please take a look at this sample: imagecolumn.htm.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Images Renderer #12917

    ekaperintis
    Participant

    Hii 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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.