CODEWITHSUNDEEP
angularjsng-grid
yarl
yarl

Reputation: 3195

Set width of 'selection checkbox' column in ng-grid

I have customized checkboxCellTemplate in my table using ng-grid. I want to show there checkbox and some text, but I don't know how to set width of this column.

Unfortunately minWidth is not working for checkbox column.

$scope.gridOptions = { 
    data: 'myData',
    showSelectionCheckbox: true,
    checkboxCellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /> Some text here</div>',
};

Here is JSFiddle. Any iedas?

Upvotes: 1

Views: 5927

Answers (3)

Morgan Stone
Morgan Stone

Reputation: 46

I have found it is better to avoid overriding ngGrid's column widths and placement via CSS

A better route is to forgo the showSelectionCheckbox option and place your own checkbox in the columnDefs like so

$scope.gridOptions = {
        data: 'myData',
        columnDefs: [{
            field: '',
            minWidth: 120,
            cellTemplate: '<div class="ngSelectionCell"><input tabindex="-1" class="ngSelectionCheckbox" type="checkbox" ng-checked="row.selected" /> Some text here</div>'
          }, {
            field: 'name'
          }, {
            field: 'age'
            }
        ]

    };

http://jsfiddle.net/k9kCr/19/

Upvotes: 3

mainguy
mainguy

Reputation: 8331

You can do that via columnDefs. 

    app.controller('MyCtrl', function ($scope) {
        $scope.myData = [
            {name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}
        ];
        $scope.gridOptions = {
            data: 'myData',
            showSelectionCheckbox: true,
            columnDefs: [
                {field: '', width: '50px'
                },
                {field: 'name'
                },
                {field: 'age'
                }
            ]
        };
    });

Working Fiddle

Upvotes: -1

Ishan Chatterjee
Ishan Chatterjee

Reputation: 835

After looking through their source and docs, I agree that ng-grid doesn't provide any/many convenient hooks to extend or customize the display and text on the row selection functionality it provides.

However, they do have a consistent naming scheme for it's generated rows and columns. For example, the first column is tagged as colt0, the second as colt1 and so on. These generated classes are also applied to each row in the ng-repeat but that's less important here.

In any case, I was able to apply some CSS to extend the display to widen the selection column and display your provided text. I'm not particularly happy with the CSS since I had to override some inline style attributes with !important to breakout from specificity rules.

In any case, here's a solution:

/* This widens the length of the first column */
.colt0 {
    width: 140px !important;
}

/* The second (zero-indexed!) column needs to be moved out to accomodate a wider first column */
.colt1 {
    left: 150px !important;
}

/* Move the position of the header checkbox a few pixels left */
.ngSelectionHeader {
    left: 11px;
}

/* Move the position of the viewport checkboxes to accomodate their new wider row containers */
.ngSelectionCell {
    margin-left: 11px;
}

JSFiddle Example: http://jsfiddle.net/MasterXen/9BpUR/2/

Upvotes: 1

Related Questions