Tuesday, November 10, 2015

Kendo Grid with Check box column selection

To get selected rows from Kendo Grid using checkbox Please follow steps mentioned below,

1. Add one Boolean data type value to the entity we are binding the Kendo Grid,

    

    I.E. => Boolean  Selected {get;set;}

2. In the View( i.e. cshtml page) while defining kendo grid  define the checkbox column as follows,

 Columns.Template(@<text><text>).clientTemplate( "<input type='checkbox'  #= Selected?
                                                    checked= 'checked' ; '' # class = 'chkbxclass'/>");    

3. In the script file corresponding to the view , under           
     $(document).ready function write the following,
   
     function(){
                       $('#gvGridID').on('click','.chkbxclass',
                       function(){
                            var checked = $(this).is(':checked');
                            var grid = $('#gvGridID').data().kendogrid;
                            var dataItem = grid.dataItem($(this).closest('tr'));
                            dataItem.set('Selected',checked);
                          })
                  })
4. On the submit button click to get the values from the orws of kendo grid write the following code in the button click script event,
        
             var grid = $('#gvGridID').data("kendogrid");
              $("#gvGridID tbody").find('tr').each(
                          function() {
                             var dataItem = grid.dataItem($(this).closest('tr'));
                             if(dataItem.Selected == true)
                                {
                                   // Write your logic here like concat all values                                    // with comma separated and store it in                                              // hidden field
                                }
                                            });

Thanks please give your valuable comments


No comments:

Post a Comment