How do I sort gridview templatefield columns with tablesorter on client side

See more:

ASP.NET

jQuery

I am using Gridview controls in my asp.net web application and using tablesorter to sort content from client side. I have used below code for many years with IE browser and it is working fine. now we are using Edge browser and client side sorting is not working for TemplateField columns.

Please can any one help how to resolve this issue for edge browser.

Jquery code on client side:-

$(document).ready(function() {

$('#ctl00_GridViewResults').tablesorter({widgets: ['zebra'] });
});

ASPX page control code:- displayed only three columns - 1st column sorting is working because it is boundfield column and will not have any ids in html side.
2nd and 3rd columns sorting is not working due to TemplateFiled which has ids on client side.

<asp:BoundField DataField="LastAndFirstName" HeaderText="Individual Name" ItemStyle-Wrap="true" />
                 <asp:TemplateField HeaderText="Date of Contact"  SortExpression="ContactDate" ItemStyle-HorizontalAlign="Center">
                      <ItemTemplate>
                          <asp:Label  runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ContactDate", "{0:MM/dd/yyyy}") %>' />
                      </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Date of Entry" SortExpression="DateCreated"  ItemStyle-HorizontalAlign="Center">
                      <ItemTemplate>
                          <asp:Label  runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DateCreated") %>' />
                      </ItemTemplate>
                  </asp:TemplateField>

client side HTML code:

<tr class="odd">
						<td>BXXUS, JAXSON</td><td align="center">
                            <span id="ctl00_GridViewResults_ctl03_lblDateOfContact">05/25/2022</span>
                        </td><td align="center">
                            <span id="ctl00_GridViewResults_ctl03_lblDateOfEntry">05/25/2022</span>
                        </td>

What I have tried:

Jquery code on client side:-
<pre>$(document).ready(function() {

$('#ctl00_GridViewResults').tablesorter({widgets: ['zebra'] });
});

ASPX page control code:- displayed only three columns - 1st column sorting is working because it is boundfield column and will not have any ids in html side.
2nd and 3rd columns sorting is not working due to TemplateFiled which has ids on client side.

<asp:BoundField DataField="LastAndFirstName" HeaderText="Individual Name" ItemStyle-Wrap="true" />
                 <asp:TemplateField HeaderText="Date of Contact"  SortExpression="ContactDate" ItemStyle-HorizontalAlign="Center">
                      <ItemTemplate>
                          <asp:Label  runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ContactDate", "{0:MM/dd/yyyy}") %>' />
                      </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Date of Entry" SortExpression="DateCreated"  ItemStyle-HorizontalAlign="Center">
                      <ItemTemplate>
                          <asp:Label  runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DateCreated") %>' />
                      </ItemTemplate>
                  </asp:TemplateField>

client side HTML code:

<tr class="odd">
						<td>BXXUS, JAXSON</td><td align="center">
                            <span id="ctl00_GridViewResults_ctl03_lblDateOfContact">05/25/2022</span>
                        </td><td align="center">
                            <span id="ctl00_GridViewResults_ctl03_lblDateOfEntry">05/25/2022</span>
                        </td>