<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" CssClass="patient-table" Width="100%" AllowPaging="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
Registration
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Registration") %>
<br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Name
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Patient_Name") %> <br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Gender
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Gender") %> <br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Date/time
</HeaderTemplate>
<ItemTemplate>
<%# Eval("DateTime") %> <br></br>
<%# Eval("Time") %> <br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Disease
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Disease") %> <br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Ward#
</HeaderTemplate>
<ItemTemplate>
<%# Eval("BedNo") %> <br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Consultant
</HeaderTemplate>
<ItemTemplate>
<%# Eval("DoctorName") %> <br></br>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Options
</HeaderTemplate>
<ItemTemplate>
<div class="option-icons" style="display:flex; justify-content:space-around;">
<asp:HiddenField ID="HiddenField_DiabMoniter" runat="server" Value='<%# Bind("DiabMoniter")%>' />
<asp:HiddenField ID="HiddenField_NutribMoniter" runat="server" Value='<%# Bind("NutribMoniter")%>' />
<asp:HiddenField ID="HiddenField_CritMoniter" runat="server" Value='<%# Bind("CritMoniter")%>' />
<asp:HiddenField ID="HiddenField_ExerbMoniter" runat="server" Value='<%# Bind("ExerbMoniter")%>' />
<asp:HiddenField ID="HiddenField_MedibMoniter" runat="server" Value='<%# Bind("MedibMoniter")%>' />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" OnClientClick="openInNewTab();"
commandArgument='<%#Eval("VisitReg")%>'>
<img src="../Nurseimg/11.1.png" alt="11.1.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click" OnClientClick="openInNewTab();"
CommandArgument='<%#Eval("VisitReg")%>'><img src="../Nurseimg/10.png" alt="10.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick ="LinkButton3_Click"
CommandArgument='<%#Eval("VisitReg")%>'> <img src="../Nurseimg/11.png" alt="11.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" OnClick ="LinkButton4_Click" CommandArgument='<%#Eval("VisitReg")%>' >
<img src="../Nurseimg/7.png" alt="7.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton5" runat="server" OnClick ="LinkButton5_Click" CommandArgument='<%#Eval("VisitReg")%>'>
<img src="../Nurseimg/4.png" alt="4.png" />
</asp:LinkButton>
<%-- <asp:LinkButton ID="LinkButton6" runat="server">
<img src="../Nurseimg/5.png" alt="5.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton7" runat="server">
<img src="../Nurseimg/3.1.png" alt="3.1.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton8" runat="server">
<img src="../Nurseimg/2.png" alt="2.png" />
</asp:LinkButton>
<asp:LinkButton ID="LinkButton9" runat="server">
<img src="../Nurseimg/1.1.png" alt="1.1.png" />
</asp:LinkButton>--%>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var gridViewContainer = document.querySelector('.table-container');
var body = document.body;
// Prevent body scroll while hovering over the grid view
gridViewContainer.addEventListener('mouseenter', function () {
body.style.overflow = 'hidden';
});
gridViewContainer.addEventListener('mouseleave', function () {
body.style.overflow = 'auto';
});
// Lazy loading on scroll
gridViewContainer.addEventListener('scroll', function () {
if (gridViewContainer.scrollTop + gridViewContainer.clientHeight >= gridViewContainer.scrollHeight) {
// Perform lazy loading when reaching the bottom
__doPostBack('<%= UpdatePanel1.ClientID %>', 'ScrollPostBack');
}
});
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
I have an issue with my ASPX code. When I retrieve data from the database and implement lazy loading functionality in the GridView (so that as I scroll down, more data keeps loading), the icons in the GridView—which are meant to redirect to a new tab—stop working. I want the data to load on demand as I scroll, while also ensuring that when I click the icons, the page successfully redirects to a new tab.