select checkbox on row click in ui-grid using angularjs

Question

I am new to angular js. and i want to select the check box when i click on the row to edit that particular cell.I have taken celltemplate to show the checkbox in the ui-grid.but now when i click on the row the row gets selected but the checkbox in that row is not getting selected.

This is my grid-

 $scope.myDataSocailMediaMarketing =[];
 $scope.gridOptionsSocialMediaMarketing = { 
             appScopeProvider: $scope,
             data : 'myDataSocailMediaMarketing' ,
//           enableCellSelection: true,
//           enableRowSelection: false,
             enableRowHeaderSelection :false,
             enableRowSelection: true,
             enableCellEdit: true,
             enableHorizontalScrollbar: 0,
             enableRowSelection: true,
             enableSelectAll: true,
             enableFullRowSelection : true,
             rowEditWaitInterval: -1,
             columnDefs: [
                 {
                     cellClass : 'grid-align',
                     width : '10%',
                     minWidth : '10%',
                     enableCellEdit: false,
                     field: 'select',
                     displayName: me.labelText.ADD_STORY_TABLE_SELECT,
                     cellTemplate: '<div class="ngCellText text-center">'+
                                   '<input type="checkbox" '+
                                   'ng-model="row.entity.select" '+
                                   'ng-click="grid.appScope.checkboxRowClick(row.entity)""/>'+
                                   '</div>'

                 }, 
                 {
                         cellClass : 'grid-align',
                         width : '30%',
                         minWidth : '30%',
                         enableCellEdit: false,
                         field: 'category',
                         displayName: me.labelText.ADD_STORY_TABLE_CATEGORY

                 },
                 {
                         cellClass : 'grid-align',
                         width : '60%',
                         minWidth : '60%',
                         enableCellEdit: true,
                         field: 'descriptionOrExample',
                         displayName: me.labelText.ADD_STORY_TABLE_DESCRIPTION                                       
                 }
             ],                                     
     };

in html i have declared it as-

 <div>
 <div class="gridHeightSocialMarketing socialMediaMarketing table" ui-grid-edit ui-grid-row-edit ui-grid-selection ui-grid="gridOptionsSocialMediaMarketing" style="height:242px;">
</div>
</div>

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Since there is no code for check-box selection in your code. You have to select your check-box manually by using rowSelectionChanged event.

Look at this tutorial for how to use rowSelectionChanged to select or deselect the check-boxes.

Here is another post for rowSelectionChanged functionality angular ui-grid event: row selected

edited May 23 '17 at 11:52

Community

1
1

answered May 30 '16 at 05:16

Partha Sarathi Ghosh

10,936
20
59
84

Thank you for the great help.I will go through tutorial. – Priyanka kakade May 31 '16 at 04:27

select checkbox on row click in ui-grid using angularjs

1 Answers1