EasyUI
Home
Demo
Tutorial
Documentation
Download
Extension
Contact
Forum
EasyUI Forum
April 18, 2024, 06:37:52 PM
Welcome,
Guest
. Please
login
or
register
.
1 Hour
1 Day
1 Week
1 Month
Forever
Login with username, password and session length
News
:
Home
Help
Search
Login
Register
EasyUI Forum
>
General Category
>
EasyUI for jQuery
>
Datagrid formatter
Pages: [
1
]
« previous
next »
Print
Author
Topic: Datagrid formatter (Read 4804 times)
jega
Full Member
Posts: 190
Datagrid formatter
«
on:
March 08, 2018, 02:58:45 PM »
Hi.
Can't get this to work.
Having a datagrid with a column formatter formatDGImage
function formatDGImage(val,row){
//console.log(val);
if (row){
//console.log(row);
if (row.tournamentLogo != null){
img = new Image();
var newWidth = 0;
var newHeight = 0;
img.onload = function() {
newHeight = 30;
newWidth = this.width / (this.height / 30);
newWidth = Math.round(newWidth);
img.style.height = newHeight+'px';
img.style.width = newWidth+'px';
console.log(img);
return img;
}
img.src = 'tournamentlogo/'+QueryString.get('ident')+'/'+row.tournamentLogo;
}
else{
return 'Missing logo';
}
}
}
result of console.log(img) = <img style="width: 60px; height: 30px;" src="tournamentlogo/1/metalliga1.png"></img>
On "return img" nothing is showed
But when i do return '<img style="width: 60px; height: 30px;" src="tournamentlogo/1/metalliga1.png"></img>' outside the img.onload, it works fine
Any help ??
Regards Jesper
Logged
stworthy
Administrator
Hero Member
Posts: 3581
Re: Datagrid formatter
«
Reply #1 on:
March 09, 2018, 01:02:43 AM »
The 'formatter' function should return html string.
Code:
function formatDGImage(val,row){
if (row){
...
return '<img src="..." onload="...">';
} else {
return 'Missing logo';
}
}
Logged
jega
Full Member
Posts: 190
Re: Datagrid formatter
«
Reply #2 on:
March 09, 2018, 06:00:54 AM »
Yes i know it must be HTML
When i use this: return '<img style="width: 60px; height: 30px;" src="tournamentlogo/1/metalliga1.png"></img>';
It doesn't work
Only if the line return '<img style="width: 60px; height: 30px;" src="tournamentlogo/1/metalliga1.png"></img>'; is outside the img.onLoad
Like this
function formatDGImage(val,row){
//console.log(val);
if (row){
//console.log(row);
if (row.tournamentLogo != null){
img = new Image();
var newWidth = 0;
var newHeight = 0;
img.onload = function() {
newHeight = 30;
newWidth = this.width / (this.height / 30);
newWidth = Math.round(newWidth);
img.style.height = newHeight+'px';
img.style.width = newWidth+'px';
console.log(img);
//return img;
//return '<img style="width: 60px; height: 30px;" src="tournamentlogo/1/metalliga1.png"></img>';
}
img.src = 'tournamentlogo/'+QueryString.get('ident')+'/'+row.tournamentLogo;
return '<img style="width: 60px; height: 30px;" src="tournamentlogo/1/metalliga1.png"></img>';
}
else{
return 'Missing logo';
}
}
}
Logged
Pages: [
1
]
Print
« previous
next »
Jump to:
Please select a destination:
-----------------------------
General Category
-----------------------------
=> News
=> General Discussion
=> EasyUI for jQuery
=> EasyUI for Angular
=> EasyUI for Vue
=> EasyUI for React
=> Bug Report
Loading...