ui-grid how to select checkbox when row clicked

Question

I am showing data using ui-grid.

The ui-grid has three columns. The first column is contains checkbox for each row.

Data populating correctly, row selection works fine except the following issue.

Problem:

When row clicked, the checkbox should also be selected. How i can achieve this? Any Idea?

html

<div class="row">
    <div class="col-lg-12">
        <div class="datalist-uigrid testGrid">
            <div class="grid testGrid" ui-grid="gridOptions" ui-grid-selection ui-grid-auto-resize></div>
        </div>
    </div>
</div>

Controller

This is how i am defining my field.

{
    field: 'selected',
    displayName: '',
    type: 'boolean',
    cellTemplate: uiGridTemplates.cellTemplates.buildCheckboxEditCell('row.entity.IsOneOff', 'row.entity.selected', ' ng-change="grid.appScope.onSelectChange()"'),
    enableFiltering: false,
    enableSorting: false,
    width: '3%'
},

gridOptions

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableCellEdit: false,
    enableCellEditOnFocus: false,
    enableSorting: true,
    enableFiltering: true,
    multiSelect: false,
    enableColumnMenus: false,
    enableGridMenu: false,
    rowHeight: 60,
    modifierKeysToMultiSelect: false,
    noUnselect: true,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};

This is how i am intercepting row click event

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
        $scope.onSelectRowChange(row.entity);
        var msg = 'row selected ' + row.isSelected;

    });
};

Answer 1

By default the selection module provides a row header with checkboxes that allow selection of individual rows.
This can be done using enableRowHeaderSelection: true ,

If you set the enableRowHeaderSelection in gridOption to false, then the row header is hidden and a click on the row will result in selection of that row.
If you want to allow both clicking on the row, and also clicking on the rowHeader, you can set enableFullRowSelection to true.

Please follow this tutorial for details:
Row Selection

Answer 2

<kendo-grid-column field="IsChecked" class="uk-text-center">
    <template  kendoGridCellTemplate let-dataItem>
        <input type="checkbox" [checked]="dataItem.IsChecked" (click)="SelectCheckbox()" (change)="dataItem.IsChecked = !dataItem.IsChecked" />
    </template>
</kendo-grid-column>