Loading icon for Kendo UI grid

Question

I'm newbie with KendoUI and I've got some troubles with the progress image that should be appear meanwhile the loading of the data.

This is my 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>

Starting from which I have declared the following CSS and controller:

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

CONTROLLER:

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

I found on the web that in order to have the progress icon during the loading data, I have to use the kendo.ui.progress($("#gridID"), status),but it doesn't work in my case.

I tried also to change the position of container of my grid ( as suggested in some posts on the web), but I reached any results.

Is there anyone of you that could give me a suggestion?

Thank you in advance

Deby

Do you want to show a probress or just a spinning wheel while loading is enough? If so, check [this](http://stackoverflow.com/a/17794634/1802671) other question/answer — OnaBai, Aug 01 '14 at 14:41
The spinning wheel is what I want. I don't know how I could apply your suggestion, because in my dataSource is declared within the gridOption only as new kendo.data.DataSource, but the actual loading of the data is done within the populateRole method, shown above: 'public populateRole(data) { var dataSource = new kendo.data.DataSource({ data: data }); dataSource.read(); this.gridOptions.dataSource.data(dataSource.data()); }' How can I apply our suggestion in this case? — Deby, Aug 01 '14 at 14:57
Lets see if I understand what you are doing since it seems pretty complicate to me. You are creating a fake DataSource and then when calling `GetRoles` is when you actually create the _good_ DataSource. Correct? Did you consider setting `autoBind` to `false` in the `Grid` definition so it will not load anything until you invoke `read` on the DataSource? — OnaBai, Aug 01 '14 at 16:25
@OneBai: it's not a fake DataSource. I inizitalize the DataSource of the grid within the gridOption, then I proceed with the loading of the data within the GetRoles methods and I attach the loaded data to the DataSource of the grid with the command 'this.gridOptions.dataSource.data(dataSource.data())'. I tried with the 'autobind = false', but anything changes. — Deby, Aug 04 '14 at 07:26
Just a doubt: in order to fix the header of my site always on top, I define the css of my header panel as follow: `position: fixed; top: 0; z-index: 10`. Could be this the reason why I don't see the spinning wheel? — Deby, Aug 04 '14 at 07:35

score 0 · Answer 1 · answered Aug 05 '14 at 07:14

I found the problem!

I instatiated the kendo grid within the constructor of my class, such as below:

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

        $scope.vm = this;

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

        this.GetRoles();

    }

Removing the declaration from the constructor and keeping the method kendo.ui.progress($(NameElement), state) as shown in the post above and everything goes fine!

Thank you so much for your help!

Deby

score -1 · Answer 2 · answered Aug 01 '14 at 17:22

-1

I have used the code below to toggle the loading icon on a kendo grid before.

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

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

answered Aug 01 '14 at 17:22

Jonathan Buchanan

848
4
6

Thank you Jonathan; I tried your suggestion, but it doesn't work! :( – Deby Aug 04 '14 at 09:05

Loading icon for Kendo UI grid

2 Answers2