Angular2 - Как изменить размер индикатора нагрузки DevExtreme в элементе управления сеткой данных

Question

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

Выше приведена ссылка на API, предоставленная командой Devextreme. Я использовал свойство loadPanel, чтобы изменить индикатор счетчика, чтобы он указывал на пользовательский рисунок. Вот собственность, выставленная командой Devextreme

loadPanel: {
    enabled: "auto",
    height: 90,
    indicatorSrc: "",
    showIndicator: true,
    showPane: true,
    text: "Loading...",
    width: 200
}

который я изменил на что-то вроде,

loadPanel: {
    enabled: "auto",
    height: 90,
    indicatorSrc: "images/MyCustom.gif",
    showIndicator: true,
    showPane: false,
    text: "Loading...",
    width: 200
}

Однако GIF выглядит сжатым, а свойства высоты и ширины предназначены только для размера области окна вокруг него. Попытка изменить размер, установив стиль CSS для класса индикатора, но не сработала

/deep/ .dx-loadindicator-content {
    width: 200px;
    height: 200px;
}

Может ли кто-нибудь достичь этого?

Answer 1

loadPanel.width а также loadPanel.height опции напрямую связаны с геометрией панели нагрузки. И они не влияют на размер иконки. Но вы можете настроить размер значков с помощью CSS, как вы указали в вопросе. Просто используйте следующий селектор CSS:

/deep/ .dx-datagrid .dx-loadindicator {
  width: 64px;
  height: 64px;
}