Kendo UI 网格的加载图标答案

【问题标题】：Loading icon for Kendo UI gridKendo UI 网格的加载图标
【发布时间】：2023-03-12 08:00:02
【问题描述】：

我是 KendoUI 的新手，我在加载数据时应该出现的进度图像遇到了一些问题。

这是我的 HTML：

<div>
    <article >
        <h5>Anagrafica</h5>
    </article>
    <div id="gridRolesT" class="dcmo_grid"
         kendo-grid="gridRoles"
         k-options="vm.gridOptions"
         k-on-change="vm.onSelection(kendoEvent)">
    </div>
</div>

从我声明以下 CSS 和控制器开始：

CSS：

.dcmo_grid {
margin: 10px 0px;
}

/*style for selected item*/
.dcmo_grid table tr.k-state-selected
{
    background: #428bca;
    color: #fff;
}

/*style for selected pages*/
.dcmo_grid .k-pager-numbers span.k-state-selected
{
    background: #428bca;
    color: #fff;
    border-color: #428bca;
}

控制器：

constructor(private $scope) {
        super($scope);

        $scope.vm = this;

        $("#gridRolesT").kendoGrid();

        this.GetRoles();

    }

 gridOptions = {
        dataSource: new kendo.data.DataSource(
            {
                pageSize: 5
            })
        ,
        columns: [
            { field: 'IdRole', title: 'Role' },
            { field: 'DsRole', title: 'Description' }
        ],
        pageable: {
            pageSizes: true
        },
        filterable: true,
        sortable: true,
        selectable: "row",
        scrollable: false
}

public GetRoles() {
        var self = this;

        kendo.ui.progress($("#gridRolesT"), true);
        this.AppController.AdministrationService.GetRoles()
            .success(function (data) {
                self.populateRole(data);
               kendo.ui.progress($("#gridRolesT"), false);
            })
            .error(function (data) {
               kendo.ui.progress($("#gridRolesT"), false);
                self.ErrorMessage = "Errore caricamento dati";
            });
    }

我在网上发现，为了在加载数据期间有进度图标，我必须使用 kendo.ui.progress($("#gridID"), status),但在我的情况下它不起作用。

我还尝试更改网格容器的位置（如网络上一些帖子中所建议的那样），但我得到了任何结果。

有没有人可以给我一个建议？

提前谢谢你

代比

【问题讨论】：

在加载足够的情况下，您想展示一个probres 还是一个纺车？如果是这样，请检查this其他问题/答案
纺车是我想要的。我不知道如何应用您的建议，因为在我的 dataSource 中，gridOption 中仅将其声明为新的 kendo.data.DataSource，但数据的实际加载是在 populateRole 方法中完成的，如上所示：'public populateRole (data) { var dataSource = new kendo.data.DataSource({ data: data });数据源.read(); this.gridOptions.dataSource.data(dataSource.data()); }' 在这种情况下我该如何应用我们的建议？
让我们看看我是否理解你在做什么，因为这对我来说似乎很复杂。您正在创建一个假数据源，然后在调用GetRoles 时是您实际创建 good 数据源的时间。正确的？您是否考虑在Grid 定义中将autoBind 设置为false，以便在您在DataSource 上调用read 之前它不会加载任何内容？
你想在剑道网格中显示图像吗？
@OneBai：这不是假数据源。我在 gridOption 中初始化网格的 DataSource，然后在 GetRoles 方法中继续加载数据，并使用命令“this.gridOptions.dataSource.data(dataSource.data)”将加载的数据附加到网格的 DataSource。数据（））'。我尝试使用“autobind = false”，但一切都发生了变化。

标签： kendo-ui kendo-grid

【解决方案1】：

我发现了问题！

我在我的类的构造函数中设置了剑道网格，如下所示：

constructor(private $scope) {
        super($scope);

        $scope.vm = this;

        $("#gridRolesT").kendoGrid();

        this.GetRoles();

    }

从构造函数中删除声明并保留方法kendo.ui.progress($(NameElement), state)，如上面的帖子所示，一切顺利！

非常感谢您的帮助！

代比

【讨论】：

【解决方案2】：

我之前使用下面的代码来切换剑道网格上的加载图标。

Shows loading image
$('#myGrid').data('kendoGrid')._progress(1);

Hides loading image
$('#myGrid').data('kendoGrid')._progress(0);

【讨论】：

谢谢乔纳森；我试过你的建议，但它不起作用！ :(