How to get checked rows from kendo grid?

Question

I'm trying to use checkbox with every row & then get those row's values, which are checked. this checkbox column is not representing any field in datasource. Here is my Grid:

 var SeparatedEmployeeList = $("#SeparatedEmployeeList").kendoGrid({
             dataSource: DataSourceSeparatedEmployeeList,
             pageable: true,
             editable: true,
             selectable: "row",
             navigatable: true,
             filterable: true,
             sortable: true,
             groupable: true,
             height: '200PX',

             scrollable: true,
             columns: [
               { field: "SLNO", title: "SL.", filterable: false, sortable: false, width: "30px" },
               { field: "EMP_CODE", title: "Code", filterable: false, width: "70px" },
               { field: "EMP_NAME", title: "Name", filterable: true, width: "100px" },
               { field: "DIVI_NAME", title: "Division", width: "70px" },
               { field: "EMP_DESIG_NAME", title: "Designation", width: "75px" },
               { field: "JOINING_DATE", title: "Join Date", width: "60px" },
               { field: "TRMN_TYPE", title: "Separation Type", width: "85px" },
               { field: "TRMN_EFCT_DATE", title: "Effect Date", width: "60px" },
               { field: "LAST_SAL_PROS_MON", title: "Last Salary Proc. Month", width: "110px" },
               { field: "TRMN_REM", title: "Remarks", width: "60px" },
               { field: "Date", title: "Date", width: "65px" },
               { field: "check_row", title: "Submit", width: 60, onClick: test, template: "<input class='check_row' OnCheckedChanged='test' type='checkbox' />" }
             ]
         });

I need to fire a while checking the checkbox to validate user entered data in the date field defined just before the checkbox, & later I will need to iterate through the checked rows to use their values. Please help.

Answer 1

I would change the last item to:

{ title: "Submit", width: 60, template: "<input class='check_row nsa-checkbox' type='checkbox' />" }

Now, using jQuery delegation I would NSA-like capture all the "change" events on every control under the DIV grid, having the css class "nsa-checkbox":

$('#SeparatedEmployeeList').on('change', '.nsa-checkbox', function(e){
    // "this" is your checkbox
    var myCheckbox = $(this);

    // To get the item, you must access the data-uid attribute in the row that wraps the checkbox.    
    var myDataItem = DataSourceSeparatedEmployeeList.getByUid(myCheckbox.closest('tr').attr('data-uid'));

    // Have fun
})

Answer 2

If you later want to iterate through the checked rows in controller you can use

postUrl = '@Url.Content("~/Billing/CustomerAccountManage/AccountsManagerTransferResponsiblityAction")';  
     paramValue = JSON.stringify(  
     {  
       'pEmpID1': gEmpID1  
       , 'pEmpID2': gEmpID2  
       , ManagerList: gridData // passing the grid value in controller as parameter  
     });  
     $.ajax({  
       url: postUrl,  
       type: 'POST',  
       dataType: 'json',  
       data: paramValue,  
       contentType: 'application/json; charset=utf-8',  
       success: function (result) {  
         console.log(result);  
       },  
       error: function (objAjaxRequest, strError) {  
         var respText = objAjaxRequest.responseText;  
         console.log(respText);  
       }  
     });  

you can also see this