Loading nested gridview with jquery for very large data
Question
Answers
-
User-893317190 posted
Hi shahid.majeed,
I find your code
$('#bookings td').load('conferenceBookerBookingList.aspx?conferenceBooker=' + ID + ' #bookingList');Do you want to load an aspx page?
Normally, we use ajax to load json data and create html element in client side.
Below is my code.
#GridView1 table{ width:100% } </style> <script src="../Scripts/jquery-1.9.1.js"></script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1"> <Columns> <asp:TemplateField HeaderText="Action"> <ItemTemplate> <asp:HiddenField runat="server" Value='<%#Eval("CategoryId") %>' > </asp:HiddenField> <img src="/images/icons/mini_add.png" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" /> </Columns> </asp:GridView> <script> $(function () { //bind event to every image in the gridview $("#GridView1 img").click(function () { //get the tr element the image is in let tr = $(this).closest("tr"); // if the user want to close if ($(this).attr("src") === "/images/icons/clear.png") { //change it to the open icon $(this).attr("src", "/images/icons/mini_add.png") // ensure the nested table is loaded if (tr.next().find("table").length == 1) { //hide the table tr.next().hide(); return; } } //if the user wants to open the nested table if ($(this).attr("src") === "/images/icons/mini_add.png") { // change the img to close icon $(this).attr("src", "/images/icons/clear.png"); // ensure the table is loaded if (tr.next().find("table").length == 1) { //show the table tr.next().show(); return; } //here the table is not loaded //create an loading image var image = "<tr><td colspan='3' style='text-align:center'><img src='/images/icons/reload.png' width='200px' /></td></tr>"; //insert after the tr tr.after(image); //load the table $.ajax({ "url": "/Services/res1.ashx", "data": { id: $(this).siblings("input[type=hidden]").val() }, "dataType": "json", "success": function (data) { //create a table element var table = "<tr ><td colspan='3'><table>"; //loop through the data and insert into the created table $.each(data, function (index, ele) { var content="<tr >" content += "<td style='border:1px solid black'>" + ele.Id + "</td>"; content += "<td style='border:1px solid black'>" + ele.ProductName + "</td>"; content += "<td style='border:1px solid black'>" + ele.Description + "</td>"; content += "<td style='border:1px solid black'>" + ele.ImagePath + "</td>"; content += "<td style='border:1px solid black'>" + ele.UnitPrice + "</td>"; content += "</tr>"; table += content; }) table += "</table></td></tr>"; //remove the loading img tr.next().remove(); //insert the newly created table after the tr tr.after(table); } }) } }) }) </script> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WingtipToysConnectionString2 %>" SelectCommand="SELECT [CategoryName], [Description], [CategoryID] FROM [Categories]"></asp:SqlDataSource> </form>Code of ashx.
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; Thread.Sleep(3000); SqlConnection con = new SqlConnection(constr); using (SqlCommand com = new SqlCommand("select * from products where CategoryId=@id", con)) { com.Parameters.AddWithValue("id", context.Request["id"]);//get the CategoryId con.Open(); List<Product> list = new List<Product>(); using (SqlDataReader reader=com.ExecuteReader()) { while (reader.Read()) { Product pro = new Product(); pro.Description = reader.GetString(2); pro.Id = reader.GetInt32(0); pro.ProductName = reader.GetString(1); pro.ImagePath = reader.GetString(3); pro.UnitPrice = reader.GetDouble(4); list.Add(pro); } } ; JavaScriptSerializer serializer = new JavaScriptSerializer(); context.Response.Write(serializer.Serialize(list)); con.Close(); con.Dispose(); } } public class Product { public int Id { get; set; } public string ProductName { get; set; } public string Description { get; set; } public string ImagePath { get; set; } public double UnitPrice { get; set; } }The result.
Best regards,
Ackerly Xu
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
All replies
-
User-893317190 posted
Hi shahid.majeed,
I find your code
$('#bookings td').load('conferenceBookerBookingList.aspx?conferenceBooker=' + ID + ' #bookingList');Do you want to load an aspx page?
Normally, we use ajax to load json data and create html element in client side.
Below is my code.
#GridView1 table{ width:100% } </style> <script src="../Scripts/jquery-1.9.1.js"></script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1"> <Columns> <asp:TemplateField HeaderText="Action"> <ItemTemplate> <asp:HiddenField runat="server" Value='<%#Eval("CategoryId") %>' > </asp:HiddenField> <img src="/images/icons/mini_add.png" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" /> </Columns> </asp:GridView> <script> $(function () { //bind event to every image in the gridview $("#GridView1 img").click(function () { //get the tr element the image is in let tr = $(this).closest("tr"); // if the user want to close if ($(this).attr("src") === "/images/icons/clear.png") { //change it to the open icon $(this).attr("src", "/images/icons/mini_add.png") // ensure the nested table is loaded if (tr.next().find("table").length == 1) { //hide the table tr.next().hide(); return; } } //if the user wants to open the nested table if ($(this).attr("src") === "/images/icons/mini_add.png") { // change the img to close icon $(this).attr("src", "/images/icons/clear.png"); // ensure the table is loaded if (tr.next().find("table").length == 1) { //show the table tr.next().show(); return; } //here the table is not loaded //create an loading image var image = "<tr><td colspan='3' style='text-align:center'><img src='/images/icons/reload.png' width='200px' /></td></tr>"; //insert after the tr tr.after(image); //load the table $.ajax({ "url": "/Services/res1.ashx", "data": { id: $(this).siblings("input[type=hidden]").val() }, "dataType": "json", "success": function (data) { //create a table element var table = "<tr ><td colspan='3'><table>"; //loop through the data and insert into the created table $.each(data, function (index, ele) { var content="<tr >" content += "<td style='border:1px solid black'>" + ele.Id + "</td>"; content += "<td style='border:1px solid black'>" + ele.ProductName + "</td>"; content += "<td style='border:1px solid black'>" + ele.Description + "</td>"; content += "<td style='border:1px solid black'>" + ele.ImagePath + "</td>"; content += "<td style='border:1px solid black'>" + ele.UnitPrice + "</td>"; content += "</tr>"; table += content; }) table += "</table></td></tr>"; //remove the loading img tr.next().remove(); //insert the newly created table after the tr tr.after(table); } }) } }) }) </script> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:WingtipToysConnectionString2 %>" SelectCommand="SELECT [CategoryName], [Description], [CategoryID] FROM [Categories]"></asp:SqlDataSource> </form>Code of ashx.
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; Thread.Sleep(3000); SqlConnection con = new SqlConnection(constr); using (SqlCommand com = new SqlCommand("select * from products where CategoryId=@id", con)) { com.Parameters.AddWithValue("id", context.Request["id"]);//get the CategoryId con.Open(); List<Product> list = new List<Product>(); using (SqlDataReader reader=com.ExecuteReader()) { while (reader.Read()) { Product pro = new Product(); pro.Description = reader.GetString(2); pro.Id = reader.GetInt32(0); pro.ProductName = reader.GetString(1); pro.ImagePath = reader.GetString(3); pro.UnitPrice = reader.GetDouble(4); list.Add(pro); } } ; JavaScriptSerializer serializer = new JavaScriptSerializer(); context.Response.Write(serializer.Serialize(list)); con.Close(); con.Dispose(); } } public class Product { public int Id { get; set; } public string ProductName { get; set; } public string Description { get; set; } public string ImagePath { get; set; } public double UnitPrice { get; set; } }The result.
Best regards,
Ackerly Xu
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
-
User1487175000 posted
I notice more atleast for my script if seems load data overwrite to all table dynamically. What i mean if user click first + image to load the data, after that user click second + image to load the data.
Now after this if user click again first i+ image then it shows the second time loaded table :(.
Here is pictures what i mean table loaded multiple time if user click multiple time at image before data loaded.
When user click - image then one table remove
-
User1487175000 posted
HI,
Windows.print() method will print complete page. However i placed my gridview inside a div with name "divPrint".
I tried to write some script, so first i get the print div element. Then i tried to get table element of my gridview which i currently hardcoded.
after that i simply print the innerHtml. Its open print window with my data. Its shows all the hiden table as well. Eventhough i havent set to show hidden table. its good i dont need to show the hidden elements :).
But problem is that main gridview does not follow the style its simply shows as string without formating.
<script type="text/javascript"> $('.print').click(function () { var parentContent = document.getElementById("divPrint"); //Step1: Need to find Table inside divPrint. var reportTable = document.getElementById("MainContent_gvConferenceBooker"); //Step2: Show all hide rows in the table var WinPrint = window.open('', '', 'letf=0,top=0,width=400,height=400,toolbar=0,scrollbars=0,status=0'); WinPrint.document.write(reportTable.innerHTML); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); WinPrint.close(); return false; }); </script><div id="divPrint" style="vertical-align:top; text-align:center;"> <asp:GridView ID="gvConferenceBooker" runat="server" AutoGenerateColumns="False" Width="90%" GridLines="None" DataKeyNames="Konferensbokare" ShowFooter="True" OnRowDataBound="gvConferenceBooker_RowDataBound" HorizontalAlign="Center"> <Columns> <asp:TemplateField> <ItemTemplate> <img id="expand" src="../images/expand.png" class="view" data-id='<%#Eval("Konferensbokare") %>' data-status="not-loaded" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="Konferensbokare" HeaderText="Konferensbokare"> <ControlStyle Width="100%" /> <FooterStyle HorizontalAlign="Left" VerticalAlign="Top" /> <HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" /> </asp:BoundField> <asp:BoundField DataField="Centralen" HeaderText="Centralen"> <ControlStyle Width="100%" /> <FooterStyle HorizontalAlign="Right" VerticalAlign="Top" /> <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" /> </asp:BoundField> <asp:BoundField DataField="Odenplan" HeaderText="Odenplan"> <ControlStyle Width="100%" /> <FooterStyle HorizontalAlign="Right" VerticalAlign="Top" /> <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" /> </asp:BoundField> <asp:BoundField DataField="Strandvägen" HeaderText="Strandvägen"> <ControlStyle Width="100%" /> <FooterStyle HorizontalAlign="Right" VerticalAlign="Top" /> <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" /> </asp:BoundField> <asp:BoundField DataField="Belopp" HeaderText="Totalt"> <ControlStyle Width="100%" /> <FooterStyle HorizontalAlign="Right" VerticalAlign="Top" /> <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" /> </asp:BoundField> <asp:BoundField DataField="Debiterat" HeaderText="Debiterat"> <ControlStyle Width="100%" /> <FooterStyle HorizontalAlign="Right" VerticalAlign="Top" /> <HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" /> <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" /> </asp:BoundField> </Columns> </asp:GridView> </div>
