Check/Uncheck Telerik Kendo 网格中的功能无法正常工作

Question

我在我的应用程序中使用 Telerik kendo 网格。我正在尝试在网格中实现 select-all 功能。网格的 header 中有一个复选框。当我点击 header 复选框时，行内的复选框将被自动选中，反之亦然。

我的 kendo 网格代码是：

@(Html.Kendo().Grid<BulkInsertUpdate.Models.Product>()
      .Name("ProductGrid")
      .Columns(col =>
      {
          col.Template(m => { }).ClientTemplate("<input type='checkbox' id='chkSelect_#= ProductID#' userId='#= ProductID#' class='box' />").Width(10)
          //col.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='chkSelect_#= ProductID#' />")
          //col.Template(@<text><input class="box" id="chkSelect" name="chkSelect" type="checkbox" /></text>)
                      .HeaderTemplate("<input type='checkbox' id='checkAll' />").Width(10);
          col.Bound(m => m.ProductID).Hidden(true);
          col.Bound(m => m.ProductName).Width(155).Title("Product Name");
          col.Command(cmd =>
          {
              cmd.Destroy();
          }).Width(20);
      })
      //.ToolBar(toolbar => toolbar.Create())
      .ToolBar(toolbar =>
      {
          toolbar.Create();
          //toolbar.Save();
          //toolbar.Custom().Text("Select All")
          //    .HtmlAttributes(new { onclick = "deleteSelection(event)" });
      })
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(300))
      .Filterable(filterable => filterable
          .Extra(false)
          .Operators(op => op.ForString(str => str.Clear()
              .StartsWith("Starts with")
              .IsEqualTo("Is equal to")
              .IsNotEqualTo("Is not equal to")
              .Contains("Contains")
              ))
      )
      .Resizable(re => re.Columns(false))
      .Reorderable(reo => reo.Columns(false))
      .DataSource(ds => ds.Ajax()
          .Batch(true)
          .Events(events => events.Error("error_handler"))
          .Model(mod =>
          {
              mod.Id(com => com.ProductID);
          })
          .Read(read => read.Action("Product_Read", "Product"))
      //  .Update(update => update.Action("Product_Update", "Product"))
      //.Destroy(destroy => destroy.Action("ComponentType_Delete", "ComponentType"))
      ))

和样式表：

<style type="text/css">
    .box {
        background-color: blueviolet;
    }
    </style>

我试过两种方法。 1. 第一种方式我的 java 脚本是这样的：

<script>
$(document).ready(function () {
        $('#checkAll').click(function () {
            if ($(this).attr('checked')) {
                $("#ProductGrid tbody input:checkbox").attr("checked", this.checked);
            } else {
                $("#ProductGrid tbody input:checkbox").removeAttr("checked");
            }
        });
    });
</script>

但是一直在执行else部分

我使用.box的第二种方式class我已经提到了。

脚本如下：

<script>
$(document).ready(function () {
       $("#checkAll").click(function () {
           $(".box").attr("checked", $(this).attr("checked") ? true : false);
        });
    });
</script>

这里也发生了同样的事情。我正在使用 Northwind 数据库和 MVC 5。

我们将感激地接受任何帮助。

谢谢

帕萨

Answer 1

我们也在自己的应用程序中做了这个，我们在 header 中添加了 class：$('.calculation-selection-checkbox')

并在此 class 上附加了一个点击事件，该事件将转到此事件：

 projects.handleCheckBoxHeaderClicked = function (clickEvent) {
    var checkBoxes = $('.calculation-selection-checkbox');
    var element = $(this.children[0]);
    var value = element.html();
    if (value.charCodeAt(0) === 9745) {
        localStorageManager.removeAll();
        checkBoxes.prop('checked', false);
        element.html('&#x2610;');
    } else {
        localStorageManager.addAll();
        checkBoxes.prop('checked', true);
        element.html('&#x2611;');
    }
};

我们根据应用程序将单独复选框后面的所有隐藏 ID 加载到 localstorage/sessionstorage 中，然后将该列表作为表单数据减去调用 :)

编辑：

这就是我们在网格中创建复选框列的方式：

columns.Template(@<text>
<label class="checkbox-radiobutton">

    <input type="checkbox" data-id="@item.CalculationId" name="selectThisProject" 
class="checkbox calculation-selection-checkbox checkbox-radiobutton"><span></span></label>  
</text>).Title("&#x2610;")
.HeaderHtmlAttributes(new { @class = "check-box-header" }).Width("30px");

对于捕获事件，我们这样做：

   projects.initializeCheckBoxes = function () {
        if (projects.allSelected) {
            var isChecked = (projects.allSelected === "true");
            var checkBoxes = $('.calculation-selection-checkbox');
            var i;
            var element = $('.check-box-header')[0];
            checkBoxes.prop('checked', isChecked);
            var checkBox = $('.checkbox');
            for (i = 0; i < checkBox.length; i++) {
                var id = $(checkBox[i]).data('id');
                if (!localStorageManager.exists(id)) {
                    $(checkBox[i]).prop('checked', false);
                } else if (localStorageManager.exists(id)) {
                    $(checkBox[i]).prop('checked', true);
                    $("#EdreamsPanel").removeClass("hidden");
                }

            }
            if (isChecked)
                $(element).html('<span class="k-link">&#x2611;</span>');
        }
    };

用于初始化和捕获 header属性单击：

 projects.handleCheckBoxHeaderClicked = function (clickEvent) {
        var checkBoxes = $('.calculation-selection-checkbox');
        var element = $(this.children[0]);
        var value = element.html();
        if (value.charCodeAt(0) === 9745) {
            localStorageManager.removeAll();
            checkBoxes.prop('checked', false);
            element.html('&#x2610;');
        } else {
            localStorageManager.addAll();
            checkBoxes.prop('checked', true);
            element.html('&#x2611;');
        }
    };

希望对您有所帮助，如果您需要更多信息，请询问

Check/Uncheck Telerik Kendo 网格中的功能无法正常工作

Check/Uncheck functionality inside Telerik Kendo grid is not working

model-view-controller

checkbox

jquery

telerik

kendo-grid