https://js.devexpress.com/Documentation/16_2/ApiReference/UI_Widgets/dxDataGrid/
Above is the API reference provided by the Devextreme team. I have used the loadPanel property to change the spinner indicator to point to a custom gif. Here is the property exposed by the Devextreme team
loadPanel: {
enabled: "auto",
height: 90,
indicatorSrc: "",
showIndicator: true,
showPane: true,
text: "Loading...",
width: 200
}
which I have changed to something like,
loadPanel: {
enabled: "auto",
height: 90,
indicatorSrc: "images/MyCustom.gif",
showIndicator: true,
showPane: false,
text: "Loading...",
width: 200
}
However, the GIF appears shrunk and the height and width properties are only for the size of the box pane around it. Tried to change the size by setting a CSS style for the indicator class but didn't work
/deep/ .dx-loadindicator-content {
width: 200px;
height: 200px;
}
Could anyone achieve this?
The loadPanel.width
and loadPanel.height
options are directly connected with load panel geometry. And they don't affect an icon size. But you can customize icon size via CSS as you pointed in the question. Just use the following css selector:
/deep/ .dx-datagrid .dx-loadindicator {
width: 64px;
height: 64px;
}