DataTables Child Row returns undefined

cworkman

Hello all,

I'm trying to expand on a column's value in a DataTable record using the Child Row functionality.

The web application is built upon ASP.NET MVC and all DataTable features are working accordingly except this one. I believe it may be due to my inexperience with JS.

Anyway, my AJAX request is returning all the appropriate data - The last field containing the decimal value and date in the record below is what my record's child needs to be (i.e Tax History: 0.02125(2/28/2007)

{"sEcho":"1","iTotalRecords":52,"iTotalDisplayRecords":52,"aaData":[["row_33293","33293","AL","ALABAMA","0.03375","10/1/2015","10/20/2015","True","0.02125(2/28/2007)"]

The record contains the appropriate data ("AL","ALABAMA","0.03375","10/1/2015","10/20/2015") in my application. It also expands when selected, but the expanded text field returns - "Tax History - undefined"

Here is my code

<!-- DataTables CSS -->
@Styles.Render("~/Content/media/css/jquery.dataTables.css")

<!-- jQuery -->
@Scripts.Render("~/Scripts/datatables.min.js")


            <script language="javascript" type="text/javascript">

                function format(d) {
                    return 'Tax History: ' + d.SecondStateRates + '<br>';
                }

                $(document).ready(function () {
                    //$.fn.DataTable.ext.pager.numbers_length = 2;
                 var dt =   $('#stateTable').DataTable({
                        //"bJQueryUI": true,
                        "bServerSide": true,
                        "sAjaxSource": "@Url.Action("AjaxHandler","State")",
                        "bProcessing": true,

                        "aoColumns": [
                            {
                                "sName": "TransactionKey",
                                "bSearchable": false,
                                "bSortable": false,
                                "bVisible": false

                            },
                            {
                                "sClass": "details-control",
                                "bSortable": false,
                                "mData": null,
                                "sDefaultContent": ""
                            },
                            {
                                "sName": "StateShortName"
                            },
                            {
                                "sName": "StateLongName"
                            },
                            {
                                "sName": "TransactionStickTax"
                            },
                            {
                                "sName": "TransactionEffectiveDate"
                            },
                            {
                                "sName": "TransactionDateStamp"
                            },
                            {
                                "sName": "IsHighestDate",
                                "bSearchable": false,
                                "bSortable": false,
                                "bVisible": false
                            },
                            {
                                // seventh column (Delete link)
                                "sName": "TransactionKey",
                                "bSearchable": false,
                                "bSortable": false,
                                "mRender": function (data, type, full) {
                                    var id = "/" + full[1]; //row id in the first column
                                    return "<a href='@Url.Action("Delete","State")" + id + "'>Delete</a>";
                                }
                            }
                        ]
                   

                       

                    });

                    var detailRows = [];

                    $('#stateTable tbody').on('click', 'tr td.details-control', function () {
                        var tr = $(this).closest('tr');
                        var row = dt.row(tr);
                        var idx = $.inArray(tr.attr('id'), detailRows);

                       

                        if (row.child.isShown()) {
                            tr.removeClass('details');
                            row.child.hide();

                            // Remove from the 'open' array
                            detailRows.splice(idx, 1);
                        }
                        else {
                            tr.addClass('details');
                            row.child(format(row.data())).show();

                            // Add to the 'open' array
                            if (idx === -1) {
                                detailRows.push(tr.attr('id'));
                            }
                        }

                    });

                    // On each draw, loop over the `detailRows` array and show any child rows
                    dt.on('draw', function () {
                        $.each(detailRows, function (i, id) {
                            $('#' + id + ' td.details-control').trigger('click');
                        });
                    });


                });
            </script>



            <div class="row" id="titleAndButton">
                <div class="col-md-12">
                    <p><a class="btn btn-default btn-lg btn-block" href="@Url.Action("Create")">Add State Tax</a></p>
                </div>
            </div>
            <br/>

            <table id="stateTable" class="display">
                <thead>
                    <tr>
                        <th></th> 
                        <th></th>
                        <th>
                            State Code
                        </th>
                        <th>
                            State Name
                        </th>
                        <th>
                            State Tax
                        </th>
                        <th>
                            Effective Date
                        </th>
                        <th>
                            Entry Date
                        </th>
                        <th>Highest Date</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

Please let me know what you think! Any bit of help would be great :)

Thanks,
Channing

cworkman

Bump

allan

You are returning an array of information rather than an object for the rows - so there is no SecondStateRates property of the object. You would need to access the array index of the data you want - d[0] for example.

Allan

cworkman

Wow I can't believe I missed that.. Thank you so much for your help!

Channing