How to Add Checkbox to Expandable Rows

How to Add Checkbox to Expandable Rows

Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

Recently I went through this forum and got my datatable to use expand-ability functionality ( https://datatables.net/forums/discussion/67087/detailed-expandable-rows#latest ) This is the original Question.

Now I would Like to Add Check boxes to the table, not to the expanded section of the table. Also with the ability to post any selected data from the checkbox like so ( https://jsfiddle.net/gyrocode/snqw56dw/ )

This is the current Javascript I ve add columnDefs and select to try and introduce a checkbox, and ive also commented out the field i would like to be used as for check box values in the columns section ( "//{ "data": "accessRightId" }," ).

 $(document).ready(function () {
            //call the action method and get the data.
            $.ajax({
                url: "/User/RetriveRights",
                type: "Get",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    console.log("succsss" + data);
                    //after getting the data, bind the DataTable.
                    var table = $("#datatables").DataTable({
                        'columnDefs': [
                            {
                                'targets': 1,
                                'checkboxes': {
                                    'selectRow': true
                                }
                            }
                        ],
                        'select': {
                            'style': 'multi'
                        },
                        "pagingType": "full_numbers",
                        "lengthMenu": [
                            [10, 25, 50, -1],
                            [10, 25, 50, "All"]
                        ],
                        responsive: true,
                        language: {
                            search: "_INPUT_",
                            searchPlaceholder: "Search records",
                        },
                        "data": data,
                        "columns": [
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                            },
                            //{ "data": "accessRightId" },
                            { "data": "accessRightName" },
                        ],
                    });

                    //Expand/Collapse the nested objects.
                    $('#datatables tbody').on('click', 'td.details-control', function () {
                        var tr = $(this).closest('tr');
                        var row = table.row(tr);

                        if (row.child.isShown()) {
                            // This row is already open - close it
                            row.child.hide();
                            tr.removeClass('shown');
                        }
                        else {
                            // Open this row
                            row.child(format(row.data())).show();
                            tr.addClass('shown');
                        }
                    });
                },
                error: function (ex) {
                    console.log(ex);
                }
            });
        });

This is the Html:

<table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Access Right Name</th>
                                        </tr>
                                    </thead>

                                    <tfoot>
                                        <tr>
                                            <th></th>
                                            <th>Access Right Name</th>
                                        </tr>
                                    </tfoot>
                                </table>

And this is the structure of the data:

[
"1",
"ViewAllUsers",
"User can View All Users"
]

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Are you having a problem with this code?

    If you need help with something please build a test case showing the issue so we can help.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    okay ill do just that @kthorngren .

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    Okay @kthorngren ive made a test case ( http://live.datatables.net/xovoreyu/9/edit )

    what i want to accomplish is this exact functionality ( https://jsfiddle.net/gyrocode/snqw56dw/ )

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    I added the Select Extension to your example and used this select checkbox example to your test case:
    http://live.datatables.net/resokuwa/1/edit

    Using array data with Datatables is a bit tricky but you can use columns.data to define the array positions for each column. Also you will need to use data: null and defaultContent for the checkbox column.

    The fiddle example you linked to uses the Gyrocode select checkboxes plugin. You can add the plugin if you want to use the features from this plugin.

    Kevin

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0
    edited February 2021

    Duplicate Post.

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    Thanks so Much @kthorngren , really helpful.

    Okay I have few final questions, so far thanks for the help, very insightful of how datatables work.

    from this test case( http://live.datatables.net/xovoreyu/11/edit ) I have made a few changes.

    (1) When selecting the checkbox i want to be selecting the Id value which is data: 0, i made a mistake with the previous test case, is the changes i made fine, or does it need more work.
    (2) I don't want to display the id column, but i want it to be select-able via the check box, is that possible.
    (3) The graphic for the expansion of rows( the plus sign), is it possible to move it to the end of each individual row, instead of the beginning.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    The answer to all of your questions is yes :smile:

    See this updated example:
    http://live.datatables.net/jumopewi/1/edit

    You don't have to display the row data in a column to have access to it. I added the select event, as shown in the example, to display the row id when selected. Moved the child row column to the last column. Also changed the select.selector to be the fist column.

    Kevin

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    Thanks so much, you have been extremely help yesterday and today, thanks.

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    Hello once again @kthorngren, Im having issue once again, the test case conversion into a ajax call is giving me issue.

    This is the Javascript

     $(document).ready(function () {
                //call the action method and get the data.
                $.ajax({
                    url: "/User/RetriveRights",
                    type: "Get",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        console.log("succsss" + data);
                        //after getting the data, bind the DataTable.
                        var table = $("#datatables").DataTable({
                            "data": data,
                            "pagingType": "full_numbers",
                            "lengthMenu": [
                                [10, 25, 50, -1],
                                [10, 25, 50, "All"]
                            ],
                            responsive: true,
                            language: {
                                search: "_INPUT_",
                                searchPlaceholder: "Search records",
                            },
                            "columns": [
                                {
                                    orderable: false,
                                    className: 'select-checkbox',
                                    defaultContent: '',
                                    data: null,
                                    title: ''
                                },
                                {
                                    data: 1,
                                    title: "Access Right Name"
                                },
                                {
                                    "className": 'details-control',
                                    "orderable": false,
                                    "data": null,
                                    "defaultContent": ''
                                },
                            ],
                            select: {
                                style: 'os',
                                selector: 'td:first-child'
                            },
                        });
    
                        //Expand/Collapse the nested objects.
                        $('#datatables tbody').on('click', 'td.details-control', function () {
                            var tr = $(this).closest('tr');
                            var row = table.row(tr);
    
                            if (row.child.isShown()) {
                                // This row is already open - close it
                                row.child.hide();
                                tr.removeClass('shown');
                            }
                            else {
                                // Open this row
                                row.child(format(row.data())).show();
                                tr.addClass('shown');
                            }
                        });
    
                    },
    
                    error: function (ex) {
                        console.log(ex);
                    }
                });
            });
    
    

    I've used the same format for the table structure.

    This is the initial error i receive:

    There after pressing OK, i receive this error:

    Then finally the table looks like this:

    I can still click the plus button, and it will preperly show the detailed part.

    Im not sure whats wrong, if i had to guess Im probably accessing the data wrong, or maybe some css files are interfering.

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    I think i might have found the issue, not have not solved it yet though, when i reload the website, in the console i get theres error messages

  • Sageis1Sageis1 Posts: 53Questions: 9Answers: 0

    okay i'm such an idiot, i fixed it, i needed to manipulate the data api around to get it to work. Next time ill read more before i ask questions.

This discussion has been closed.