kendo-grid, angularjs progress loading on initialization

[Enrico]

Hi,

I'm using kendo grid in angularjs and it works great so far. There is only one limitation that I've found: the grid does not show the progress loading when binding the first time to a remote service.

I'm initializing the DataSource form a controller and assigning it to a $scope variable, then binding the variable to k-data-source attribute in the HTML.

The only way I found to achieve that behavior is to do something dirty during the datasource initialization, like:

                        requestStart: function (e) {
                            kendo.ui.progress($('[kendo-grid]'), true);
                        },
                        requestEnd: function (e) {
                            kendo.ui.progress($('[kendo-grid]'), false);
                        }

Do you have any suggestion?

Thanks,
Enrico

[Atanas Korchev]

Hello Enrico,

The grid should display the progress loading without this extra code. Here is a demo which shows the same. What is different in your case?

Regards,
Atanas Korchev
Telerik

 

 

[Enrico]

Hi,

I was able to reproduce that behavior: http://dojo.telerik.com/Ifef/3

I use to assign k-data-source and k-options (plus k-rebind) in two separate variables, because I'm having a gridOptions in a MainCtrl which is inherited in sub controllers.

Can you check this scenario?

Thanks,
Enrico

[Mihai]

Hi Enrico,

I can reproduce the same behavior without Angular: http://dojo.telerik.com/UBAWI -- the progress does not initially show.  However, it shows up when the grid has a defined height, here I added style="height: 300px" to the <div>: http://dojo.telerik.com/UBAWI/2

The same happens with the Angular version, if I add the height then the progress veil shows up: http://dojo.telerik.com/Ifef/4

Another way is to pass i.e. height: 300 via the grid options, as the example from Atanas does.

Regards,
Mihai
Telerik

 

 

[Enrico]

If I define an height it's working, I could even do it this way:

div[kendo-grid] {
    height: 300px;
}

but a fixed height isn't so nice because the grid is fixed and if you change the pagination this will remain 300px and you have to scroll down the div.

If I set a min-height it does not work. Is there a way to set an initial height just for displaying the loader and then leave it auto? This will be a good solution form me.

Thanks,
Enrico

[Atanas Korchev]

Hello Enrico,

The only way to remove the height of the grid after it loads is via jQuery. Here is how: http://dojo.telerik.com/@korchev/exuso

Regards,
Atanas Korchev
Telerik

 

 

[Enrico]

Unfortunately I have scrollable: true and in that case it does not work.

http://dojo.telerik.com/eCIlE

Enrico

[Atanas Korchev]

Hello Enrico,

In that case check this demo: http://dojo.telerik.com/@korchev/exuso

Regards,
Atanas Korchev
Telerik

 

 

[Enrico]

Hi,

OK this trick seems to work.

Thank you,
Enrico