TabSheet.setCellPictureSettings

Syntax

setCellPictureSettings (row, col, settings);

Parameters

row. Cell row index.

col. Cell column index.

settings. JSON object that contains image settings. This object has the following fields:

Description

The setCellPictureSettings method defines settings for an image shown in table cell.

Comments

To ensure the method performance, JSON settings of the table data source must contain a list of images encoded in base64 (see Contents of the tabSheetJSON.js file).

Example

To execute the example add links to the following files: PP.css, PP.js and PP.TabSheet.js. The tabSheetJSON.js file containing table data source settings must be available.

Contents of the tabSheetJSON.js file

data = {
   "Structure": {
      "@MUR": 2,
      "@MUC": 1,
      "DefaultRow": {
         "@H": 19
      },
      "DefaultColumn": {
         "@W": 71
      }
   },
   "Cells": {
      //Settings of the cell with coordinates (0,0)
      "Cell": [{
            "@L": 0,
            "@T": 0,
            "@SI": 1,
            "CellData": {
               "@IE": false,
               "@FT": "",
               "@V": "1"
            },

            //Information about image in table
            "PD": {
               //Tooltip text
               "@T": "",
               //Activity
               "@E": true,
               //Vertical alignment
               "@VA": 1,
               //Imae index on the cursor hovering
               "@H": 0,
               //Horizontal alignment
               "@HA": 2,
               //Image index in the normal state
               "@N": 0
            }
         }
      ]
   },
   "Styles": {
      "Style": [{
         "Text": {}
      }]
   },
   //Set of table images
   "Images": {
      "TabImages": {
         "TabImage": [{
            "@CT": "png",
            "@W": 22,
            "@H": 13,
            //Image index

            "@I": 0,
            "$": "iVBORw0KGgoAAAANSUhEUgAAABYAAAANCAYAAACtpZ5jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsAAAA7AAWrWiQkAAAAfdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA\/Pz8\/Pz8gMy41LjHgp8d4AAAAW0lEQVQ4T2MYPiAjIyM8LS2tAR8GqYEqJx4ANclgMwwZg9RAlQ8SAHSRCjaXgjBIDqqMPIDNUBCGSg9SAPR2EMylIDZUmHIANEwOyWA5qDB1AMhAqhs6iAADAwDtZUcr5mtBbwAAAABJRU5ErkJggg=="
         }, {
            "@CT": "png",
            "@W": 22,
            "@H": 13,
            "@I": 1,
            "$": "iVBORw0KGgoAAAANSUhEUgAAABYAAAANCAYAAACtpZ5jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsAAAA7AAWrWiQkAAAAfdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA\/Pz8\/Pz8gMy41LjHgp8d4AAAAW0lEQVQ4T2MYPiAjI2NtWlraf3wYpAaqnHgA1GSOzTBkDFIDVT5IANBF7thcCsIgOagy8gA2Q0EYKj1IAdDbS2AuBbGhwpQDoGHWSAZbQ4WpA0AGUt3QQQQYGAADGFlLIcmooQAAAABJRU5ErkJggg=="
         }, ]
      }
   }
}

Add a table that has an image set up for the cell under coordinates (0,0):

PP.ScriptManager.loadScripts(["tabSheetJSON.js"], tbsht);    
function tbsht() {        
    if (!data)
        return false;        
    if (!PP.Ui.ExamplePrognozSyncDataSource) {            
        PP.Ui.ExamplePrognozSyncDataSource = function (clear) {                
            this.MeasuresLoaded = new PP.Delegate();                
            this.RangeLoaded = new PP.Delegate(); 
        };
        // Create a table data source  

        PP.initClass(PP.Ui.ExamplePrognozSyncDataSource, PP.Object, "PP.Ui.ExamplePrognozSyncDataSource", [PP.Ui.ITabSheetDataSource]);            
        var esdsProto = PP.Ui.ExamplePrognozSyncDataSource.prototype;            
        esdsProto.getIsAsync = function () {                
            return false;            
        };            
        esdsProto.loadMeasures = function () {                
            this.MeasuresLoaded.fire(this, {
                Data: data
            });            
        };            
        esdsProto.loadRanges = function (rangeArray) {                
            this.RangeLoaded.fire(this, {
                Data: data,
                Ranges: rangeArray
            });            
        };            
        esdsProto = null;        

    }
    // Create an instance of the PP.Ui.ExamplePrognozSyncDataSource class     
    dataSource = new PP.Ui.ExamplePrognozSyncDataSource();        
    component = new PP.Ui.TabSheet(   {       
        ParentNode: container,
               DataSource: dataSource,
               IsEditable: true,
               Width: 400,
               Height: 250            
    });    
}

After executing the example a table with an image in the cell under coordinates (0,0) is placed in the page:

On hovering the cursor over the image, image appearance does not change and no tooltip is shown.

Set the image that will be shown on mouse over, set up a tooltip and change image alignment:

component.setCellPictureSettings(0, 0, {hover: 1, normal: 0, hint: "Sort", horAlignment: 1, verAlignment:2});

After executing the setCellPictureSettings method, horizontal alignment to the right edge and vertical alignment to the center is set for the image. On hovering the cursor over the page, image appearance changes (the image with the index 1 described in JSON settings is used), and a tooltip is shown:

See also:

TabSheet