[]
        
(Showing Draft Content)

Wijmo_Angular2_Grid.Wjflexgridcolumn

WjFlexGridColumn クラス

wijmo.grid.Column コントロールに対応するAngular 2コンポーネント。

wj-flex-grid-column コンポーネントは、 wijmo.angular2.grid.WjFlexGrid コンポーネントに含める必要があります。

wj-flex-grid-column コンポーネントを使用して、Angular 2アプリケーションに Column コントロールを 追加できます。Angular 2マークアップの構文については、 「Angular 2マークアップ構文」を参照してください。

WjFlexGridColumn コンポーネントは、Column コントロールから派生され、 そのすべてのプロパティ、イベント、およびメソッドを継承しています。 wj-flex-grid-columnコンポーネントには、 wijmo.angular2.grid.WjFlexGridCellTemplate 子コンポーネントを含めることができます。

階層

プロパティ

aggregate

aggregate: Aggregate

列のグループヘッダ行に表示するAggregate を取得または設定します。

align

align: string

列または行のセルの水平方向の配置を取得または設定します。

このプロパティのデフォルト値はnullで、列のdataType に基づいて配置が自動的に選択されます (数値の場合は右揃え、ブール値の場合は中央揃え、その他の型の場合は左揃え)。

デフォルトの配置をオーバーライドする場合は、 このプロパティを'left'、'right'、'center'のいずれかに設定します。

allowDragging

allowDragging: boolean

ユーザーがマウスで列または行を新しい位置に移動できるかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

allowMerging

allowMerging: boolean

列または行にあるセルを結合できるかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalseです。

allowResizing

allowResizing: boolean

ユーザーがマウスで列または行をサイズ変更できるかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

allowSorting

allowSorting: boolean

ユーザーがヘッダーをクリックして列をソートできるかどうかを示す値を取得または設定します。

asyncBindings

asyncBindings: boolean

この特定のコンポーネントのグローバルなWjOptions.asyncBindingsの設定をオーバーライドできます。 詳細については、WjOptions. WjOptions.asyncBindings プロパティの説明を参照してください。

binding

binding: string

列がバインドされているプロパティの名前を取得または設定します。

cellTemplate

cellTemplate: string | ICellTemplateFunction

この Column のデータセルのHTMLコンテンツを生成するために使用される ICellTemplateFunction またはテンプレートの文字列を取得または設定します。

セルテンプレート文字列は、テンプレートリテラル構文を使用します。 コンテンツの文字列は、タイプICellTemplateContextのスコープを使用して生成されます。

ICellTemplateFunction 関数は、ICellTemplateContext 型の引数を取り、セルに表示されるHTMLコンテンツを返します。

次に例を示します。

// テンプレート文字列を使用したデフォルトのレンダリング
col.cellTemplate = '${value}:${col.format}';

// テンプレート文字列を使用した条件付き書式
col.cellTemplate = '<span class=${value > 40000 ? "big-val" : "small-val"}>${text}</span>';

// ICellTemplateFunctionを使用した条件付き書式
col.cellTemplate = (ctx: ICellTemplateContext) => {
     return '<span class="{cls}">{val}</span>'
         .replace('{cls}', ctx.value > 40000 ? 'big-val' : 'small-val')
         .replace('{val}', ctx.text);
};

セルテンプレートは通常の文字列であり、実際のJavaScriptテンプレートではないことに注意してください。 そのため、JavaScriptテンプレート文字列で使用される逆引用符とは異なり、通常の引用符(単一または二重)を使用して定義されます。 cellTemplate プロパティは、Wijmoの相互運用モジュールで使用できるformatItem イベントまたはセルテンプレートよりも単純で、強力ではない代替方法を提供します。

テンプレートの文字列にはテンプレートリテラルが必要であるため、IEではサポートされていません。

セルテンプレートを使用する場合、列の binding および format プロパティを設定する必要があります。 これらは編集モードで使用され、コピー/貼り付け/エクスポート操作をサポートするために使用されます。

セルテンプレートはセルデータの描画にのみ使用され、セルの編集には影響しません。 セルエディタをカスタマイズする場合は、editorプロパティを使用します。

collectionView

collectionView: ICollectionView

この列または行にバインドされたICollectionView を取得します。

cssClass

cssClass: string

列または行のヘッダ以外のデータセルをレンダリングするときに使用するCSSクラス名を取得または設定します。

cssClassAll

cssClassAll: string

列または行内のすべてのセル(データとヘッダー)をレンダリングするときに使用するCSSクラス名を取得または設定します。

currentSort

currentSort: string

列に現在適用されているソート順序を表す文字列を取得します。 有効な値は、昇順の場合は'+'、降順の場合は'-'、列がソートされていない場合はnullです。

currentSortIndex

currentSortIndex: number

グリッドのコレクションビューのソート記述の配列内の列インデックスを取得します。

dataMap

dataMap: DataMap

生の値から列または行の表示値への変換に使用されるDataMap を取得または設定します。

このプロパティには、項目の子項目を含むプロパティの名前を指定する文字列を設定します (たとえば、 code>childItemsPath = 'items';/code>)。

項目の異なるレベルに異なる名前を持つ子項目がある場合は、 このプロパティに、各レベルの子項目を含むプロパティの名前から成る配列を設定します。 (たとえば、. code>childItemsPath = ['checks','earnings'];/code>)。

デモ

このプロパティのデフォルト値はnullです。

このプロパティはMultiRowコントロールには適用しません。

dataMapEditor

dataMapEditor: DataMapEditor

この列または行でデータマップされたセルを編集するときに使用するエディターのタイプを示す値を取得または設定します。

DataMapEditor.DropDownListが(デフォルト値)を設定すると、dataMapがあり、読み取り専用ではない列のセルにドロップダウンボタンを追加します。 ユーザーがドロップダウンボタンをクリックすると、セルの値を選択するために使用できるドロップダウンリストがグリッドに表示されます。 DataMapEditor.RadioButtonsを設定すると、グリッドは各オプションに対してラジオボタンを表示します。ラジオボタンは、マウスまたはキーボードでクリックできます(各オプションの先頭文字またはスペースキーを押して、オプションを切り替えます)。

このプロパティのデフォルト値は DataMapEditor.DropDownList です。wijmo.inputモジュールがロードされる場合のみ、ドロップダウンリストが有効になります。

dataType

dataType: DataType

列または行に格納される値の型を取得または設定します。

グリッドを編集するとき、値は適切な型に型変換されます。

describedById

describedById: string

列の説明を含む要素のIDを取得または設定します。

このIDは、列ヘッダ要素の aria-describedby 属性の値として使用されます。

dropDownCssClass

dropDownCssClass: string

この列または行のドロップダウンに追加するCSSクラス名を取得または設定します。

これらのドロップダウンボタンは、 列にdataMap が設定され、編集可能である場合にのみ表示されます。 ユーザーがドロップダウンボタンをクリックすると、 セルの値を選択するために使用できるリストがグリッドに表示されます。

セルのドロップダウンを使用するには、wijmo.inputモジュールをロードしておく必要があります。

editor

editor: Control

このColumnのカスタムセルエディタとして使用される入力コントロールへの参照を取得または設定します。

入力コントロールは、通常、Wijmo入力コントロールの1つです。 列のデータ型と互換性がある必要があります。

たとえば、次のサンプルコードは、グリッド上のすべての日付型列に対する すべての組み込みエディタを単一のInputDateコントロールに置き換えます。

import { InputDate } from '@grapecity/wijmo.input';
let inputDate = new InputDate(document.createElement('div'));
theGrid.columns.forEach(col => {
    if (col.DataType == DateType.Date) {
        col.editor = inputDate;
    }
})

また、次のサンプルコードは、グリッド上のすべてのデータマップされている列に対する すべての組み込みエディタをAutoCompleteコントロールに置き換えます。

import { AutoComplete } from '@grapecity/wijmo.input';
theGrid.columns.forEach(col => {
    let map = col.dataMap;
    if (map) {
        col.editor = new AutoComplete(document.createElement('div'), {
            itemsSource: map.collectionView,
            displayMemberPath: map.displayMemberPath,
            selectedValuePath: map.selectedValuePath
        });
    }
});

上記の例では、列のdataMapプロパティを使用してAutoCompleteを初期化しています。 多くの場合、formatisRequiredなどの列プロパティを使用して、カスタムエディタを初期化することもできます。

次の例では、editorプロパティを使用して、さまざまなWijmo入力コントロールでグリッドの項目を編集する方法を示しています。

デモ

format

format: string

未加工の値を列または行の表示値に変換するために使用される書式文字列を取得または設定します (Globalize を参照)。

grid

grid: FlexGrid

この 列または行 を所有する FlexGrid

header: string

列ヘッダに表示されるテキストを取得または設定します。

index

index: number

列または行の親コレクション内でのインデックスを取得します。

initialized

initialized: EventEmitter<any>

このイベントは、コンポーネントがAngularによって初期化された後、つまり すべての連結プロパティが割り当てられ、子コンポーネント(ある場合)が初期化された後にトリガされます。

inputType

inputType: string

この列または行の値の編集に使用されるHTML入力要素の"type"属性を取得または設定します。

デフォルトでは、このプロパティは数値列に対しては "tel"に設定され、 他のすべてのブール型以外の列に対して "text"に設定されます。"tel" 入力の型では、 モバイルデバイスはマイナス記号と小数点記号を含む数値キーパッドが表示されます。

デフォルトのままでは現在のカルチャ、デバイス、またはアプリケーションに関してうまく機能しない場合は、 このプロパティを使用してデフォルト設定を変更します。 その場合、値を"number"または"text"に変更してみてください。

isContentHtml

isContentHtml: boolean

この列または行にあるセルがプレーンテキストではなくHTMLコンテンツを含むかどうかを示す値を取得または設定します。

このプロパティは通常のセルにのみ適用されます。デフォルトでは、 行と列のヘッダセルにプレーンテキストが含まれます。 HTMLを列ヘッダまたは行ヘッダに表示するには、FlexGrid.formatItem イベントを使用してコードにセルのinnerHTMLコンテンツを設定する必要があります。

列のisReadOnlyプロパティがtrueに設定されていない限り、HTMLを表示するセルが編集できます。 デフォルトでは、エディタがHTMLマークアップを表示し、ユーザーがそれを変更できます。 列にdataMapがある場合、 ドロップダウンリストに書式設定された項目が表示され、 エディタにHTMLマークアップではなくプレーンテキストが表示されます。

このプロパティのデフォルト値はfalseです。

isInitialized

isInitialized: boolean

コンポーネントがAngularによって初期化されているかどうかを示します。 この値は、initializedイベントをトリガする直前にfalseからtrueになります。

isReadOnly

isReadOnly: boolean

列または行にあるセルを編集できるかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

isRequired

isRequired: boolean

この列または行の値が必須かどうかを決定する値を取得または設定します。

デフォルトでは、このプロパティはnullに設定されます。その場合、値は必須ですが、 非マスク文字列の列に空の文字列を含めることができます。

trueに設定する場合、値は必須であり、空の文字列を含めることができません。

falseに設定すると、null値と空の文字列を含めることができます。

isSelected

isSelected: boolean

列または行が選択されているかどうかを示す値を取得または設定します。

isVisible

isVisible: boolean

列または行が表示可能で、なおかつ折りたたまれていないかどうかを示す値を取得または設定します。

このプロパティは読み取り専用です。 列または行の表示/非表示設定を変更するには、代わりにvisible プロパティを使用してください。

mask

mask: string

この列または行の値の編集時に使用するマスクを取得または設定します。

マスクの書式は、wijmo.input.InputMask コントロールで使用される書式と同じです。

指定する場合、このマスクは format プロパティの値と互換性がある必要があります。 たとえば、'MM/dd/yyyy'と書式設定された 日付の入力にマスク'99/99/9999'を使用できます。

maxLength

maxLength: number

この列または行のセルに入力できる最大の項目数を取得または設定します。

デフォルトでは、このプロパティはnullに設定されます。この場合、任意の数の文字が許容されます。

maxWidth

maxWidth: number

列の最大幅をピクセル単位で取得または設定します。

デフォルトでは、このプロパティはnullに設定されます。これは、最大幅が設定されていないことを示します。

minWidth

minWidth: number

列の最小幅を取得または設定します。

デフォルトでは、このプロパティはnullに設定されます。これは、最小幅は0に設定されていることを示します。

multiLine

multiLine: boolean

この列または行にあるセルの内容が改行文字(\n).で ラップするかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalseです。

name

name: string

列の名前を取得または設定します。

列名を使用して、FlexGrid.getColumn メソッドで列を取得できます。

pos

pos: number

列または行の位置を(ピクセル単位で)取得します。

quickAutoSize

quickAutoSize: boolean

この列のサイズを自動変更するときにグリッドが精度よりもパフォーマンスを最適化するかどうかを決定する値を取得または設定します。

このプロパティをfalseに設定すると、この列の自動リサイズ処理が無効になります。 このプロパティをtrueに設定すると、 グリッドのwijmo.grid.Column.quickAutoSize プロパティの値に従って、この機能が有効になります。 null(デフォルト値)に設定すると、 プレーンテキストを表示するテンプレートを持たない列の機能が有効になります。

renderSize

renderSize: number

列または行のレンダリングサイズを取得または設定します。

表示/非表示設定、デフォルトサイズ、および最小/最大サイズを考慮したサイズが返されます。

renderWidth

renderWidth: number

列のレンダリング幅を取得します。

列の表示/非表示設定、デフォルトサイズ、および最小/最大サイズを考慮した幅が返されます。

size

size: number | null

列または行のサイズを取得または設定します。

このプロパティをnullまたは負の値に設定すると、親コレクションのデフォルトサイズが使用されます。

sortMemberPath

sortMemberPath: string

この列をソートするときに使用するプロパティの名前を取得または設定します。

このプロパティは、 binding property.プロパティによって指定されている値以外の値に基づいて ソートを実行する場合に使用します。 このプロパティをnullに設定すると、binding プロパティの値を使用して列がソートされます。

visible

visible: boolean

列または行が表示されているかどうかを示す値を取得または設定します。

visibleIndex

visibleIndex: number

非表示にした要素(isVisible )を無視し、親コレクション内の行または列のインデックスを取得します。

width

width: any

列の幅を取得または設定します。

列の幅は、正の数値(列幅のピクセル数を設定)、nullまたは負の数値(コレクションのデフォルトの列幅を使用)、 または'{number}*'形式の文字列(スターサイズ指定)にすることができます。

スターサイズ指定オプションを使用すると、星の前の数字に比例して 列の幅が決定されるXAMLスタイルの動的なサイズ設定が実行されます。たとえば、 グリッドに3つの列があり、それぞれの幅が"100"、"*"、"3*"に設定されている場合、最初の列の幅は100ピクセルになり、 2列目は残りスペースの1/4、3列目は残りスペースの3/4を占めます。 スターサイズ指定を使用すると、使用可能な幅いっぱいに自動的に広がる列を定義できます。

たとえば、最後の列の幅を"*"に設定すると、最後の列がグリッドの幅いっぱいに 拡張されて空スペースがなくなります。また、列の minWidth プロパティを設定して列の幅が狭くなりすぎないようにすることもできます。

wjProperty

wjProperty: string

このコンポーネントの割り当て先のプロパティの名前を取得または設定します。 デフォルト値は'columns'です。

wordWrap

wordWrap: boolean

この列または行のセルの内容を使用可能な列幅に収まれるように ラップするかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalseです。

メソッド

created

  • created(): void
  • Wijmoコンポーネントから継承されるカスタムコンポーネントを作成する場合は、このメソッドを
    オーバーライドして、通常はクラスコンストラクタで行う必要な初期化を行うことができます。 このメソッドは、Wijmoコンポーネントコンストラクタの最後の行で呼び出され、 カスタムコンポーネントのコンストラクタを宣言しなくて済むようにします。これにより、 コンストラクタのパラメータを保持したり、Wijmoコンポーネントのコンストラクタパラメータとの同期を維持する必要がなくなります。

    戻り値 void

getAlignment

  • getAlignment(row?: Row): string
  • 列または行内の項目の実際の配置を取得します。

    align プロパティがnullでない場合はその値が返されます。それ以外の場合は、列のdataType に基づいて配置が選択されます。

    引数

    • オプション row: Row

      チェックされているセルを含む行。

    戻り値 string

    セルの配置を表す文字列。

getIsRequired

  • getIsRequired(row?: Row): boolean
  • 列または行の値が必須かどうかを決定する値を取得します。

    isRequired プロパティがnullでない場合は、その値が返されます。 そうでない場合は、列の dataType に基づいて必須状態が判定されます。

    デフォルトでは、文字列の列は、 dataMap または mask; 値が設定されていない限り 必須ではありません。他のすべてのデータ型は必須です。

    引数

    • オプション row: Row

      チェックされているセルを含む行。

    戻り値 boolean

    値が必要な場合はtrue、それ以外の場合はfalse。

onGridChanged

onPropertyChanged

  • onPropertyChanged(): void
  • オーナーリストをダーティとしてマークし、オーナーグリッドを更新します。

    戻り値 void

イベント

gridChanged

gridChanged: Event<RowCol, EventArgs>

grid プロパティの値が変更されたときに発生します。