Question

我是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），但它在我的情况下不起作用。

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

你们中有谁能给我一个建议吗？

提前谢谢

代比

Answer 1

我发现了问题！

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

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

        $scope.vm = this;

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

        this.GetRoles();

    }

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

非常感谢你的帮助！

代比

Answer 2

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

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

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

加载Kendo UI网格的图标

2 个答案: