kendo grid loading symbol with records count

[Palanisamy]

Hi,

Please find the attached file for loading symbol with records count in kendo grid while doing virtual scroll. Kindly provide some ideas or samples for this.

[Dimo]

Hi Palanisamy,

The desired behavior is not supported out-of-the-box, but I will give you some hints how to achieve it.

1) use the requestStart event of the Grid dataSource to obtain reference to the Grid's built-in loading mask (loading indicator). Use setTimeout.

function onRequestStart () {
    setTimeout(function () {
        var loadingMask = $("#grid").find(".k-loading-mask");
    });
}

2) The loading mask's HTML structure is the following:

<div class="k-loading-mask">
   <span class="k-loading-text">Loading...</span>
   <div class="k-loading-image"></div>
   <div class="k-loading-color"></div>
</div>

The "k-loading-text" element's content is moved outside the screen, so it is not visible. In case you need to bring it back, override the negative text indent style:

.k-loading-text {
    text-indent: -4000px;
    text-align: center;
}

div.k-loading-image displays the animated GIF. div.k-loading-color displays the semi-transparent background color.

3) Use custom Javascript and custom CSS code to change the loading indicator's markup and styling to achieve the desired behavior. You will need some DataSource API methods to retrieve the required information, e.g.

http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#methods-page

http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#methods-pageSize

http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#methods-total

Regards,
Dimo
Telerik

[Palanisamy]

I have tried your option whichever you mentioned above. So please provide another solution.I need to show loading symbol with text outside the kendo grid. Kindly help me out.

[Palanisamy]

Hi Dimo,

Please find the attached document for reference. I need Kendo grid with loading symbol and text in the bottom. I mean aoutside the grid. Kindly see the document and help me out.

[Dimo]

Hi Palanisamy,

If the desired loading panel should reside outside the Grid, and should have custom appearance, then the exact HTML and CSS implementation for it depends entirely on your preferences. What I can do for you in this case is provide some information, which is relevant to Kendo UI and which you will need:

- your loading panel can be displayed in the requestStart event of the Grid dataSouce
- it should be hidden in the Grid's dataBound event
- whatever dataSource-related information you need to place inside the loading panel, you can retrieve via the Grid dataSource API.

Please check the following documentation resources:

- how to get the Grid dataSource instance
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-dataSource

- requestStart event
http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#events-requestStart

- dataBound event
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

- dataSource API - use methods such as page(), total(), totalPages(), etc
http://docs.telerik.com/KENDO-UI/api/javascript/data/datasource#events-requestStart

You may also want to hide the built-in Grid loading panel. This can be achieved with custom CSS:

.k-grid .k-loading-panel
{
   visibility: hidden;
}

Regards,
Dimo
Telerik