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

Bug: Progress bar not properly shown for grid. Grid is not blocked.

4 Answers 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JamesD
Top achievements
Rank 1
JamesD asked on 23 Nov 2018, 12:44 PM

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);
but must be for whole grid
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

Sort by
0
JamesD
Top achievements
Rank 1
answered on 23 Nov 2018, 12:45 PM
<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
     
 
</head>
<body>
        <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                            },
                            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>
0
Georgi
Telerik team
answered on 27 Nov 2018, 11:19 AM
Hi James,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
JamesD
Top achievements
Rank 1
answered on 27 Nov 2018, 04:52 PM

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.

0
Georgi
Telerik team
answered on 29 Nov 2018, 01:06 PM
Hi James,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
JamesD
Top achievements
Rank 1
Answers by
JamesD
Top achievements
Rank 1
Georgi
Telerik team
Share this question
or