jQuery UI Widgets Forums Grid Column Image as a link ?

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

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

    Raj Desai
    Participant

    Hi Team,

    Please refer this link
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/imagecolumn.htm?arctic

    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.
    $(“#popupWindow”).jqxWindow(‘show’);
    }
    },

    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.

    Regards,
    Raj

    Column Image as a link ? #73473

    Raj Desai
    Participant

    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

    Dimitar
    Participant

    Hi Raj,

    The following example presents the solution:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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.
                $("#jqxgrid").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' }
                   ]
                });
            });
        </script>
    </head>
    <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);
                    }
                </script>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Column Image as a link ? #107131

    Gaurav@123
    Participant

    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

    Hristo
    Participant

    Hello Gaurav@123,

    Please, take a look at this demo:
    https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customwidgetscolumn.htm?light
    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:
    https://www.jqwidgets.com/community/topic/jqxscrollview-image-rotate-left-and-right/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.