how to get the selected checkbox values in cell of ui-grid using angularjs

Question

I have UI-grid build in angularjs in which cell template I have used check boxes.When i click on particular checkbox I want to get that checked box value,means I have table like structure and in table cell I have checkbox.And now I want to get the selected check box value.

Here is my code

$scope.gridOptionsNew = {
appScopeProvider : $scope,
columnDefs : [{
        enableCellEdit : false,
        field : 'SponsorType',
        displayName : me.labelText.ADD_STORY_TABLE_SPONSOR_TYPE

    }, {
        //enableCellEdit: true,
        field : 'Hoarding',
        displayName : me.labelText.ADD_STORY_TABLE_HOARDING,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    },
    {
        //enableCellEdit: true,
        field : 'Print',
        displayName : me.labelText.ADD_STORY_TABLE_PRINT,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Radio',
        displayName : me.labelText.ADD_STORY_TABLE_RADIO,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'StageBackDrops',
        displayName : me.labelText.ADD_STORY_TABLE_STAGE_BACK_DROP,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Stalls',
        displayName : me.labelText.ADD_STORY_TABLE_STALLS,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Banners',
        displayName : me.labelText.ADD_STORY_TABLE_BANNERS,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'Seats',
        displayName : me.labelText.ADD_STORY_SEATS,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'VenueBanners',
        displayName : me.labelText.ADD_STORY_VENUE_BRANDING,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }, {
        //enableCellEdit: true,
        field : 'StagePresence',
        displayName : me.labelText.ADD_STORY_STAGE_PRESENCE,
        cellTemplate : '<div class="text-center"><input type="checkbox" ' +
        'name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'
    }
]}

$scope.yourMethod = function (radio) {
  console.log("value", radio);
};

Sampath · Accepted Answer · 2016-05-06 16:57:59Z

1

Please try as shown below.

set grid options like :

 $scope.gridOptionsNew = { 
         appScopeProvider: $scope,
         //your other options

then template :

cellTemplate: '<div class="text-center"><input type="checkbox" '+
name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity.Radio)"/></div>'

Method :

     //your Method
      $scope.yourMethod = function (radio) {

        //your logic
      };

Update :

cellTemplate: '<div class="text-center"><input type="checkbox" '+
name="radio" value="radio" ng-click="grid.appScope.yourMethod(row.entity)"/></div>'

edited May 6, 2016 at 16:57

answered May 5, 2016 at 16:30

Sampath

66.2k70 gold badges327 silver badges461 bronze badges

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

3 Comments

Priyanka Kakade Over a year ago

hello thank you so much for your answer. i just did console the value of radio in the function but is showing undefined.i did this $scope.yourMethod = function (radio) { console.log("hello",radio); }; it is showing "" infront of hello

Sampath Over a year ago

can you put your latest code snippets on your post above ?

Sampath Over a year ago

Please see the Update section.Try like that and see the value using debug..Just debug using F10.

Collectives™ on Stack Overflow

how to get the selected checkbox values in cell of ui-grid using angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related