This is a migrated thread and some comments may be shown as answers.

kendo grid loading symbol with records count

4 Answers 220 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Palanisamy
Top achievements
Rank 1
Palanisamy asked on 24 Sep 2015, 09:23 AM

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.

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Sep 2015, 06:51 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Palanisamy
Top achievements
Rank 1
answered on 29 Sep 2015, 11:51 AM
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.
0
Palanisamy
Top achievements
Rank 1
answered on 29 Sep 2015, 12:06 PM

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.

0
Dimo
Telerik team
answered on 01 Oct 2015, 06:36 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Palanisamy
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Palanisamy
Top achievements
Rank 1
Share this question
or