Datatables not working when having nested asp:ListView?

jian_dk

Hey everyone, first time poster here. I just started using Datatables and i love it. I do however have a problem i cant seem to find a solution for. I have a parent listview with a table, when i click a button in a row, i fetch data and populate the nested listview and table, like an accordion.

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

Codebehind:

protected void ListV_Proj_ItemCommand(object sender, ListViewCommandEventArgs e)
    {
       
        DataTable subProTable = uWeb.Data.Project.List_Test("", null, null, null, null, null, null, null, null, null, false, 
        e.CommandArgument.ToString());       
        ListView subListV = (ListView)e.Item.FindControl("ListView_subProj1");
        subListV.DataSource = subProTable;
        subListV.DataBind();             
    }

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?

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

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

colin

Hi @jian_dk ,

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

jian_dk

live.datatables.net/fesuliji/1/edit?html,css,js,console,output

Here is the test case and output is the result i want the buttons in the table is for fetching data for the sub table, problem here is colspan being used "not supported in datatables", thus breaking all the functionality.