Column with image link - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: cellsrenderer, column, grid, image, imagerenderer, jqxgrid, Link

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

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

Author

Column with image link Posts
March 24, 2015 at 4:52 pm Column with image link #69100

fsigu
Participant

Hi, i am new in the jqwidgets, and i try to make a grid with 2 columns with a image link.
In mi database this columns have the addres for a file example http://www.miserver.com/archivo.pdf
In my grid i have this.

Client, Invoice, PDF,XML
Juan, 123455,www.miserver.com/123455.pdf,www.miserver.com/123455.xml
Pedro, 123456,www.miserver.com/123456.pdf,www.miserver.com/123456.xml

And i want replace the link address with a image, and when the user click in the image the file begin to download, or open in other window.

Please i need your help, and excuse me for my English

March 25, 2015 at 8:11 am Column with image link #69120
Dimitar
Participant
Hi fsigu,

Maybe the following example will be helpful to you:
```
<!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.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) {
                var src = '../../images/' + value;
                return '<a href="' + src + '"><img style="margin-left: 5px; border: none;" height="60" width="50" src="../../images/' + value + '"/></a>';
            }

            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">
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
March 31, 2015 at 10:38 pm Column with image link #69393

fsigu
Participant

Tanks, but do not work for me, i have this code

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.2.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.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/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var theme = ‘classic’;
var source =
{
datatype: “json”,
datafields:
[
{ name: ‘fecha_emision’, type: ‘date’},
{ name: ‘numero_comprobante’, type: ‘string’},
{ name: ‘tipo_comprobante’, type: ‘string’},
{ name: ‘estado_sri’, type: ‘string’},
{ name: ‘autorizacion’, type: ‘string’},
{ name: ‘clave_acceso’, type: ‘string’},
{ name: ‘archivo_xml’, type: ‘string’},
{ name: ‘archivo_pdf’, type: ‘string’}
],
url: ‘lista_comprobantes_data.php’,
filter: function () {
// actualizamos la grilla enviando la solicitod al server
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
// inicio jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 800,
source: dataAdapter,
theme: theme,
filterable: true,
columns:
[
{ text: ‘Fecha Emision’, datafield: ‘fecha_emision’,cellsformat: ‘d’, width: 120 },
{ text: ‘Numero Comprobante’, datafield: ‘numero_comprobante’, width: 160 },
{ text: ‘Tipo Comprobante’, datafield: ‘tipo_comprobante’, width: 140 },
{ text: ‘Estado’, datafield: ‘estado_sri’, width: 100 },
{ text: ‘Numero de Autorizacion’, datafield: ‘autorizacion’, width: 350 },
{ text: ‘Clave de Acceso’, datafield: ‘clave_acceso’, width: 420 },
{ text: ‘Xml’, datafield: ‘archivo_xml’, width: 50 },
{ text: ‘Pdf’, datafield: ‘archivo_pdf’, width: 50 }
]
});
});
</script>
</head>
<body class=’default’>
<center>
<?php
echo ‘<div id=”main”>’;
echo ‘<h2>Consulta de comprobantes electrónicos</h2>’;
echo ‘Salir‘;
echo ‘</div>’;
?>
<div id=”jqxgrid”></div>:
</center>
</body>
</html>

in the columns,
{ text: ‘Xml’, datafield: ‘archivo_xml’, width: 50 },
{ text: ‘Pdf’, datafield: ‘archivo_pdf’, width: 50 }

i want that show the image, xml.jpg and pdg.jpg, and when the user click over this image the user download the file,
in the archivo_xml data i have this.
http://www.dominio.com/comp/fa123.xml

where should I put the function imagerenderer
and how i send the value for this column, i am lost
please help

April 1, 2015 at 8:04 am Column with image link #69411

Dimitar
Participant

Hi fsigu,

Please check the code I posted carefully. The imagerenderer function is set as a cellsrenderer to one of the columns. For more information about cellsrenderer, please check out the help topic Grid Cells Rendering.

Best Regards,
Dimitar

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

April 3, 2015 at 12:28 am Column with image link #69495

fsigu
Participant

tanks work fine
Author

Posts

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

You must be logged in to reply to this topic.