about unable to perform grouping in datatable.js v2.3.2

KsunChan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi all, I working on a web application that develop in VS2019 with vb.net. In the project, I have a gridview that used to display list of result, the result set included date, time, ECode and another information etc.

Previously, the project run with jquery 3.5.1 and datatable 1.10.19 and my ex-colleagues created logic in the gridview_RowDataBound event which compare the date of record in each row and add an alt row with the date value(and with colspan) on top separately and to grouping records that having same value in column date on below.

However, right now while I try to upgrade the datatable.js to 2.3.2, corresponding configuration returned error as number of columns mismatch. I have checked the issue an found the issue properly regard to colspan as datatable not support colspan. Thus, I followed https://datatables.net/forums/discussion/45201/how-to-handle-colspan-in-tbody-combined-with-fixed-header to manually add those missing column with <td style="display:none"></td>. Afterwards, no error prompted by datatable.js but the row of date unable to be group with the set of record at all, it got push to the last page as a record that only contain date by no other information(i think that cause by the datatable default sort by column ECode in ascending order, thus when I add <td style="display:none"></td> to resolve the column count issue, datable treat the row of date as row of record but not a grouping header, and it cannot read ECode in the row so it just leave it in the last page)

So may I ask, how can i re-produce the same logic and grouping behavior of my datatable in 2.3.2 please?

in fact, i found:
https://datatables.net/forums/discussion/53008/collapse-expand-click-groups
and
https://live.datatables.net/cecosoru/1/edit

I realize i should add a function in "startRender:" but I am in confuse about how can I re-produce the date compare logic for each row and create grouping of it please?

Please advise; Many thanks.

allan

gridview_RowDataBound - that's a .NET GridView event, and if I understand correctly you are modifying the table's HTML to insert the grouping row? I'd say skip that entirely and just use RowGroup instead.

Is the problem that RowGroup doesn't support expand and collapse of the groups? That is something that I haven't had a chance to look at adding yet I'm afraid. The paging of DataTables makes it a lot more difficult (probably fairly trivial to do without paging).

Allan

KsunChan

Hi Allan, thanks for your reply.

Yes, i am using RowGroup from datatable; Currenly I upgrading the project to JQuery 3.7.1, datatable.js 2.3.2 and using RowGroup 1.5.2.

like i said the sample from "https://live.datatables.net/cecosoru/1/edit" is the result i need; But while I tried to work on it whole day, I found that i am stuck in the label ID.

I have a gridview with id="gvExample"; inside the gridview, lets make it simple, say there are 2 columns like:

                <asp:TemplateField HeaderText="Date" SortExpression="Date">
                    <ItemTemplate>                     
                        <asp:Label ID="lblDate" runat="server" Text='<%# Bind("Date") %>'></asp:Label>    
                    </ItemTemplate>
                </asp:TemplateField>

<asp:TemplateField HeaderText="ECV" SortExpression="ECV">
                    <ItemTemplate>                     
                        <asp:Label ID="lblECV" runat="server" Text='<%# Bind("ECV") %>'></asp:Label>    
                    </ItemTemplate>
                </asp:TemplateField>

Then i have the rowGroup like below:

                    rowGroup: {
                        // Uses the 'row group' plugin
                        dataSrc: 0,
                        startRender: function (rows, group) {
                            var collapsed = !!collapsedGroups[group];

                            rows.nodes().each(function (r) {
                                r.style.display = collapsed ? 'none' : '';
                            });

                            // Add category name to the <tr>. NOTE: Hardcoded colspan
                            return $('<tr/>')
                                .append('<td colspan="2">' + group + ' (' + rows.count() + ')</td>')
                                .attr('data-name', group)
                                .toggleClass('collapsed', collapsed);
                        }
                    }

So, what i expect is that the datatable be grouped by value of label "lblDate", i.e. records with same date will be group together in once group and a separate row will be create for the group title.

But I found that I cant get the expected result; The output datatable keep separate each row as a group. After viewing the source from developer tool in chrome, i found that the root cause is while label "lblDate" convert to datatable, it gives the output like below:

"<span id="gvExample_ctl20_lblDate">01 Jun 2023</span>"

due to the "ctl20" in id is variance, it make the id unique for every row, then ir create group for every row but not grouping them at all.

I have tried different code like:

$(row).find('span[id^="gvExample_ctl"][id$="_lblDate"]').text().trim();

but still cant get the exact date value, i.e. "01 Jun 2023" as grouping criteria.....

may I ask is there any mis-understanding or mistake I made please?

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you show me the generated raw HTML table please? i.e. just a copy / paste of the HTML code for the tag and its content.

Thanks,
Allan