Question

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

但单击select All/ deselect All check box时，不会显示微调器/进度。即使光标也没有变成等待状态。

以下是我的代码：

$(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

我已经从您的道场代码中创建了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：在数据网格上选择所有行如何显示加载微调器gif

1 个答案: