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>

Community · Accepted Answer · 2017-05-23 11:52:47Z

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, 2017 at 11:52

CommunityBot

11 silver badge

answered May 30, 2016 at 5:16

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Priyanka kakade Over a year ago

Thank you for the great help.I will go through tutorial.

Collectives™ on Stack Overflow

select checkbox on row click in ui-grid using angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related