I am generating panel dynamically using a ListView control. I'm trying to use Bootstrap collapsible panels. The problem I'm having is using the DataBinder.Eval as the id of the collapsible panel body. I am assuming that the href is correct because if I hard-code the id rather than use the DataBinder.Eval, the panel opens and closes correctly, but when I substitute the hard-coded id for the DataBinder.Eval the panel does not open. Here is my HTML:
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#<%#Eval("ModuleKey") %>"><%#Eval("ModuleKey") %></a>
</h4>
</div>
<div id='<%# DataBinder.Eval(Container.DataItem, "ModuleKey")%>' class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
</div>
Any assistance is greatly appreciated!
Related
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.
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!
I am creating a side menu using bootstrap accordion collapse and making use of knockout js binding. My problem is in assigning the right HTML element ids for toggle and collapse purposes as required by bootstrap. I have though of using the $indexin knockout to autogenerate the id. But not coming right. See my code below and comments:
<div id="content" style="font-size: 8.8pt">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="news">
<div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()"><!--accordionItems is an observableArray with my accordion objects. Object has a header and a list of linkitems. Each linkItem object has linkText and url-->
<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><!--want to do something like: href="#"+$index-->
<p class="panel-title" data-bind="text: nameHead"></p>
</a> <!--binding a collapse header here.-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><!--want to autogenerate the id here using knockout for reference above-->
<ul class="Newsbar panel-body" data-bind="foreach: list">
<li><a data-bind="attr: { href: url }, text: linkText"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
well i already done something like this before hope this helps
<div class="panel-heading" role="tab" id="headingOne" data-bind="foreach: accordionItems()">
<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" aria-expanded="true" aria-controls="collapseOne" data-bind="attr:{href:'#collapseOne'+$index() }" >
<p class="panel-title" data-bind="text: nameHead"></p>
</a> <!--binding a collapse header here.-->
<div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne" data-bind="attr:{id:'collapseOne'+$index()}">
<ul class="Newsbar panel-body" data-bind="foreach: list">
<li><a data-bind="attr: { href: url }, text: linkText"></a></li>
</ul>
</div>
</div>
Let me explain here :
You just need to create dynamic id and href in oder to work with this stuff .
Well lucky you have one loop over if incase there exists multiple loops use $parentContext.index() and so on .
You just need to use attr to create dynamic id and href using $index() which gives you unique id everytime it loops .
I have a topbar over my main nav. They are both part of the header in the master page. In this topbar, I have a register and a login link. They are both supposed to trigger a modal respectively. (well, the register link actually triggers a series of modals that are part of a registration process).
The modals are not part of the Master Page obviously. They are in a separate page called "register.aspx" and "login.aspx"
My question is: How do I call these modals? I tried the normal Bootstrap Modal invocation but no luck.
I dont figure this out I will make the Default page a static page and run the rest of the site from the Master Page but I'd rather not do that.
This is the code:
master page
<div class="top-links">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 email">
<ul class="nav navbar-nav pull-left">
<li><a runat="server" href="mailto:brazilvagroup#outlook.com"><i class="fa fa-envelope"></i> brazilvagroup#outlook.com</a></li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right pull-right">
<li><a runat="server" data-toggle="modal" data-target="#getstarted" href="#getstarted"><i class="fa fa-user"></i> Sign up</a></li><%--~/Account/Register--%>
<li><a runat="server" href="~/Account/Login">Log in <i class="fa fa-sign-in"></i></a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right pull-right">
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
</div>
<%-- Main Nav is down here --%>
the register.aspx page
<div class="modal" id="getstarted" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Don't create these as separate pages. This is something more easily done by creating them as user controls and importing them into the page, where the modal can than be called by script. Better yet though, don't put the modal markup in the user control as it makes it less portable and re-usable. Reference the user control from a page where the reference can be wrapped in the content area of a dialog.
Basically though, this isn't a good approach. If you want the pages to be separate, don't put the modal HTML code in them. Create them as ordinary .aspx pages without any html markup that would designate it as a bootstrap modal. Then, put your modal markup in the .aspx page or .master and you can put an iframe in the content area of the modal. The design approach already taken is more similar to what you would do with winforms, where a page is a separate form and can be a modal dialog.
I have run into an interesting dilemma. I am trying to create a collapsible div to hold my data, and thus far it does not work. I thought it might be the jquery that is giving me my nightmare but after referencing it to google I still get the same problem. Once I click to collapse/expand. It does not do anything. Can you guys see anything wrong ?
<div class="panel-group" id="accordion" style="margin-top: 15px">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Complete Database Export</a>
<small style="margin-left: 10px">(click here)</small>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row" style="text-align: center; margin-top: 10px">
<asp:Label runat="server" CssClass="label">Complete Database Export</asp:Label>
<table style="width: 100%; margin-top: 10px">
<tr>
<td>
<p class="fg-color-grey">Enter the email addresses where the report will be sent to, seperated by commas:</p>
</td>
</tr>
<tr>
<td style="text-align: center">
<asp:TextBox ID="txtDumpEmails" runat="server" CssClass="genericTextBox widthOverride"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnDump" runat="server" Text="Generate Complete Database Export" CssClass="simpleButton marginOverride" OnClick="btnDatabaseDump_Click" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Is there anything I can try to check or that I have forgotten ?
Thanks in advance. I am really frustrated with this at the moment.
EDIT
I should also note that I do not get any errors in the web inspector console.
Ok, the code that you have will do the collapse/expand but it is on the link i.e.
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Complete Database Export</a>
and not on the following code:
<small style="margin-left: 10px">(click here)</small>
Expanded screen shot
Collapsed screen shot
If by selecting the 'Complete Database Export' link it is not exanding/collapsing you need to check that all your bootstrap resource files are loading correctly.
I would guess at the js file being missing which you could test by referencing the cdn i.e.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>