kendoui网格全选

Question

我，使用 MVC + kendoui 网格，这是我的代码：

---

型号

---

      public class User
         {
        [StringLength(9)]       
        public int UserId { get; set; }

        [StringLength(50)]        
        public string UserName { get; set; }

        public bool IsSelected { get; set; }
}

cshtml

@model IEnumerable<PoliciesHaglasha.Models.User>

@{    
    Layout = null;
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    var users = MvcHtmlString.Create(serializer.Serialize(Model));
}

         JsonUsers = @users;

        var  UsersSource = new kendo.data.DataSource({
            pageSize: 5,
            data: JsonUsers,            
            autoSync: true,
            schema: {
                model: {
                    id: "UserId",
                    fields: {
                        UserId: { type: "number" ,editable: false, nullable: false },                      
                        UserName: { type: "string" , editable: false, nullable: false }                     
                    }
                }
            }
        });     
           $("#gridPolisot").kendoGrid({
            dataSource: PolisotSource,                        
            editable: true,
            scrollable: false,
            selectable: "row",
            sortable: true,            
            reorderable: true,           
            toolbar: [{ name: "save", text: "save" }],
            columns: [ 
                    { field:"IsSelected", title: "<input type='checkbox' id='chkSelectAll'>", width: "34px" ,template: "<input  type='checkbox' #= IsSelected ? checked='checked' : '' #/>"},                                    
                    { field:"UserId", title: "User Id", width: "20px", attributes: {"class": "KendoUITD"}},
                    { field:"UserName",title:"User Name",  width: "50px", attributes: {"class": "KendoUITD"}},              
                ],         
            },                         
        });

我的问题是：

1) 如何使全选标题复选框起作用？

2) 当我选中/取消选中一个复选框时，它将返回到服务器

谢谢，

Answer 1

1)你应该使用grid的headerTemplate配置选项：

headerTemplate: "<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)'/>"

然后在页面中添加“checkAll”功能：

function checkAll(ele) {
    var state = $(ele).is(':checked');
    var grid = $('#gridPolisot').data('kendoGrid');
    $.each(grid.dataSource.view(), function () {
        if (this['IsSelected'] != state) 
            this.dirty=true;
        this['IsSelected'] = state;
    });
    grid.refresh();
}

2) 我不确定我是否正确理解您想要实现的目标，但是如果您需要将上述函数的更改与服务器同步，那么您也可以调用网格 saveChanges method.