为Devextreme Datagrid标头过滤器添加自定义微调器图像

Question

devextreme有一个数据网格控件的loadPanel配置。

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

但是，为了保持一致，我希望数据网格中列的标题过滤器内的微调器具有相同的可配置性。

我需要使用自定义gif并删除默认面板并加载已显示的文本 有谁知道怎么做？

Answer 1

我担心你提到的内置功能没有。无论如何，您可以使用CSS自定义它。

在这种情况下，您必须检查html标记并更改所需的样式。

在此sample中，我更改了以下样式以自定义标题过滤器中的加载指示符：

/* 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方法。但它没有意义，因为在Angular2应用程序中你必须覆盖相同的样式。