Datatables not working when having nested asp:ListView?

Question

I'm using DataTables to get some sorting and locked header bar functionality. Problem is, when I have my nested listView the in don't match because the nested listView is filled dynamically by button click on a row. Is there any way of solving this? Datatables don't allow colspan which i think would solve it.

Datatable javascript:

$("#tbl_MainProj").DataTable({
                fixedHeader: true
                , bLengthChange: false
                , bPaginate: false
                , searching: false
                , targets: 'no-sort'
                , bSort: true                    
            });

aspx.:

<asp:ListView ID="ListV_Proj" runat="server" DataSourceID="Project_ObjectDataSource" OnItemCommand="ListV_Proj_ItemCommand">
                        <LayoutTemplate>
                            <table id="tbl_MainProj" class="gvv">
                                <thead>
                                    <tr>
                                        <th>
                                            <asp:Label Text="Sub" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Nummer" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Konto" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Navn" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Søgenavn" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Rekv.nr." runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="PL" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Leveres dato" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Bekr. Dato" runat="server" />
                                        </th>
                                        <th>
                                            <asp:Label Text="Status" runat="server" />
                                        </th>
                                    </tr>
                                </thead>
                                <tr id="itemPlaceholder" runat="server" />
                            </table>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <tr runat="server">
                                <td>
                                    <asp:Button ID="btn_GetSubProj" Text="+" runat="server" CommandArgument='<%# Eval("Proj") %>' />
                                </td>
                                <td>
                                    <asp:Label ID="lbl_projNo" Text='<%# Eval("Proj") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("ACCOUNT") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("NAME") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("SNAME") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("REFNO") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("EMPLOYEE") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("END_") %>' runat="server" />

                                </td>
                                <td>
                                    <asp:Label Text='<%# Eval("CONFIRMEDDATE") %>' runat="server" />

                                </td>
                                <td>
                                    <div id="rgy" class='<%# CalcDateExceed(Eval("END_", "{0:d}")) %>'></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:ListView ID="ListView_subProj1" runat="server">
                                        <LayoutTemplate>
                                            <table id="tbl_subProj1">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            <asp:Label Text="Nummer" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Konto" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Navn" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Søgenavn" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Rekv.nr." runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="PL" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Leveres dato" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Bekr. Dato" runat="server" />
                                                        </th>
                                                        <th>
                                                            <asp:Label Text="Status" runat="server" />
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tr id="itemPlaceholder" runat="server" />
                                            </table>
                                        </LayoutTemplate>
                                        <ItemTemplate>
                                            <tr runat="server">
                                                <td>
                                                    <asp:Label ID="lbl_projNo" Text='<%# Eval("Proj") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("ACCOUNT") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("NAME") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("SNAME") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("REFNO") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("EMPLOYEE") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("END_") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <asp:Label Text='<%# Eval("CONFIRMEDDATE") %>' runat="server" />

                                                </td>
                                                <td>
                                                    <div id="rgy" class='<%# CalcDateExceed(Eval("END_", "{0:d}")) %>'></div>
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:ListView>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:ListView>

I only need the Datatable functionality on the parent listView(Table). But the row containing the child listView is throwing the jQuery exception:

Unable to set property '_DT_CellIndex' of undefined or null reference.

Is there any way to solve this and keep the functionality of datatables?

Edit: looking at the Q :DataTables - Not working when added colspan for the last column

I have to use below script somehow. But i cant seem to figure it out?

"aoColumnDefs": [{
  "aTargets": [2,3,4,5],
  "defaultContent": ""
}]

Possible duplicate of [DataTables - Not working when added colspan for the last column](https://stackoverflow.com/questions/19426972/datatables-not-working-when-added-colspan-for-the-last-column) — VDWWD, Jan 15 '19 at 07:45
Not sure i see the connection? how could that answer solve my problem? I really hope i could. — JNA, Jan 15 '19 at 08:08
You have a separate row that spans all the columns that contains the nested listview. Datatables cannot handle colspan by default, hence the duplicate — VDWWD, Jan 15 '19 at 08:44
edited my question. How do i script the aoColumnDefs ? tried [2,3,4,5,6,7,8,9,10] but that still threw the exception — JNA, Jan 15 '19 at 08:50

score 0 · Answer 1 · answered Jun 11 '23 at 21:23

The problem is that, your parent table has 10 columns. but when we have the child ListView as a Table row in a Parent table, the entire child table is rendered into one column. To resolve the issue we need to add matching number of empty cells to the table row which contains the child table.

   <asp:ListView ID="ListView1" runat="server">
        <layouttemplate>
            <table id="myDataTable">
                <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Column 3</th>
                        <th>Column 4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr runat="server" id="itemPlaceholder"></tr>
                </tbody>
            </table>
        </layouttemplate>
        <itemtemplate>
            <tr runat="server">
                <td><%# Eval("Column1") %></td>
                <td><%# Eval("Column2") %></td>
                <td><%# Eval("Column3") %></td>
                <td><%# Eval("Column4") %></td>
            </tr>
            <tr id="table2" runat="server" visible="true">
                <td>
                    <asp:Panel runat="server" ID="docs">
                        <asp:UpdatePanel ID="uppanel" runat="server">
                            <triggers>
                                <asp:PostBackTrigger ControlID="lv2" />
                            </triggers>
                            <contenttemplate>
                                <asp:ListView runat="server" ID="lv2">
                                    <layouttemplate>
                                        <table id="myDataTable2">
                                            <thead>
                                                <tr>
                                                    <th>Column 1</th>
                                                    <th>Column 2</th>
                                                    <th>Column 3</th>
                                                    <th>Column 4</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr runat="server" id="Tr1"></tr>
                                            </tbody>
                                        </table>
                                    </layouttemplate>
                                    <itemtemplate>
                                        <tr>
                                            <td><%# Eval("Column1") %></td>
                                            <td><%# Eval("Column2") %></td>
                                            <td><%# Eval("Column3") %></td>
                                            <td><%# Eval("Column4") %></td>
                                        </tr>
                                    </itemtemplate>
                                </asp:ListView>
                            </contenttemplate>
                        </asp:UpdatePanel>
                    </asp:Panel>
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </itemtemplate>
    </asp:ListView>

DataTable javaScript

    <script>
        $(document).ready(function () {
            $('#myDataTable').DataTable(
                {
                    "ordering": false
                }
            );
        });
    </script>

Datatables not working when having nested asp:ListView?

1 Answers1