checkBox with DataTable row Selection

zubia456

Hi All,
I am struggling in introducing checkbox selection with angular data table. So I came across this example

https://datatables.net/extensions/select/examples/initialisation/checkbox

I want to know how I incorporate the above mentioned example when my column definition is not as simple as in the example.
I am defining my columns using DTColumnBuilder
****Following is the sample****
```$scope.dtColumnDefs = [

        DTColumnBuilder.newColumn(null).withClass().withTitle(name) .renderWith(function(data, type, full) {

       }),


        DTColumnBuilder.newColumn('template').withClass().withTitle(position).renderWith(function (data, type, full) {

        }),

        DTColumnBuilder.newColumn(null').withTitle(Age).renderWith(function (data, type, full) {

        }),

];```

And My index file look like this.

``` <div class="md-card uk-margin-medium-bottom" >
<div class="md-card-content" ng-controller="dt_individual_search as showCase">
<table id="table"

                   cellspacing="0"
                   datatable
                   dt-options="dtOptions"
                   dt-columns="dtColumnDefs"
                   dt-row-selection="2"
                   disable-buttons="[1]"
                   width="100%">
                <thead>
                <tr>
                 <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Salary</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>```

So my question is now How I can include the className: 'select-checkbox', in my current codewith DTColumnBuilder?

kthorngren

I haven't used angular but maybe this thread will help:

https://github.com/l-lin/angular-datatables/issues/161

Guess it would look something like this, maybe?

DTColumnBuilder.newColumn(null).withClass('select-checkbox').notSortable()

Kevin

zubia456

@kthorngren thanks for the reply. But I already tried it that way. It doesn't work

kthorngren

What exactly is not working?

Do the checkboxes show?

Is row selection not working?

Maybe this thread helps:
https://datatables.net/forums/discussion/35377/use-jquery-styled-row-selection-on-angular-datatables-how-to

Are you loading the select extension as described in the docs?
http://l-lin.github.io/angular-datatables/#/extensions/select

Kevin

kthorngren

Maybe this is the doc you should be looking at:
http://l-lin.github.io/angular-datatables/archives/#!/withSelect

Kevin

zubia456

The approach used in following link doesn't even show the checkboxes in the each row

http://l-lin.github.io/angular-datatables/archives/#!/withSelect

Do I need to install something for this to work. Additionally my row selection is working if i just click the row . I used same approach as mentioned in the link

dtOptions : DTOptionsBuilder.withOption('select', true) 

However now I wanted it to have multiple selection or single selection using check boxes.

I was able to show checkboxes using the following approach

http://l-lin.github.io/angular-datatables/archives/#!/rowSelect

but i need to make some changes in above mentioned code so that when the user check the check box in a row it also selects the row at the same time. The approached used here is not working for me

Is there a way if where I can manually get the selected rows of the table by using the table id and make them selected while checking the check box?

kthorngren

Do I need to install something for this to work.

Did you install the select extension code (select.dataTables.min.css, dataTables.select.min.js, angular-datatables.select.min.js) as shown in the doc page?
http://l-lin.github.io/angular-datatables/archives/#!/withSelect

Once you have the select extension code loaded the checkboxes should appear. Then you can use the select.style option to determine the selection type, ie, multiple row.

Kevin

zubia456

I already have extension installed. That is how my selection is working. for some reason if I include withSelect in my DTOptionsBuilder it doesn't recognize it. I did it in a following way

$scope.dtOptions = DTOptionsBuilder

            .newOptions()
           
            .withSelect({
                style: 'os',
                selector: 'td:first-child'
            })

zubia456

and also when i include the dependency** dataTables.select.min.js'**. It gave me an error cannot set property 'select' of undefined

kthorngren

If withSelect is not working then that's probably something you will need to ask on the angular-datatables forum.

If dtOptions : DTOptionsBuilder.withOption('select', true) works then maybe you can do something like this:

dtOptions : DTOptionsBuilder.withOption('select', {style: 'os', selector: 'td:first-child'})

Again, I'm only guessing as I've never used angular or angular-datatables. Maybe their support forum might yield more help.

Kevin

zubia456

yes I found that example too:
```
dtOptions : DTOptionsBuilder.withOption('select', {style: 'os', selector: 'td:first-child'})
``
Already tried this but zero effect.

Thank you for your response. I'll try to address the withSelect issue on the forum. I was just thinking maybe it has to do something with version of datatable. I am using 1.10.15 now