Dataludi Gridは基本的にhtml5 canvasを基盤に実行される。 最新のブラウザーでcanvasは相当な程度のrendering性能を提供している。 しかし、Data Gridの基本的な要求事項が業務データを様々な形で表現し、扱うことであるので、 renderingのための多くの準備が必要となる。 従って、ユーザーに最大限に自然なインターフェイスを提供するためには不要な描画を最小限にしなければならない。
Dataludi Gridは様々な要求事項が具現できるよう、 いろんな程度と方法でデータが表現できる機能たちを提供しているが、 下で提示する説明によって要求事項にある一番適合な機能を選択して使わなければならない。
グリッドbodyの領域でデータセルが表示される前にまず下位の領域である背景や境界線が描画されることになる。 まず、グリッドの本体の地が描画されて、bodyにbackgroundスタイルが設定された場合bodyの領域に地が描画される。 また、rowStylesやrowRangeStylesにbackgroundやborderBottom等が設定された場合、 データセルが含まれた行の地や境界線たちが描画されることができる。 そして最後にカラムスタイルや他の動的スタイルにbackgroundが設定された場合データセルの地を描画する。
つまり、地の描画が重なることもあり、不要な重ねならパフォーマンスを落とすことになる。 従って、上で言及したすべての領域のbackgroundの値は基本的にnullで初期化されているが、 地の色の表示が業務的に意味のある場合だけ適当な領域で設定しなければならない。
データセルが描画される前にセルたちを含むデータ行が先に描画されるが、 GridBody.rowStylesやGridBody.fixedRowStylesに指定したスタイルたちが基本に適用される。 また、行や行の範囲毎に違う背景色や境界線を描画しなければならなかったらGridBody.rowRangeStylesが設定できる。 上で説明したようにスタイルの値たちは基本的にnullで設定されているので行の描画が実行されない。 不要な行の描画は当然避けなければならないが、 行に含まれたすべてのセルたちの背景色を同一の色で描画する必要がある時には必ずセルの描画の代わりに行の描画をしなければならない。
データセル一つを描画する前にいくつかの段階のスタイルセット設定を経ることになる。 まずGridBody.cellStylesに指定したスタイルたちがデータセルたちの基本スタイルになる。 つまり、cellStylesに指定したものたちでは満足できない状況ならカラムスタイルや動的スタイルたちを指定しなくてもいい。 肯定領域のセルたちはGridBody.fixedCellStylesに設定された物たちが適用される。
次に、各カラムに指定されたGridColumn.stylesが適用されて、 GridBody.rowDynamicStyles、GridBody.cellDynamicStyles及びカラムの動的スタイル順に 適用される。そして最後にCellStyleで指定されたスタイル値たちが適用される。 このとき、最後に適用されたスタイルの値たちがデータセルに設定されて、その値たちがデータセルの描画に使われる。 つまり、スタイルのプロパティーの値がundefinedではない明示的な値に設定されたら、以前の段階で設定された値は無視される。 上で言及した段階すべてで明示的な設定がなかったらグリッド内部で指定された基本スタイルシートで値を取得してくることになる。
実際に、スタイルの値を探す経路は上で説明した適用の段階とは反対である。 従って、適用の順が遅い段階で明示的にスタイルの値を指定することがパフォーマンスには役に立てる。