Angular2 - How to change the size of DevExtreme load indicator in datagrid control

1
votes

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?

1
angulardevextremedx-data-grid
Where did you write this css rule? - yurzui
In the component's CSS - lohiarahul
Link doesn't work - lohiarahul

1 Answers

2
votes

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;
}