angulardevextremedx-data-grid

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


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?


Solution

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