ui-grid how to select checkbox when row clicked

Question

I am showing data usingui-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;

    });
};

why not turn enableRowHeaderSelection: true in gridOptions, it will give you a checkbox by default — Pratik Bhat, May 10 '16 at 19:39

score 0 · Answer 1 · answered May 11 '16 at 14:04

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

score 0 · Answer 2 · edited Apr 19 '17 at 07:51

0

<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>

edited Apr 19 '17 at 07:51

Karl Gjertsen

4,690
8
41
64

answered Apr 19 '17 at 07:24

576prakash

45
7

please check [checked]="dataItem.IsChecked" – 576prakash Apr 19 '17 at 07:24

ui-grid how to select checkbox when row clicked

2 Answers2