how to apply my qr code in nested repater control
Question
Answers
-
User-1330468790 posted
Hi Gopi.MCA,
This is a jQuery question and I think what you want to do is to retrieve the correct <td> elements.
More details, you could refer to below codes.
.aspx page
<form id="form1" runat="server"> <div> <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" OnRowDataBound="gvCustomers_RowDataBound" ShowFooter="true"> <Columns> <asp:TemplateField ItemStyle-Width="150px" HeaderText="Order No"> <ItemTemplate> <asp:HiddenField ID="OrderNo" runat="server" Value='<%#Eval("OrderNo") %>' /> </ItemTemplate> </asp:TemplateField> <asp:BoundField ItemStyle-Width="150px" DataField="OrderNo" HeaderText="Order No" Visible="false" /> <asp:BoundField ItemStyle-Width="150px" DataField="Item_Name" HeaderText="Item_Name" /> <asp:BoundField ItemStyle-Width="150px" DataField="ORder_Quantity" HeaderText="Order Quantity" /> <asp:TemplateField HeaderText="SubTable"> <ItemTemplate> <asp:HiddenField ID="hf_id" runat="server" Value='<%#Eval("OrderNo") %>' /> <asp:Repeater ID="Repeater3" runat="server"> <HeaderTemplate> <table border="1"> <tr> <td><b>Item Name</b></td> <td><b>Rate</b></td> <td><b>Qty</b></td> <td><b>Amount</b></td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td> <asp:Label ID="lbl_ItemName" runat="server"></asp:Label></td> <td> <asp:Label ID="lbl_Rate" runat="server" Text='<%# Eval("Rate") %>'></asp:Label></td> <td> <asp:Label ID="lbl_Qty" runat="server" Text='<%# Eval("Qty") %>'></asp:Label></td> <td> <asp:Label ID="lbl_PerPiece" runat="server" Text='<%# Eval("Amount") %>'></asp:Label></td> <td></td> </tr> </ItemTemplate> <FooterTemplate> </table> </FooterTemplate> </asp:Repeater> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> <script> $(function () { // Find the outside <tr> elements $('#<%=gvCustomers.ClientID%> > tbody > tr').filter(':not(:first-child)').filter(':not(:last-child)').each(function () { console.log($(this).find("td:nth-child(0)")); // Find the first td and add QR code $(this).find("td:nth(0)").ClassyQR({ create: true,// signals the library to create the image tag inside the container div. type: 'text',// text/url/sms/email/call/locatithe text to encode in the QR. on/wifi/contact, default is TEXT text: $(this).find("td:nth(1)").html()// the text to encode in the QR. }); // for each nested <tr> elements $(this).find('tr').filter(':not(:first-child)').each(function () { // Find the first td and add QR code $(this).find("td:nth(0)").ClassyQR({ create: true,// signals the library to create the image tag inside the container div. type: 'text',// text/url/sms/email/call/locatithe text to encode in the QR. on/wifi/contact, default is TEXT text: $(this).find("td:nth(1) span").html()// the text to encode in the QR. the second td contents }); }) }); }) </script>Code behind:
// Simulation of the data private static DataTable _gridviewDT; public static DataTable GridviewDT { get { if (_gridviewDT is null) { _gridviewDT = new DataTable(); _gridviewDT.Columns.Add("OrderNo", typeof(int)); _gridviewDT.Columns.Add("Item_Name", typeof(string)); _gridviewDT.Columns.Add("ORder_Quantity", typeof(int)); _gridviewDT.Rows.Add(1, "AA",100); _gridviewDT.Rows.Add(2, "BB", 200); _gridviewDT.Rows.Add(3, "TT", 50); _gridviewDT.Rows.Add(4, "KK", 2); _gridviewDT.Rows.Add(5, "LL", 6); } return _gridviewDT; } set { _gridviewDT = value; } } // Simulation of the data private static DataTable _repeaterDT; public static DataTable RepeaterDT { get { if (_repeaterDT is null) { _repeaterDT = new DataTable(); _repeaterDT.Columns.Add("Id", typeof(int)); _repeaterDT.Columns.Add("Rate", typeof(string)); _repeaterDT.Columns.Add("Qty", typeof(int)); _repeaterDT.Columns.Add("Amount", typeof(int)); _repeaterDT.Rows.Add(1, "Rate1_1",101, 5); _repeaterDT.Rows.Add(1, "Rate1_2",102, 15); _repeaterDT.Rows.Add(2, "Rate2_1",201, 25); _repeaterDT.Rows.Add(2, "Rate2_2",202, 50); _repeaterDT.Rows.Add(3, "Rate3_1",301, 30); _repeaterDT.Rows.Add(3, "Rate3_2",302, 60); _repeaterDT.Rows.Add(4, "Rate4_1",401, 70); _repeaterDT.Rows.Add(5, "Rate5_1",501, 45); } return _repeaterDT; } set { _repeaterDT = value; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridView(); } } protected void BindGridView() { gvCustomers.DataSource = GridviewDT; gvCustomers.DataBind(); } protected void gvCustomers_RowDataBound(object sender, GridViewRowEventArgs e) { if(e.Row.RowType == DataControlRowType.DataRow) { // Bind data to the nested Repeater with given ID GridViewRow row = e.Row; Repeater repeater = (Repeater) row.FindControl("Repeater3"); HiddenField hiddenField = (HiddenField)row.FindControl("hf_id"); DataTable dt = GetRepeaterDT(Convert.ToInt32(hiddenField.Value)); repeater.DataSource = dt; repeater.DataBind(); } } private DataTable GetRepeaterDT(int id) { return RepeaterDT.AsEnumerable() .Where(r => r.Field<int>("Id") == id).CopyToDataTable(); }Demo:
Hope helps.
Best regards,
Sean
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
