asked on

Need help resolving an error when creating a Datatable with Child Rows

I am trying to use child rows datatables found at: https://www.datatables.net/examples/api/row_details.html

I have a Controller that returns my SQL View as a List:

 public ActionResult List()
        {
            MyDB DB = new MyDB();

            List<vw_Report> data = (from x in DB.vw_Report
                                                    select x).ToList();

            data = (from x in vw_Report.GetRows()
                    select x).ToList();

            return View(data.ToList());
        }

My View follows the example provided:

    @model List<master.path.Models.vw_Report>
        @{
            ViewBag.menu = false;
        }

        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width" />
        </head>

        <body>

            <h1 style="text-align:center">Report</h1>

            <div style="padding: 25px;">
                <table class="DTStyle" id="List">
                    <thead>
                        <tr>
                            <th>

                            </th>
                            <th>
                                Text Field 1
                            </th>
                            <th>
                                Text Field 2
                            </th>
                            <th>
                                Text Field 3
                            </th>
                            <th>
                                Text Field 4
                            </th>

                            <th>
                                Text Field 5
                            </th>
                            <th>
                                Text Field 6
                            </th>
                            <th>
                                Text Field 7
                            </th>

                        </tr>
                    </thead>

                    <tfoot>
                        <tr>
                            <th>

                            </th>
                            <th>
                                Text Field 1
                            </th>
                            <th>
                                Text Field 2
                            </th>
                            <th>
                                Text Field 3
                            </th>
                            <th>
                                Text Field 4
                            </th>

                            <th>
                               Text Field 5
                            </th>
                            <th>
                               Text Field 6
                            </th>
                            <th>
                               Text Field 7
                            </th>

                        </tr>
                    </tfoot>

                </table>
            </div>

        </body>
    </html>

    <script type="text/javascript">
        var data = "@Model";
       @*var data = @Newtonsoft.Json.JsonConvert.SerializeObject(Model);*@
        loadDataTable(data);
       
    </script>

My JavaScript file looks as follows:

/* Formatting function for row details */
function format(data) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Asset:</td>' +
        '<td>' + data.DetailField1 + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Nomenclature:</td>' +
        '<td>' + data.DetailField2 + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Model:</td>' +
        '<td>' + data.DetailField3+ '</td>' +
        '</tr>' +
        '</table>';
}

function loadDataTable(data) {
    var table = $('#List').DataTable({
        "data": data,
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { "data": "TextField1" },
            { "data": "TextField2" },
            { "data": "TextField3" },
            { "data": "TextField4" },
            { "data": "TextField5" },
            { "data": "TextField6" },
            { "data": "TextField7" }

        ],
        "order": [[1, 'asc']]
    });
};

Open in new window

The error I am receiving is: DataTables warning: table id=List - Requested unknown parameter 'TextField1' for row 0, column 1.

Any help would be appreciated!

Raghu Mutalikdesai

Are you sure the names 'Text Field 1', 'Text Field 2', etc. are the column names / field names in the database table? Hope these are not like 'Asset', 'Nomenclature', etc. Or perhaps it could be the space issue? 'TextField1' instead of 'Text Field 1'...

Crystal Rouse

ASKER

I am closing this request for now.

ASKER CERTIFIED SOLUTION

Crystal Rouse

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial