Hi,
I have 2 issues with grid and LoadingBar I think both of them are related.
1. I'm using grid to display data and have ability to trigger update manually, and if grid have scroll, then i click Refresh button.
Progress icon shown and data refresh takes some time i can scroll down and now grid is not locked :( Loading bar not visible any more.
2. If I dynamicly add grid on page then Progress bar not shown, but if i click refresh it is visible, it looks like that during first show grid is not yet fully initialized and progress cannot be shown.
I have attached sample how to reproduce this.
1. Before Refresh Click disconnect internet, because refresh process needs much time.
or before refresh you need to replace following value
to
but i do not have success with it, so just disconnect or disable network :)
2. Try to scroll down, now grid not disabled.
The problem because loading shown for
$("#grid .k-grid-content")kendo.ui.progress($('#grid .k-grid-content'), true); kendo.ui.progress($('#grid'), true);- yes it is disabled columns too, but during refresh user should not be able to do anything with columns.
4 Answers, 1 is accepted
Rank 1
<!DOCTYPE html><html><head> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script> </head><body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { }, schema: { model: { fields: { OrderID: { type: "number" }, Freight: { type: "number" }, ShipName: { type: "string" }, OrderDate: { type: "date" }, ShipCity: { type: "string" } } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true }, height: 550, filterable: true, sortable: true, pageable: true, columns: [{ field:"OrderID", filterable: false }, "Freight", { field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}" }, { field: "ShipName", title: "Ship Name" }, { field: "ShipCity", title: "Ship City" } ] }); $("#textButton").kendoButton({ click: onRefreshClick }); function onRefreshClick() { var kendoGrid = $("#grid").data("kendoGrid"); kendoGrid.refresh(); kendoGrid.dataSource.read(); } }); </script></div> <button id="textButton" type="button">Refresh</button> </body></html>
Thanks for the provided sample.
I have modified the dataSource to loop for few seconds so that the progress bar is shown for longer and tested the described behavior, However, when the progress bar is displayed, the content of the grid is disable and I not able to scroll or do any interaction with the grid. Please refer to the following screencast for better understanding:
Below you will find the sample I used for testing, please examine it and let me know what I am missing:
Regards,
Georgi
Progress Telerik
Rank 1
Hello, thanks for reply.
Your sample is not correct, because it is block whole page in your sample you block grid using sleep not buy progress bar.
Try to disable network adapter and click refresh, this will emulate slow networking.
I have tested this issue in Firefox and in IE and i can reproduce it in both browsers.
Indeed the loop blocks the thread and any interaction with the page is not possible. I was able to replicate the described behavior. However, it occurs since we display the loading panel over the table - not over the wrapper div element. No disabling the whole grid is intended as the user should be allowed to use some of the components of the widget although the data is not yet loaded (for example pager).
As a workaround I can suggest you to set the pointer-events of the wrapper div to none within the requestEnd event handler and then remove the style when dataBound is triggered.
e.g.
$("#grid").kendoGrid({ dataBound:function(){ $('#grid').css('pointer-events','auto') }, dataSource: { requestStart:function(){ $('#grid').css('pointer-events','none') },...Below you will find a sample which demonstrates the above approach:
Regards,
Georgi
Progress Telerik