use image inside grid.

[kbloemParticipant]

I have a value inside a column in the database. What i want is to add code to the code below so it will show an image inside the grid.

The value inside mysql is stored as clean text lik ned_ico.png.

in php i could just take a rule like

<img src=\"http://www.site.com/images/" . $row['taal'] . "\">to have the image shown.

I cannot get it to work inside javascript.

            $("#jqxgrid").jqxGrid(
            {
                pagesize : 25,
				pagesizeoptions: ['25', '50', '100'],
				width : 1170,
				theme:"black",
				source: dataAdapter,
				pageable: true,
				autoheight: true,
                columns: [
                { text: 'Taal', datafield: '<img src=\"http://www.site.com/images/' + 'taal' + '\">', width: 50},
                { text: 'Titel', datafield: 'url', width: 690 },
                { text: 'Website', datafield: 'sitenaam', width: 180 },
                { text: 'Ingezonden Door', datafield: 'gamer_int', width: 150 },
                { text: 'Datum', datafield: 'datum', width: 100 } 
                ]
            });
        });

What am i doing wrong?

[Peter StoevKeymaster]

Hi kbloem,

The datafield cannot be IMG tag or any type of HTML Tag. To display image in a Grid, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/imagecolumn.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kbloemParticipant]

Thanks peter i got it to work…

Does this work with urls behind a value also?

i need to add <a href=" <<value from table cell>> " before a datafield value. And "> <<value from other table cell>> and then a static value `

[kbloemParticipant]

To be clear, in column a i have a url and in column b i have a name. Inside the grid, when people click the name i want the url to open.

If there is a manual could you point me to it? Cannot find it…

Thank you!

Regards,
Kenny

[Peter StoevKeymaster]

Hi Kenny,

You can take a look at the Grid’s Column Template demo.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kbloemParticipant]

Ok i have the variable setup like this and it displays links in the grid.

`var linkrenderer = function (row, column, value) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘”_blank” data-rokbox=””‘ };
var html = $.jqx.dataFormat.formatlink(value, format);
return html;
}
columns: [
{ text: ”, datafield: ‘taal’ , width: 30, cellsrenderer: imagerenderer},
{ text: ‘Titel’, datafield: ‘url’ , width: 700, cellsrenderer: linkrenderer},
{ text: ‘Website’, datafield: ‘sitenaam’, width: 190 },
{ text: ‘Ingezonden Door’, datafield: ‘gamer_int’, width: 150 },
{ text: ‘Datum’, datafield: ‘datum’, width: 100 }
]

`

However i want the links to have another name. The columname voor the title of the link is “titel” and for the url itself is “url”

[kbloemParticipant]

I tried combining two values to one variable but cannot get it to work.

so there are two columns in my table. Column A has the value “www.google.nl” and column B has the value “Google”.

I can get the url to display in the grid but what i want is to show Google and when people click on it they go to the website.

[kbloemParticipant]

Could you maybe point me to a demo for this or a manual? I searched through the site but cannot find it…

[kbloemParticipant]

I got it using

var paginalinkrenderer = function(row, column, value, defaultHtml, columnSettings, rowData) {
			return '<a href="' + rowData.url + '" target="_blank" data-rokbox="">' + value + '</div>';
			} 

[Author]

Posts