pbImageByCSS - cWebColumnImage

Determines whether the image is specified by a property setting or CSS class

Type: Property
Access: Read/Write
Data Type: Boolean
Parameters: None

Syntax

{ WebProperty=Client }
Property Boolean pbImageByCSS

Access Type	Syntax
Read Access:	WebGet pbImageByCSS to BooleanVariable
Write Access:	WebSet pbImageByCSS to BooleanVariable/Value

Description

You can specify the name of an image to be displayed in two ways:

(i) Specify the image name in DataFlex code by setting the psImageURL property (or sending AddImage), (ii) By setting the background-image attribute in a CSS class and applying that CSS class to the column. Set the pbImageByCSS property to determine which of these methods to use.

Static Images

When pbDynamic is set to False (the default), the cWebColumnImage class is designed to display a single (static) image on each row.

When pbImageByCSS is False (the default) and you are displaying a static image, you will set the psImageURL property to specify the image to display on each row.

When pbImageByCSS is True and you are displaying a static image, you will set the psImageCSSClass property to specify the name of the CSS class where the background-image property is defined for the image you want displayed.

Dynamic Images

When pbDynamic is True, a variable set of dynamic images can be displayed for each row. In this case the OnDefineImages event will be triggered in this object for every row of data that is sent to the grid. In this case, the images will be specified by implementing the OnDefineImages event and sending the AddImage message for each image you wish to display.

If the pbImageByCSS is False, then you will pass the image URL as the parameter to AddImage. If pbImageByCSS is True, then you will pass the CSS class name as the parameter to AddImage. This CSS class should specify the background-image property pointing to the image you want to display.

Specifying the Image Size

When specifying the image via the CSS background-image (i.e. pbImageByCSS is True), you need to also specify the height and width for the image. The background-image style property of an HTML element is not considered 'content', thus the browser will render it with a zero size unless the element is given a fixed size.

There are two ways to assign a fixed size for displaying images via CSS:

(i) You can set the DataFlex piImageHeight and piImageWidth properties, (ii) You can set the height and width CSS properties in the CSS class you are using.

Sample

This example demonstrates how to declare a CSS class that specifies a background-image URL where the image height and width are also specified in the CSS class. This CSS class would normally be declared in the workspace's application.css file. Below the CSS class declaration is an example cWebColumnImage object declaration that displays its image by referencing this CSS class.

#OWEBAPP .DemoCustomerIcon{
    background-image: url('../Images/Order.png');
    width: 16px;
    height: 16px;
}

Object oWebColumnImage1 is a cWebColumnImage
    Set pbImageByCSS to True
    Set psImageCSSClass to "DemoCustomerIcon"
    Set piWidth to 50
End_Object

Sample

This example demonstrates how to declare a CSS class that specifies a background-image URL where the height and width are specified in the DataFlex object. The CSS class would normally be declared in the workspace's application.css file. Below the CSS class declaration is an example cWebColumnImage object declaration that displays its image by referencing this CSS class. Note that the piImageHeight and piImageWidth properties are set in the DataFlex object to specify the size of the image to be displayed. The piWidth property declares the width of the actual column and is independent of the image size.

#OWEBAPP .DemoCustomerIcon{
    background-image: url('../Images/Order.png');
}

Object oWebColumnImage1 is a cWebColumnImage
    Set pbImageByCSS to True
    Set psImageCSSClass to "DemoCustomerIcon"
    Set piWidth to 50
    Set piImageHeight to 16
    Set piImageWidth to 16
End_Object

About Web Properties

Each web property maintains two values: The regular property value is set during object creation and should not be changed during the lifetime of that object. To access that value, use the standard property Get and Set syntax.

The web property value is the local value stored at each client. This is synchronized to the client's local value whenever a server call is being processed. To access the web property value, use the WebGet and WebSet syntax above instead of the standard Get and Set syntax.

About Web Properties

Each web property maintains two values: The regular property value is set during object creation and should not be changed during the lifetime of that object. To access that value, use the standard property Get and Set syntax.

The web property value is the local value stored at each client. This is synchronized to the client's local value whenever a server call is being processed. To access the web property value, use the WebGet and WebSet syntax above instead of the standard Get and Set syntax.