Datatables not working when having nested asp:ListView?

Datatables not working when having nested asp:ListView?

jian_dkjian_dk Posts: 2Questions: 1Answers: 0

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": ""
}]

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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_dkjian_dk Posts: 2Questions: 1Answers: 0

    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.

This discussion has been closed.