Add custom spinner image for the Devextreme Datagrid header filter

There is a loadPanel configuration for the datagrid control by devextreme.

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

However, I want the same configurability for the spinner inside the header filter of the columns in the data grid for consistency.

I need to use a custom gif and remove the default panel and loading text thats been shown Does anyone know how to do it?

Solution

I'm afraid there isn't built-in functionality you mentioned. Anyway, you can customize it using CSS.

In this case you have to inspect html markup and change styles that you need.

In this sample I've changed the following styles to customize loading indicator in header filter:

/* 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%;
}

And yes, I use jQuery approach here. But it doesn't make sense, cause in Angular2 app you have to override the same styles.