kendoui grid select all

Question

I, working with MVC + kendoui grid and this is my code:

---

model

---

      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"}},              
                ],         
            },                         
        });

My questions are:

1) How do I make the select all title checkbox to work?

2) When I check/uncheck a checkbox it will return to the server

Thanks,

Solution

1) You should use the headerTemplate configuration option of the grid:

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

Then add the "checkAll" function to the page:

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) I'm not sure that I understand correctly what exactly you are trying to achieve, however if you need to sync the changes from the above function with the server then you can also call the grid saveChanges method.