Column Image as a link ? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, cellsrenderer, click, delete, deleterow, grid, image, image column, jquery grid, jqwidgets, jqxGrid ;, onclick, script

This topic contains 4 replies, has 4 voices, and was last updated by Hristo 5 years, 1 month ago.

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

Author

Column Image as a link ? Posts

July 7, 2015 at 6:28 pm 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

July 7, 2015 at 6:30 pm 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.

July 8, 2015 at 8:15 am 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/

October 24, 2019 at 10:24 am 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 ?

October 28, 2019 at 2:08 pm 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

Author

Posts

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

You must be logged in to reply to this topic.