jQuery UI Widgets Forums Grid Column Image as a link ?

This topic contains 4 replies, has 4 voices, and was last updated by  Hristo 4 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Column Image as a link ? #73472

    Raj Desai

    Hi Team,

    Please refer this link

    As per this, the first column is used as an image. I want it to be clickable. For e.g. my code has the delete option image as the first column. so when the user clicks on the image, the row gets deleted.

    How can we achieve this ?? Here is the concerned code:

    var imagerenderer = function (row, datafield) {
    return ‘‘;

    { text: ‘Delete Row?’,datafield: ‘Delete’,renderer: function () { return ‘<button id=add onclick=”addrow()”></button>’;},
    columntype: ‘button’, cellsrenderer: imagerenderer, buttonclick: function (row) {
    id = $(“#jqxgrid”).jqxGrid(‘getrowid’, row);
    var offset = $(“#jqxgrid”).offset();
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 360, y: parseInt(offset.top) + 60} });
    // show the popup window.

    The above example has column header of Add button at the top. it is by using renderer function above. Now, if i want to add image as the button for all the columns below that, it doesnt let me. I am using cellsrender option as shown in the code.

    Please let me know where i am going wrong with this code or what else i need to add here.


    Column Image as a link ? #73473

    Raj Desai

    Please note, I am using image as an option and it shows image in the column. However, it doesnt work with buttonclick.

    Column Image as a link ? #73511


    Hi Raj,

    The following example presents the solution:

    <!DOCTYPE html>
    <html lang="en">
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var movies = new Array();
                // Avatar
                movies[0] = { Image: 'avatar.png', Title: 'Avatar', Year: 2009 };
                movies[1] = { Image: 'priest.png', Title: 'Priest', Year: 2006 };
                movies[2] = { Image: 'endgame.png', Title: 'End Game', Year: 2006 };
                movies[3] = { Image: 'unknown.png', Title: 'Unknown', Year: 2011 };
                movies[4] = { Image: 'unstoppable.png', Title: 'Unstoppable', Year: 2010 };
                movies[5] = { Image: 'twilight.png', Title: 'Twilight', Year: 2008 };
                movies[6] = { Image: 'kungfupanda.png', Title: 'Kung Fu Panda', Year: 2008 };
                movies[7] = { Image: 'knockout.png', Title: 'Knockout', Year: 2011 };
                movies[8] = { Image: 'theplane.png', Title: 'The Plane', Year: 2010 };
                movies[9] = { Image: 'bigdaddy.png', Title: 'Big Daddy', Year: 1999 };
                var imagerenderer = function (row, datafield, value) {
                    return '<img onclick="deleteRow(' + row + ')" style="margin-left: 5px;" height="60" width="50" src="../../images/' + value + '"/>';
                var source = { localdata: movies, datatype: "array" };
                var dataAdapter = new $.jqx.dataAdapter(source);
                // Create jqxGrid.
                    width: 400,
                    source: dataAdapter,
                    rowsheight: 60,
                    columns: [
                      { text: 'Image', datafield: 'Image', width: 60, cellsrenderer: imagerenderer },
                      { text: 'Title', datafield: 'Title', width: 200 },
                      { text: 'Year', datafield: 'Year' }
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
                <script type="text/javascript">
                    function deleteRow(index) {
                        var id = $('#jqxgrid').jqxGrid('getrowid', index);
                        $("#jqxgrid").jqxGrid('deleterow', id);

    Best Regards,

    jQWidgets team

    Column Image as a link ? #107131


    Hi everyone,
    I’ve the same question regarding column image.
    As per this, the first column is used as an image. I want it to be clickable. My code has the view option image as the last column. so when the user clicks on the image, modal popup appears and inside in it, it should show image.

    Can anyone help me ?

    Column Image as a link ? #107166


    Hello Gaurav@123,

    Please, take a look at this demo:
    It demonstrates how to create a button with image inside the jqxGrid.

    I would like to suggest you look at this forum topic where we have a similar discussion:

    Best Regards,
    Hristo Hristov

    jQWidgets team

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

You must be logged in to reply to this topic.