Class: View

GC.Data.View

Table of contents

Constructors

• constructor

Properties

• autoFilter
• autoSort

Methods

• addColumn
• addStyleRule
• clearStyleRules
• fetch
• getColumn
• length
• removeColumn
• removeStyleRule
• visibleLength

Constructors

constructor

• new View(name, columnInfos?, includeDefaultColumns?, options?)

Represents the view.

property name - The unique name of the column.

property [value] - The value of the column, could be a field name of table from database, or formula which uses the fields names.

property {string | string[]} [caption] - The caption of the column.

property {number | string} [width] - The width of the column, support number in pixel, or star size.

property [style] - The column style options.

property {Array.<GC.Data.CellValueRuleOptions | GC.Data.SpecificTextRuleOptions | GC.Data.FormulaRuleOptions | GC.Data.DateOccurringRuleOptions | GC.Data.Top10RuleOptions | GC.Data.UniqueRuleOptions | GC.Data.DuplicateRuleOptions | GC.Data.AverageRuleOptions | GC.Data.TwoScaleRuleOptions | GC.Data.ThreeScaleRuleOptions | GC.Data.DataBarRuleOptions | GC.Data.IconSetRuleOptions>} [conditionalFormats] - The conditional rules array.

property {GC.Data.NumberValidatorOptions | GC.Data.DateValidatorOptions | GC.Data.TimeValidatorOptions | GC.Data.TextLengthValidatorOptions | GC.Data.FormulaValidatorOptions | GC.Data.FormulaListValidatorOptions | GC.Data.ListValidatorOptions} [validators] - The default data validator.

property [isPrimaryKey] - Mark the column as primary key column.

property [readonly] - Mark the column is readonly.

property [required] - Mark the column is required when insert a new row.

property [defaultValue] - Provide the default value when insert a new row, could be a const or a formula.

property [style] - The column header style options.

Parameters

Name	Type	Description
name	string	The view name.
columnInfos?	string[] | IColumn[]	-
includeDefaultColumns?	boolean	-
options?	ViewOptions	-

Properties

autoFilter

• autoFilter: boolean

Whether to filter again after data is changed. Its default value is true.

---

autoSort

• autoSort: boolean

Whether to sort again after data is changed. Its default value is true.

Methods

addColumn

▸ addColumn(column): void

Adds a column into current view.

example

// Add columns to view
var productTable = dataManager.addTable("products", {
     remote: {
        read: {
            url: "https://demodata.grapecity.com/northwind/api/v1/products"
        }
    }
});
var productView = productTable.addView("productView", [ "id", "name" ]);
productTable.fetch().then(function() {
    productView.addColumn("reorderLevel");
    productView.addColumn({ value: "unitPrice", caption: "UNIT PRICE" });
});

Parameters

Name	Type	Description
column	string | IColumn	The column string or object. When the parameter is a string, the column name and value are the string.

Returns

void

---

addStyleRule

▸ addStyleRule(name, style?, rule?): void

Add a style rule into view.

example

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

Parameters

Name	Type	Description
name	string	The style rule name.
style?	StyleOptions	-
rule?	FormulaRule | StateRule	-

Returns

void

---

clearStyleRules

▸ clearStyleRules(): void

clear all the style rules from view.

example

// remove a style rule
view.clearStyleRules();

Returns

void

---

fetch

▸ fetch(reload?): Promise<any>

Requests the view data from its host table and related table.

example

// Set tablesheet with custom view
var tablesheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
var dataManager = new GC.Data.DataManager();
var productTable = dataManager.addTable("productTable", {
    remote: {
        read: {
            url: "https://demodata.grapecity.com/northwind/api/v1/products"
        }
    }
});
var productView = productTable.addView("productView", [
    "id", "name", "reorderLevel", "unitPrice", "unitsInStock", "unitsOnOrder"
]);
productView.fetch().then(function () {
    // set data source with a View
    tablesheet.setDataView(productView);
});

Parameters

Name	Type
reload?	boolean

Returns

Promise<any>

The resolving Promise thenable. You could get the data in Promise.then().

---

getColumn

▸ getColumn(index?): IColumn | IColumn[]

Gets a column of current view.

example

// Get all columns
var allColumns = productWithSupplierView.getColumn();
// Get the second column
var column1 = productWithSupplierView.getColumn(1);

Parameters

Name	Type
index?	number

Returns

IColumn | IColumn[]

Returns a column by the specified index, or returns all columns when the parameter is omitted.

---

length

▸ length(): number

Get the view host table data source length.

example

// after fetch data, can get the view data source length.
let dataSourceLength = productView.length();

Returns

number

The host table data source length.

---

removeColumn

▸ removeColumn(column): void

Removes a column from current view.

example

// Remove a column
productWithSupplierView.removeColumn("discontinued");

Parameters

Name	Type	Description
column	string	The column value.

Returns

void

---

removeStyleRule

▸ removeStyleRule(name): void

Add a style rule by name from view.

example

// remove a style rule
view.removeStyleRule("dirtyRowStyle");

Parameters

Name	Type	Description
name	string	The style rule name.

Returns

void

---

visibleLength

▸ visibleLength(): number

Get the visible data length in the current view.

example

// after fetch data, can get the view visibleLength.
let viewVisibleLength = productView.visibleLength();

Returns

number

The visible data length in the current view.