EasyUI Forum

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

The 'formatter' function should return html string.

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';
         }
      }       
   }