Datable shrink when Child rows(html table) are increasing,

karthik6244 · September 2019

I am following this link "https://datatables.net/examples/api/row_details.html", when the parent record is clicked, I am showing a dynamically generated html table as mentioned in the above link. My table is having around 15 columns. So when I click on +(plus) icon inner html expands however jquery datatable doesn't expand. This behavior is odd to the customer, any technical solutions to overcome this challenge.

kthorngren · September 2019

click on +(plus) icon inner html expands however jquery datatable doesn't expand.

Do you mean the child row is displayed but the parent rows below don't move down?

any technical solutions to overcome this challenge.

I Don't recall anyone else having this problem. We would need to see a link to your page or a test case replicating the issue.

Wonder if you are getting an error causing the parent rows to not move down. Check your browser's console for errors.

Kevin

karthik6244 · September 2019

Hello kthorngren, Actually what I mean is When I click the plus Icon
1) I am showing a table inside with 13 columns then width of the table is increasing dynamically, but jQuery datatable width is not increasing, that is the issue,

Code:-

        var table = $('#planGrid').DataTable({
            "autoWidth":false,
            "bFilter": true,
            ajax: '/ActualActivity/ListActuals',
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            //"bAutoWidth": false,
           "language":
            {
                //"processing": "<img src='/Content/Images/Loading.gif'>"
            },
            "columnDefs": [
                {
                    "defaultContent": "-",
                    "targets": "_all"
                }],
            columns: [
                {
                    className: 'details-control',
                    orderable: false,
                    data: null,
                    defaultContent: ''
                },

Inner table on + Click,

        function format(d) {
            // `d` is the original data object for the row
            //for (i = 0; i < d.length; i++) {
            //    console.log(d[i].NotifiedTo);
            //}
            //var table_body = '<table width="100%" border="0" face="Courier New" cellpadding="5" cellspacing="0"  style="color:red" >';
            var table_body = '<table id="innerTable" width="100%" border="0" face="Courier New" cellpadding="5" cellspacing="0" >';
            table_body += '<thead style="font-weight:bold;"><th>Units Completed</th><th>No of Resources</th><th>Additional Comments</th><th>Risk Foreseen</th><th>Activity Date</th><th>Lost Hours</th><th>Actual Effort</th><th>Notified To</th><th>Lost Hours Reason</th><th>Action</th></thead>'
            for (i = 0; i < d.length; i++) {
                console.log(d[i]);

CSS:-

Page CSS (Where the issue is coming)

    <style>
        td.details-control {
            background: url('../../Content/Images/details_open.png') no-repeat center center;
            cursor: pointer;
        }

        tr.shown td.details-control {
            background: url('../../Content/Images/details_close.png') no-repeat center center;
        }

        div.dataTables_wrapper {
            width: 100%;
            margin: 0 auto;
        }

        .dataTables_filter, .dataTables_info {
            display: none;
        }

        .column_filter {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        /*table {
            table-layout: fixed;
            width: 100%;
            border: 1px solid;
            margin-top: 20px;
            border-collapse: collapse;
        }*/

        /*td {
            min-width: 250px;
            border: 1px solid;
        }*/
    </style>

    <script>

Main CSS :-

/*
 * Colour dictionary:
 *
 * Table control elements:   #719ba7
 * Header cells:             #66A9BD
 * Body header cells:        #91c5d4
 * Body content cells:       #d5eaf0
 * Body content cells (alt): #bcd9e1
 * Footer header:            #b0cc7f
 * Footer content:           #d7e1c5
 */


/*
 * Page setup styles
 */
body {
    font: 80%/1.45em Arial, Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #111;
    background-color: #fff;
}

#container {
    margin: 0 auto;
    width: 960px
}

h1 {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin: 1em 0;
}


/*
 * DataTables framework
 */
div.dataTables_wrapper {
    background-color: #00A1D5;
}

div.dataTables_length {
    float: left;
}

div.dataTables_filter {
    float: right;
}

div.dataTables_info {
    padding: 9px 6px 6px 6px;
    float: left;
}

div.dataTables_paginate {
    float: right;
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate {
    padding: 6px;
}

/* Self clearing - http://www.webtoolkit.info/css-clearfix.html */
.dataTables_wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
html[xmlns] .dataTables_wrapper {
    display: block;
}
 
* html .dataTables_wrapper {
    height: 1%;
}


/*
 * Table styles
 */
table.pretty {
    width: 100%;
    clear: both;
}

table.pretty td,
table.pretty th {
    padding: 5px;
    border: 1px solid #fff;
}

/* Header cells */
table.pretty thead th {
    text-align: center;
    background: #00A1D5;
}

/* Body cells */
table.pretty tbody th {
    text-align: left;
    background: #91c5d4;
}
    
table.pretty tbody td {
    text-align: center;
    background: #d5eaf0;
}
        
table.pretty tbody tr.odd td { 
    background: #bcd9e1;
}
table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px solid #1a1616;
}
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
    border-top: 1px solid #1a1616;
    border-right: 1px solid #1a1616;
}
table.dataTable.cell-border tbody tr td:first-child {
    border-left: 1px solid #1a1616;
}
    /* Footer cells */
    table .pretty tfoot th {
    background: #b0cc7f;
    text-align: left;
}
    
table.pretty tfoot td {
    background: #d7e1c5;
    text-align: center;
    font-weight: bold;
}


/*
 * Pagination
 */
a.paginate_button,
a.paginate_active {
    display: inline-block;
    background-color: #608995;
    padding: 2px 6px;
    margin-left: 2px;
    cursor: pointer;
    *cursor: hand;
}

a.paginate_active {
    background-color: transparent;
    border: 1px solid black;
}

a.paginate_button_disabled {
    color: #3d6672;
}
.paging_full_numbers a:active {
    outline: none
}
.paging_full_numbers a:hover {
    text-decoration: none;
}

div.dataTables_paginate span>a {
    width: 15px;
    text-align: center;
}


/*
 * Sorting
 */
table.pretty thead th.sorting_asc {
    background: #00A1D5 url('images/sort_asc.png') no-repeat right center;
}

table.pretty thead th.sorting_desc {
    background: #00A1D5 url('images/sort_desc.png') no-repeat right center;
}

table.pretty thead th.sorting {
    background: #00A1D5 url('images/sort_both.png') no-repeat right center;
}

karthik6244 · September 2019

Before clicking + Icon

After clicking + Icon

Thanks,

colin · September 2019

That's a lot of code. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Datable shrink when Child rows(html table) are increasing,

Datable shrink when Child rows(html table) are increasing,

Answers

Howdy, Stranger!

Categories

DataTables

Datable shrink when Child rows(html table) are increasing,

Datable shrink when Child rows(html table) are increasing,

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables