I have below codes in which a DropDownList is palced inside the Reapater control.
But the codes are not working beacuse the DropDownList ddlLedgersCr is placed inside the Reapter conrol.
How can apply select2 the DropDownList inside Reapter contro?
help me in this issue
<asp:Repeater ID="RptrVoucher" runat="server" OnItemDataBound="RptrVoucher_ItemDataBound">
<HeaderTemplate>
<table class="table table-borderless bg-gradient-light" style="width: 100%">
<thead>
<tr class="border-top border-bottom">
<th class="col-md-4">Particulars (Cr)</th>
<th class="col-md-4">Amount</th>
<th></th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<tbody>
<tr>
<td>
<asp:DropDownList ID="ddlLedgersCr" runat="server" CssClass="form-control form-control-sm select2-info" AutoPostBack="true" ClientIDMode="Static" OnSelectedIndexChanged="ddlLedgersCr_SelectedIndexChanged" TabIndex="3"></asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvddlLedgersCr" runat="server" ErrorMessage="* Required" CssClass="text-sm text-danger text-bold" ControlToValidate="ddlLedgersCr" InitialValue="0" ValidationGroup="Grp1"></asp:RequiredFieldValidator>
<asp:Label ID="LblCurBalanceCr" runat="server" Text="" CssClass="text-sm text-fuchsia text-bold"></asp:Label>
</td>
<td>
<asp:TextBox ID="TxtAmountCr" runat="server" CssClass="form-control form-control-sm" AutoPostBack="true" TabIndex="4" OnTextChanged="TxtAmountCr_TextChanged"></asp:TextBox>
<asp:RequiredFieldValidator ID="RfvTxtAmountCr" runat="server" ErrorMessage="* Required" ControlToValidate="TxtAmountCr" CssClass="text-sm text-danger text-bold" ValidationGroup="Grp1"></asp:RequiredFieldValidator>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtenderTxtAmountCr" runat="server" FilterType="Numbers,Custom" TargetControlID="TxtAmountCr" ValidChars="." />
</td>
<td>
<asp:LinkButton ID="LnkAddRow" runat="server" CssClass="btn btn-danger" OnClick="LnkAddRow_Click" CausesValidation="false">+ </asp:LinkButton>
<asp:LinkButton ID="LnkRemoveRow" runat="server" CssClass="btn btn-danger" OnClick="LnkRemoveRow_Click" CausesValidation="false">- </asp:LinkButton>
</td>
</tr>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="ddlLedgersCr" />
<asp:PostBackTrigger ControlID="TxtAmountCr" />
<asp:AsyncPostBackTrigger ControlID="LnkAddRow" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="LnkRemoveRow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
<FooterTemplate>
<tr class="border-top border-bottom">
<td>Total</td>
<td>
<asp:TextBox ID="TxtTotal" runat="server" CssClass="form-control form-control-sm text-bold" Enabled="false"></asp:TextBox></td>
<td></td>
</tr>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
I need to bind ddlLedgersCr DropDownList to select2 searchable DropDownList through JavaScript as per below codes.
<script>
$(document).ready(function () {
$("#<%=dddlLedgersCr.ClientID%>").select2({
placeholder: "Select an option",
allowClear: true
});
});
</script>