Devextreme Datagridヘッダーフィルタのカスタムスピナーイメージを追加します。

Question

devextremeによるDataGridコントロールのloadPanel構成があります。

https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDataGrid/Configuration/loadPanel/

しかし、私は一貫性のために、データグリッド内の列のヘッダフィルタ内部スピナーのための同じコンフィギュレーションを望みます。

カスタムGIFを使用し、表示されているデフォルトのパネルと読み込みテキストを削除する必要があります 誰かがそれを行う方法を知っていますか？

Answer 1

あなたが言及している組み込み機能はありません。とにかく、CSSを使ってカスタマイズすることができます。

この場合、htmlマークアップを調べて、必要なスタイルを変更する必要があります。

/* hide 'Loading...' message */ 
.dx-header-filter-menu .dx-scrollview-scrollbottom-text { 
    display: none; 
} 

/* hide default loading icon */ 
.dx-header-filter-menu .dx-loadindicator-icon .dx-loadindicator-segment { 
    display: none; 
} 

/* use custom loading icon */ 
.dx-header-filter-menu .dx-loadindicator-icon { 
    background: url('https://preloaders.net/preloaders/3/Chasing%20arrows.gif') no-repeat 0 0; 
    width: 28px; 
    height: 28px; 
    background-size: 100% 100%; 
} 

そして、はい、私はここでjQueryのアプローチを使用します。

このsampleでは、私は、ヘッダフィルタにおける負荷インジケータをカスタマイズするには、次のスタイルを変更しました。しかし、Angular2アプリで同じスタイルをオーバーライドする必要があるため、理にかなっていません。