Using Images for Cell Conditional Formatting

Operating system requirements: iOS 5.0 or later.

Mobile device: iPad.

Description

This example describes the use of images for table cell conditional formatting. After starting the example the following operations are executed:

Minimum, medium and maximum table cell values.
The colors corresponding to minimum, medium and maximum cell values are set and removed.
The collection of images used in conditional formatting is set and removed by specified identifier.
It is set and removed whether images are used for conditional formatting of table rows and columns.
Setting of image alignment relative to cell border is set and removed.
Setting of image position relative to cell text is set and removed.
The tag of image collection used in conditional formatting is set and removed.

Source Code

1. Executing the example requires to place the following code in the body of the executeExample method of the ViewController class (see the Creating a Simple Data Grid section):

// Get style for table cells athat are not headers
NuGridCellStyle *style = [proxyDatasource gridViewGetDefaultStyle:[contr gridView]];
// Enable consitional formatting of table rows
[style setRowWithImageCondition:YES];
// Determine the number of rows and columns
int rowCount = [datasource gridViewRowCount:[contr gridView]];
int columnCount = [datasource gridViewColumnCount:[contr gridView]];
// Determine array of column values
NSMutableArray *valueArray = [[NSMutableArray new] autorelease];
for (int i = 0; i < rowCount; i++) {
    for (int j = 0; j < columnCount; j++) {
        NSObject *value = [datasource gridView:[contr gridView] valueForCellInRow:i inColumn:j];
        [valueArray addObject:value];
    }
}
if (valueArray.count > 0) {
    // Sort array values
    [valueArray sortUsingSelector:@selector(compare:)];
    // Determine minimum, medium and maximum values
    style.minGradValue = [[valueArray objectAtIndex:0] doubleValue];
    style.midGradValue = [[valueArray objectAtIndex:valueArray.count / 2] doubleValue];
    style.maxGradValue = [[valueArray lastObject] doubleValue];
}
// Determine collection of images
NSArray *defaultImages = [[NSArray arrayWithObjects:
[UIImage imageNamed:@"default_arrow_up.png"],
[UIImage imageNamed:@"default_arrow_upright.png"],
[UIImage imageNamed:@"default_arrow_right.png"],
[UIImage imageNamed:@"default_arrow_downright.png"],
[UIImage imageNamed:@"default_arrow_down.png"],
nil] retain];
// Determine the second collection of images
NSArray *bwImages = [[NSArray arrayWithObjects:
[UIImage imageNamed:@"bw_arrow_up.png"],
[UIImage imageNamed:@"bw_arrow_upright.png"],
[UIImage imageNamed:@"bw_arrow_right.png"],
[UIImage imageNamed:@"bw_arrow_downright.png"],
[UIImage imageNamed:@"bw_arrow_down.png"],
nil] retain];
NSMutableDictionary *images = [[[NSMutableDictionary alloc] init] autorelease];
[images setValue:defaultImages forKey:@"default_arrow"];
[images setValue:bwImages forKey:@"bw_arrow"];
// Use the first collection of images
[style setCurrentPictureSetID:@"default_arrow"];
// Set collection of images
[style setImageCollection:(NSArray *)[images valueForKey:[style currentPictureSetID]]];
// Determine image alignment relative to cell borders
[style setImageAlignment:NuImageVerticalAlignmentCenter | NuImageHorizontalAlignmentRight];
// Determine image position relative to cell text
[style setImageZOrder:NuImageZOrderBack];

After executing the example conditional formatting is applied to table cells with the use of images:

2. The ImageSetTag, property can be used instead of the CurrentPictureSetID property, in this case it is required to replace the following code fragment:

// Use the first collection of images
[style setCurrentPictureSetID:@"default_arrow"];
// Set collection of images
[style setImageCollection:(NSArray *)[images valueForKey:[style currentPictureSetID]]];

with the following one:

// Use the first collection of images
[style setImageSetTag:1];
// Set collection of images
[style setImageCollection:(NSArray *)[[images allValues] objectAtIndex:[style imageSetTag]]];

The example execution result is not changed.

The result will be identical if the ColumnWithImageCondition property is used instead of the rowWithImageCondition property:

[style setColumnWithImageCondition:YES];

3. Then remove image alignment settings used for conditional formatting relative to cell borders:

[style removeImageAlignment];

Therefore, images are located below the cell text:

4. Remove the alignment setting relative to cell text for the images used for conditional formatting:

[style removeImageZOrder];

After executing the example the image is located to the left of the text:

5. Then remove identifier of the image collection used for conditional formatting and text alignment setting:

[style removeCurrentPictureSetID];
[style setImageCollection:(NSArray *)[images valueForKey:[style currentPictureSetID]]];
[style removeTextAlignment];

After executing the example the images used for conditional formatting are not displayed, the text is aligned to the left cell border:

The identical result is obtained after removing the collection of images:

[style removeImageCollection];

or indicators whether conditional formatting is used for row and column cells:

[style removeRowWithImageCondition];
[style removeColumnWithImageCondition];

6. Remove the image collection tag, which value is stored in the ImageSetTag property:

[style removeImageSetTag];
NSLog(@"Image collection tag value: %d", [style imageSetTag]);

After executing the example the development environment console displays a message that image collection tag value is -1.