View Styling and Rules

In addition to defining structure, a View can control how data is visually interpreted and dynamically evaluated.

This includes:

Conditional formatting
Sparkline rules
View-level style rules
Automatic filter and sort reapplication
Data length inspection

Conditional Formatting (Column-Level)

Conditional formatting can be defined directly in the column configuration using the conditionalFormats property.

These rules are evaluated per cell.

Formula-Based Rule

var formulaRule = {
    ruleType: "formulaRule",
    formula: "@ > 50",
    style: {
        backColor: "pink"
    }
};

var myView = productTable.addView("myView", [
    { value: "productId", caption: "ID" },
    { value: "unitPrice", caption: "Unit Price", conditionalFormats: [formulaRule] }
]);

@ refers to the current cell value.
The style is applied when the formula evaluates to true.

Sparkline Conditional Rules

Sparkline rules allow data to be visualized directly within cells.

They are also defined through conditionalFormats.

Bullet Sparkline Example

var bulletRule = {
    ruleType: "sparklineRule",
    sparklineType: "BULLETSPARKLINE",
    sparklineOptions: {
        measure: '@',
        target: 500,
        maxi: 1000,
        good: 700,
        bad: 250
    },
    showSparklineOnly: true
};

var myView = salesTable.addView("salesView", [
    { value: "region", caption: "Region", width: 130 },
    { value: "target", caption: "Target ($K)", width: 100 },
    { value: "actual", caption: "Actual ($K)", width: 100 },
    { value: "actual1", caption: "Performance", width: 220, conditionalFormats: [bulletRule] }
]);

Lollipop Variance Example

var lollipopRule = {
    ruleType: "sparklineRule",
    sparklineType: "LOLLIPOPVARISPARKLINE",
    sparklineOptions: {
        plannedValue: '[target]',
        actualValue: '$CF_RANGE$',
        index: '@',
        reference: 0,
        mini: -0.3,
        maxi: 0.3
    },
    showSparklineOnly: true
};

var myView = salesTable.addView("salesView", [
    { value: "region", caption: "Region", width: 130 },
    { value: "target", caption: "Target ($K)", width: 100 },
    { value: "actual", caption: "Actual ($K)", width: 100 },
    { value: "actual2", caption: "Variance", width: 220, conditionalFormats: [lollipopRule] }
]);

Sparkline rules allow inline data visualization without modifying underlying data.

View-Level Style Rules

In addition to column-level conditional formatting, you can define style rules at the View level.

These rules can be:

Formula-based
State-based

Add a View-Level Rule

view.addStyleRule(
    "dirtyRowStyle",
    { backColor: "yellow" },
    {
        direction: GC.Data.StateRuleDirection.row,
        state: GC.Data.RowColumnStates.dirty
    }
);

Manage View-Level Rules

view.getStyleRule();               // get all rules
view.getStyleRule("ruleName");     // get specific rule
view.removeStyleRule("ruleName");  // remove rule
view.clearStyleRules();            // remove all rules

View-level rules apply across the entire view rather than a single column.

Automatic Filter and Sort Reapplication

A View exposes two properties:

view.autoFilte
rview.autoSort

These control whether existing filter or sort definitions are automatically re-applied when underlying data changes.

When true (default), filtering and sorting are re-evaluated after data updates.
When false, the existing state remains unchanged until manually triggered.

These properties affect runtime behavior only.

Data Length Methods

A View provides two methods to inspect data size:

view.length();
view.visibleLength();

length() returns the total data length of the host table.
visibleLength() returns the current visible data length in the view.

The visible length may differ from total length depending on filtering or view state.