動的な計算フィールド：概要

動的な計算フィールドは、CollectionView によって作成され、カスタム式を使用してセルに入力する FlexGrid コントロール内に配置される新しい列です。

CollectionViewの作成

まず、CollectionView にデータを入力するデータを取得する必要があります。 ほとんどの場合、これはデータベースの呼び出しになりますが、ここではサンプルデータを使用します。

export function getData() {
    return [
        { product: ‘Banana’, brand: ‘Chiquita’, unitPrice: 45.95, qty: 12, discount: .08 },  
        { product: ‘Apple’, brand: ‘Granndy’, unitPrice: 65.95, qty: 23, discount: 0.02 },  
        ...,  
    ]
}

次に、このデータを CollectionView に渡します。

export function getCalculatedView() {
    return new CollectionView(getData() { ... });
}

カスタム式の実装

calculatedFields プロパティを使用して、FlexGrid コントロールが計算フィールド列を作成するために使用できるカスタム式を作成できるようになりました。

export function getCalculatedView() {
    return new CollectionView(getData() {
        calculatedFields: {
            fullName: ($) => [$.brand, $.product].join(' '),
            allCaps: ($) => $.fullName.toUpperCase(),  
            totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
            tax: ($) => $.totalPrice * 0.12 
        }
    });
}

CollectionViewをFlexGridに割り当てる

CollectionView は、FlexGridの itemsSource として割り当てる必要があります。 ただし、グリッド内の新しい列のバインディングとして作成した calculatedFields を使用できるようになりました。

new FlexGrid(‘#theGrid’, {
    alternatingRowStep: 0,  
    showMarquee: true,  
    selectionMode: ‘MultiRange’,  
    autoGenerateColumns: false,  
    columns: [  
        // regular data fields  
        { binding: ‘product’, header: ‘Product’ },  
        { binding: ‘brand’, header: ‘Brand’ },  
        { binding: ‘unitPrice’, header: ‘Unit Price’, format: ‘c’ },  
        { binding: ‘qty’, header: ‘Quantity’, format: ‘n0’ },  
        { binding: ‘discount’, header: ‘Discount’, format: ‘p0’ },  
        // calculated fields  
        { binding: ‘fullName’, header: ‘Full Name’, cssClass: ‘calculated’ },  
        { binding: ‘allCaps’ header: ‘UpperCase’ cssClass: ‘calculated’ },  
        { binding: ‘totalPrice’, header: ‘Total Price’, format: ‘c’ cssClass: ‘calculated’ },  
        { binding: ‘tax’, header: ‘Tax Amount’, format: ‘c’, cssClass: ‘calculated’ },  
    ],  
    itemsSource: getCalculatedView()  
});

また、calculatedFields を通常のデータフィールドと区別するためにCSSを追加します。

.calculated {
    background-color: azure;
}