Showing loading when grid is rendering

[Benjamin]

My Kendo grid is rendered as shown is code below, I am thinking as it was not using ajax thus the loading is not showing, I would like to check how do I make the loading to appear when the grid is being rendering

 

 <script type="text/javascript">
        var contactData = @Json.Serialize(Model._gridContact);
 $(document).ready(function() {
 $("#kendo-table").kendoGrid({
                dataSource: {
                    data: contactData,
                    schema: {
                        model: {
                            id: "id",
                        },
                        parse: function(data) {
                            data.forEach((item) => {
                                var strUpdatedDate = item.updatedDate;
                                item.updatedDate = kendo.parseDate(strUpdatedDate);
                            });
                            return data;
                        }
                    }
                },
                sortable: true,
                scrollable: false,
               
                noRecords: {
                    template: "No record found."
                },
                dataBound: onDataBound,
                columns: [
                    { field: "salutation", title: "Salutation", width: "130px" },
                    { field: "fullName", title: "Full Name", template: '<a class="fw-bold"  href="' + contactDetailLink + '/\#= id#\/1">#= fullName#</a>', width: "188px" },
                    { field: "status", title: "Status", width: "115px", template: userStatusMarkup },
                    { field: "contactType", title: "Contact Type", width: "108px" },                   
                    { field: "primaryEmailContact", title: "Primary Email Contact", template: '<a class="fw-bold d-inline pe-0"  href="mailto:#= primaryEmailContact#" target="_blank" rel="noopener">#= primaryEmailContact#</a>', width: "248px" },
                    { field: "businessPhone", title: "Business Phone", width: "180px" },
                    { field: "phoneExtension", title: "Business Phone Extension", width: "265px" },
                    { field: "mobilePhone", title: "Mobile Phone", width: "180px" },
                    { field: "updatedDate", title: "Last Updated Date", width: "188px", format: "{0:d MMM yyyy}" }
                ],
                
                pageable: {
                    buttonCount: buttonCount,
                    pageSizes: false,
                    messages: {
                        display: "" // set it to an empty string
                    }
                }
            });

            $("#kendo-table").data("kendoGrid").dataSource.pageSize(10);
});
</script>

[Peter Milchev]

Hi Benjamin, when binding to local data, the rendering is quite fast, so it does not make much sense to show a loading icon that in the best case would blink and disappear. 

In this example, you can see how quickly the grid renders initially and after changing the page size: https://dojo.telerik.com/@pmilchev/IBEDurOC 

[Benjamin]

for my case i am loading about 4000 rows of record. From what i tested, it took around 5 - 8 seconds to load, thus i am asking if the displaying of loading icon is possible for binding of local data.

[Peter Milchev]

The example shared in my previous reply has 100 000 items and loads instantly. Please share a dojo example where we can see how you are obtaining the items, loading them in the grid and what is the grid's configuration. That would allow us to see where the delay happens and give you more specific suggestions.