Kendo-ui: 在数据网格上 Select 所有行如何显示加载微调器 gif

Question

我试图在用户使用 kendo.ui.progress($("#grid"), true) 选择 Kendo Grid 中的所有复选框时显示 progress/spinner，如下所示。

但是单击 select All/ deselect All check box 时 spinner/progress 没有显示。甚至光标也没有变成等待状态。

下面是我的代码：

$(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);
        });
    });

你能帮我弄清楚我做错了什么吗。

Answer 1

我用你的 dojo 代码创建了一个 JS Fiddle。

这是我修改过的代码部分。

....... 
..........  
$('#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 = {};
...........
.......

Kendo-ui: 在数据网格上 Select 所有行如何显示加载微调器 gif

Kendo-ui: On Data Grid Select All rows how to show loading spinner gif

checkbox

jquery

selectall

kendo-ui

kendo-grid