Cannot Bind to asp:Dropdownlist in Bootstrap Modal - asp.net

For some reason, I cannot bind to an asp:Dropdownlist inside a Modal, and I can't figure out what I am missing. If I move the dropdownlist outside of the Modal, that data binds perfectly, but inside the Modal, the dropdownlist is always blank. Can someone please tell me what I am missing here:
Here is the Modal:
<div id="copyEmployeeModal" class="md-modal colored-header md-effect-9 prmiary">
<div class="md-content">
<div class="modal-header">
<button type="button" data-dismiss="modal3" aria-hidden="true" class="close md-close" onclick="return CloseModal();"><i class="icon s7-close"></i></button>
<h3 class="modal-title">
<asp:Label ID="lblcopyEmployeeModalTitle" runat="server" Text="Copy Employee Permissions"></asp:Label>
</h3>
</div>
<div class="modal-body form" style="padding: 0px!important;">
<asp:DropDownList ID="ddlNonGroupEmployees" runat="server" CssClass="form-control" AutoPostBack="true"></asp:DropDownList>
</div>
</div>
</div>
Here is the code to bind the dropdownlist:
ddlNonGroupEmployees.DataSource = GetNonGroupEmployees();
ddlNonGroupEmployees.DataTextField = "DisplayName";
ddlNonGroupEmployees.DataValueField = "EmployeeId";
ddlNonGroupEmployees.DataBind();
I know the above code has data, and as I said if I move the dropdownlist out of the modal and place it on the page, the data binds to the dropdownlist with no issues. Can anyone tell me what I am missing here?
Any assistance is greatly appreciated!

Related

bootstrap collapse collapses when clicking on calendar icon

I have a bootstrap panel-collapse as follows
<div class="panel-heading">
Business/Financial Information <a data-toggle="collapse" href="#BusFinInfo"><span class="glyphicon glyphicon-collapse-down"></span></a>
</div>
<div id="BusFinInfo" class="panel-collapse collapse">
and an ajax calendar extender as follows
<div class="input-group">
<asp:TextBox ID='txtTermNotifctnDate' runat='server' CssClass='form-control'></asp:TextBox>
<span class="input-group-addon" id="inputCalenderTermNotifctnDate">
<asp:LinkButton ID="lnkBtnTermNotifctnDate" runat="server"><i class="icon-Calendar"></i></asp:LinkButton>
</span>
<ajaxtoolkit:CalendarExtender ID="ceTermNotifctnDate" runat="server" TargetControlID="txtTermNotifctnDate"
PopupButtonID="lnkBtnExecutionDate" PopupPosition="BottomLeft" Format="MM/dd/yyyy"></ajaxtoolkit:CalendarExtender>
</div>
The problem is that when I click on the calendar control, the panel collapses.
Simple mistake that I overlooked. PopupButtonID was wrong and didn't match the link button.

Bootstrap3 align asp.net textboxes side by side to the asp.net RadioButtonList specific list items

I am trying to align asp.net text boxes to the asp.net RadioButtonList specific list items using bootstrap 3. I have tried Align textbox to right of radiobuttonlist listitem using that and achieved this
but, I am getting text boxes very far from the RadioButtonList instead of side by side close to the radio button list items. Experts, please help me where I am going wrong.
Here is my code so far,
<div class="col-xs-12">
<asp:Label ID="Label1" runat="server" CssClass="forQuestions">What language do you feel MOST comfortable speaking?</asp:Label>
<div class="form-group col-xs-12">
<div class="radio radiobuttonlist col-xs-6">
<asp:RadioButtonList ID="RadioButtonList2" runat="server" CssClass="forOptions">
<asp:ListItem>English is my first language</asp:ListItem>
<asp:ListItem>French is my first language</asp:ListItem>
<asp:ListItem>I am comfortable with both English and Frech</asp:ListItem>
<asp:ListItem>I am comfortable with both English and Another Language, please specify</asp:ListItem>
<asp:ListItem>Other, please specify</asp:ListItem>
</asp:RadioButtonList>
</div>
<div class="col-xs-12 col-xs-6">
</div>
<div class="col-xs-12 col-xs-6">
</div>
<div class="col-xs-6 col-xs-3">
<asp:TextBox ID="TextBox3" runat="server" MaxLength="499" Text="choice4" Visible="true" Width="400" class="form-control input-xs">
</asp:TextBox>
</div>
<div class="col-xs-12 col-xs-6">
<asp:TextBox ID="TextBox4" runat="server" MaxLength="499" Text="choice5" Visible="true" Width="400" class="form-control input-xs">
</asp:TextBox>
</div>
</div>
</div>

Dropdownlist in Update Panel Populated on SelectedIndexChanged of Another does not Populate

I do not know what happened here as I know for a fact that this code was working. The only thing I know for sure that changed in the project was an upgrade to jQuery 3.31. I have 2 dropdownlists in an UpdatePanel in a modal. The first list populates as expected. The second dropdown is supposed to populated OnSelectedIndexChanged event of the first. The event is firing, and there are 5 records returned, but the dropdownlist is blank.
UPDATE After looking at previous versions in TFS this did occur after upgrading to jQuery 3.31.
Here is the modal code:
<div id="modalTicketReportSelect" class="md-modal colored-header custom-width md-effect-9 primary">
<div class="md-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><i class="icon s7-close"></i></button>
<h3 class="modal-title">Ticket Type Report</h3>
</div>
<div class="modal-body form">
<div class="panel panel-alt3 panel-transparent">
<div class="panel-heading panel-heading-cg">
<button runat="server" id="btnAddToGrid" type="button" class="btn btn-alt3" data-dismiss="modal" onserverclick="btnAddToGrid_ServerClick" ><i class="icon s7-check"></i> Save</button>
<button type="button" data-dismiss="modal" class="btn btn-alt3 md-close"><i class="icon s7-close"></i> Cancel</button>
</div>
</div>
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="form-group">
<label class="text-danger">Ticket Type</label>
<asp:DropDownList ID="ddlTicketTypes" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlTicketTypes_SelectedIndexChanged"></asp:DropDownList>
</div>
<div class="form-group">
<label class="text-danger">Ticket Report</label>
<asp:DropDownList ID="ddlTicketReport" runat="server" CssClass="form-control" ></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
Here is the event handler:
protected void ddlTicketTypes_SelectedIndexChanged(object sender, EventArgs e)
{
//log postback
LoggerBA.Log(DB_Context, Path.GetFileName(Request.ServerVariables["SCRIPT_NAME"]), MethodBase.GetCurrentMethod().Name, UtilityBA.LoggerLevel.Info, "postback");
ticketProfileId = Guid.Parse(ddlTicketTypes.SelectedValue);
ticketProfileName = ddlTicketTypes.SelectedItem.Text;
//PopulateTicketReports(ticketProfileId.ToString());
Guid TicketProfileId = Guid.Empty;
if (Guid.TryParse(ticketProfileId.ToString(), out TicketProfileId))
{
LookupListItemBO SReportTypeListItem = LookupListBA.LookupListItem_GetByBothDatakeys(DB_Context, "SYS_REPORTTYPE", "REPORTTYPE_SINGLE");
Guid ReportTypeId = SReportTypeListItem.LookupListItemId;
List<CG.Reports.Views.ReportView.SavedReportBO> singleticketreports = CG.Reports.BLL.DevExpressBA.SavedReport_GetByModuleReportTypeId_AndTypeIdentifierId(DB_Context, "TICKET", ReportTypeId, TicketProfileId, true);
ddlTicketReport.DataSource = singleticketreports;
ddlTicketReport.DataTextField = "ReportName";
ddlTicketReport.DataValueField = "SavedReportId";
ddlTicketReport.DataBind();
ListItem oSelect = new ListItem("[Make Selection]", "");
ddlTicketReport.Items.Insert(0, oSelect);
ddlTicketReport.SelectedIndex = 0;
}
else
{
ddlTicketReport.Items.Clear();
}
}
Dev tools reveal no errors on page. I am stumped! Any assistance is greatly appreciated.

masterpage with findcontrol return null

I have a master page with a label... When i try to find this label on backend it returns me null... Anyone can help me?
<div class="container">
<div class="row" runat="server" id="Alert" visible="false">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
<strong>Atenção! </strong>
<asp:Label ID="lbAlert" for="Alert" runat="server" />
<asp:LinkButton ID="lbkbtnAtivar" for="Alert" runat="server" />
</div>
</div>
</div>
and backend.
Label lbAlert = (Label)this.Master.FindControl("lbAlert");
LinkButton lbkbtnAtivar = (LinkButton)this.Master.FindControl("lbkbtnAtivar");
If anyone know, help me please!! :)
Remove "Master"
Label lbAlert = (Label)this.FindControl("lbAlert");
LinkButton lbkbtnAtivar = (LinkButton)this.FindControl("lbkbtnAtivar");
You are already in the appropriate scope for the class. Therefore, "this" refers to the masterpage.

Dragging a popup modal extender inside an usercontrol

I'm trying to use a modal popup extender.
But I have a problem when using it inside an userControl.
I put the drag property true, and PopupDragHandleControlID but I can't drag the popup.
It seams that this problem happens only when I use the popup modal extender inside the userControl.
If I use it inside an aspx page, then it is OK.
Please can you help me how to deal with this problem?
Here is the code that I use in my user control:
<asp:LinkButton ID="lnk" runat="server" Text="Rezervo"></asp:LinkButton>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="lnk"
PopupControlID="pnlBooking" Drag="true" PopupDragHandleControlID="PopupHeader">
</ajax:ModalPopupExtender>
<div id="pnlBooking" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
Rezervo</div>
<div class="TitlebarRight">
</div>
</div>
<div class="popup_Body">
</div>
<div class="popup_Buttons">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
</div>

Resources