Image Stretching in the TileGrid

[Abdulaziz A.]

Dear All,


I am using the tileGrid to display images from the database, below is my code

       isc.TileGrid.create({
            autoDraw:false,
            ID:"boundList",
            tileWidth:158,
            tileHeight:205,
            
            canReorderTiles:true,
            showAllRecords:true,
            dataSource:"VJK8_COMPONENT_ATTACHMENTS",
            autoFetchData:true,
            animateTileChange:true,
				            
fields : [
			{
				name : "JK8_ATTACHMENT", imageType:"stretch"
			}         
										
			]   
           
        }),

currently part of the image is displayed in the tiles as my images dimension is bigger than the tileWidth and the tileHeight, can you tell what attributes should I use to stretch the images within the tile boundaries

Version : v9.1p_2014-06-28
Best Regards

[Isomorphic]

The "fields" attribute of TileGrid is an Array of DetailViewerField, so you are looking for detailViewerField.imageWidth and imageHeight.

[Abdulaziz A.]

Thanks and I have another question regarding the tileGrid. in my blob field I keep images and files, in case of files I want to display a common image. any hints?

[Abdulaziz A.]

Still waiting your hint

[Abdulaziz A.]

Hello All,

have a look at the below code, In which I am setting the value of the DetailViewerField.showFileInline =false; in case the content of the blob field is not an image. but actually my goal is to replace the content of DetailViewerField with any other image in case the content of the blob filed is not an image like word document or excel file

        isc.TileGrid.create({
            autoDraw:false,
            ID:"images",
		    tileWidth:150,
		    tileHeight:190,
		    height:"100%",
		    width:"100%",           
            showAllRecords:true,
            dataSource:"VJK8_COMPONENT_ATTACHMENTS",
            autoFetchData:true,
           
			
			recordClick : function(viewer, tile, record){
				
					
					VJK8_COMPONENT_ATTACHMENTS.viewFile(record);
					
				},				            
			fields : [
			{
				name : "JK8_ATTACHMENT",imageWidth:150, imageHeight:160, 
				
				formatCellValue:function (value, record, field, viewer){
				
					if (record["JK8_ATTACHMENT_FILENAME"].contains("jpg") || record["JK8_ATTACHMENT_FILENAME"].contains("gif") || record["JK8_ATTACHMENT_FILENAME"].contains("png")
					|| record["JK8_ATTACHMENT_FILENAME"].contains("bmp")){
						field.showFileInline =true;
					}else{
						field.showFileInline =false;
					}
				}				
			
			},
			
			{
				name : "JK8_ATTACHMENT_TITLE"
			},
			
			{
				name : "JK8_ATTACHMENT_FILENAME",showIf:"false"
			}
			   			         
										
			]   
           
        })

Please advise

[Isomorphic]

You're already overriding formatCellValue. You should be able to rely on the showFileInline behavior for the image files (as you already are), and use this method to either return that "value" HTML unmodified, or return custom HTML to display for the case where your file is not an image. This custom HTML would be a standard <img...> tag containing the alternative standard image you want to display.

Will that work for you?

Thanks
Isomorphic Software

[Abdulaziz A.]

Hi,


I am still not able to achieve my goal. actually whatever I return from the formatCellValue function that doesn't affect the displayed image, check the below code

formatCellValue:function (value, record, field, viewer){
				
    alert(value);//-----> comes as 'undefiend'
					if (record["JK8_ATTACHMENT_FILENAME"].contains("jpg") || record["JK8_ATTACHMENT_FILENAME"].contains("gif") || record["JK8_ATTACHMENT_FILENAME"].contains("png")
					|| record["JK8_ATTACHMENT_FILENAME"].contains("bmp")){
						field.showFileInline =true;
					}else{
						field.showFileInline =false;
					}
					
					return "test";
				}

Moreover the incoming value for the value paramter of the formatCellValue is 'undefiend'. Right now I have no way to change the content of the image


Please Advise

[Abdulaziz A.]

can you let me know if you need any more information to help in this issue

[Isomorphic]

We're taking a look at this - we should have a proper response for you today

[Isomorphic]

You should be able to solve this by providing your field as a customized image field rather than an imageField, as follows:
- Override your field type to be just "image"
- Modify your formatCellValue to return a simple URL where you want to show a placeholder image.
- For cases where you have an actual image to display, return the result of a call to the DataSource.getFileURL() method. This should return a URL which, when hit, will stream back the image.
- In both cases you'll be consulting the 'record' to determine details about the record - you can pretty much ignore the 'value' parameter in this usage.

Since your field is of type "image", the value returned from this formatter should by a simple URL - no need to embed it in an <img src=...> tag.

Please let us know if that doesn't allow you to achieve the result you're after

Regards
Isomorphic Software