1

I am trying to show progress/spinner when user selects all the check boxes in the Kendo Grid using kendo.ui.progress($("#grid"), true) as shown below.

But the spinner/progress is not getting displayed when the select All/ deselect All check box is clicked. Even the cursor is not getting turned into wait status.

Below is my code:

$(document).ready(function () {
        $("#grid").on("click", ".row-checkbox", selectRow);
        $('#checkAllBoxes').change(function (ev) {
            kendo.ui.progress($("#grid"), true);
            $('html').css("cursor", "wait");
            var checked = ev.target.checked;
            $('.row-checkbox').each(function (idx, item) {
                if (checked) {
                    if (!($(item).closest('tr').is('.k-state-selected'))) {
                        $(item).click();
                    }
                } else {
                    if ($(item).closest('tr').is('.k-state-selected')) {
                        $(item).click();
                    }
                }
            });
            $('html').css("cursor", "default");
            kendo.ui.progress($("#grid"), false);
        });
    });

Could you help me to figure out what i am doing wrong.

Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • Can you reproduce your issue in a http://dojo.telerik.com/ ?? Or at least put all your code in the question, like `selectRow` for example. – DontVoteMeDown Sep 25 '17 at 11:48
  • I am working on the same example http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/select-deselect-all-checkbox, with the pageSize = 100 and above modified function to show kendo progress. –  Sep 25 '17 at 13:54
  • Ok, but its still difficult to get your problem into the page's code. In that example, there is a button called *"Open in Dojo"*, can you add your code into that demo and post here for us ? – DontVoteMeDown Sep 25 '17 at 13:57
  • you could find the code here http://dojo.telerik.com/@mymails/eQUFIh. i have used the same code in http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/select-deselect-all-checkbox to learn. –  Sep 25 '17 at 14:21

1 Answers1

0

I have created a JS Fiddle out of your dojo code.

Here is the section of the code which I have modified.

....... 
..........  
$('#header-chb').change(function(ev) {
            var checked = ev.target.checked;

            /** Added this block of code **/
            kendo.ui.progress($("#grid"), true);
            setTimeout(function(){
                kendo.ui.progress($("#grid"), false);
            }, 1500); 
            /*******************************************/   

            $('.row-checkbox').each(function (idx, item) {
                setTimeout(function () {

                    if (checked) {
                        if (!($(item).closest('tr').is('.k-state-selected'))) {
                            $(item).click();
                        }
                    } else {
                        if ($(item).closest('tr').is('.k-state-selected')) {
                            $(item).click();
                        }
                    }
                }, 500);
          });
          //I commented out the below line
          //kendo.ui.progress($("#grid"), false);
        });
      });

      var checkedIds = {};
...........
.......
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • Let me know if you have any issues – Rahul Gupta Sep 26 '17 at 05:08
  • Thanks Rahul! I have not yet tried your solution. As I am new to JQuery and kendo, could you help me to understand the following: 1. Why the progress is not working with the code that I posted? 2. in code you posted, if there are many items in the grid for example >200, the progress (spinner) will be stopped after 1.5 seconds, right? 3. why to have timer inside for each .row-checkbox? –  Sep 27 '17 at 01:01
  • My friend, I would suggest that you should experiment with the code the way you want, and that's the best way to explore more about the things. And even more, you would get to learn a lot when you try to do the things on your own :) – Rahul Gupta Sep 27 '17 at 04:27
  • Sure, Thanks Rahul :) –  Sep 27 '17 at 13:55