kendoui grid全选

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)您应该使用网格的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)我不确定我是否正确理解你想要实现什么,但是如果你需要将上述函数的更改与服务器同步,那么你也可以调用grid saveChanges方法.