Angularjs UI grid multi select rows feature

I am having simple angularjs UI Grid , I am trying to develop multiSelect checkbox feature. I can use the default feature which UI grid provides like "Tick" mark control. Its working fine. I am curious to see if I can make use of checkbox instead of tick mark/marks. I tried something as below its working fine but just want to see if we can define something in colDef itself.

$rootScope.gridOptions = {
        enableColumnResizing: true,
        enableRowSelection: true,
        showGridFooter:true,
        enableFiltering: true,
        enablePagination: true,
        enableSorting: true,
        multiSelect: true,
        enablePaginationControls: true,
        paginationPageSizes: [50, 100, 250],
        paginationPageSize: 250,
        enableVerticalScrollbar: 1,
        enableHorizontalScrollbar: 1,
        columnDefs: [
            { name: "RecordID", displayName: "Record ID", cellClass: 'numberAlign', cellTooltip: true, headerTooltip: true, enableColumnMenu: false, width: '20%', enableSorting: true, enableFiltering: false },
        ],
        exporterPdfDefaultStyle: { fontSize: 9 },
        exporterPdfTableStyle: { margin: [0, 0, 0, 0] },
        exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
        exporterPdfOrientation: 'portrait',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 500,
        exporterFieldCallback: function (grid, row, col, value) {
            col.colDef.width = 500
            // Below one is export for branch specific page. wut_details_branch
            return value;
        },
        onRegisterApi: function (gridApi) {
            $rootScope.gridApi = gridApi;
        }
    };




<div class="row">
                        <div class="col-md-12">
                            <div id="grid1" ui-grid="gridOptions" ui-grid-resize-columns ui-grid-pagination ui-grid-exporter ui-grid-selection="" class="myGrid" style="margin-top:10px;">
                                <div class="no-rows" ng-show="!gridOptions.data.length">
                                    <div class="watermark">
                                        <span>No Rows</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

I have tried this and its working, I want to know if I can do something in colDef

       //$templateCache.put('ui-grid/selectionRowHeaderButtons',
        //    "<div  class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" ><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" value=\"ABCSSSSSS\" ng-model=\"row.isSelected\" ng-click=\"row.isSelected=!row.isSelected;selectButtonClick(row, $event)\">&nbsp;</div>"
        //);




//$templateCache.put('ui-grid/selectionSelectAllButtons',
        //    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" text=\"ABCSSSSSS\"  ng-model=\"grid.selection.selectAll\" ng-click=\"grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)\"></div>"
        //);