Is there a way to toggle a drop-down on a div using twitter-bootstrap?
I currently have a bunch of divs on my page in the form of square menu items. If a square menu item div is clicked I would like a drop-down to show similar to the 'Button dropdowns' example on the bootstrap website.
CODE:
The code below is using an asp.net repeater. Basically everything in the ItemTemplate is dynamically generated on the server so you can look at it as a for-loop to generate my primary navigation items. I would like to make it so when one of these primary navigation items is clicked that a sub-menu shows. I don't care if it uses a popover or a drop-down, but I need something to show sub-items. Please disregard any templating syntax.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul class="primaryNav">
</HeaderTemplate>
<ItemTemplate>
<li class="primary-nav-item">
<asp:HyperLink ID="navItem" runat="server" CssClass="mainNav-item-tile" NavigateUrl='<%# Eval("NavUrl") %>'>
<img width="64" height="64" src='<%# Eval("ImgSrc") %>' class="primary-nav-item-tile-img" />
<span><%# Eval("Title") %></span>
</asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
Related
I am creating a new Web UserControl in my ASP.NET Web Form project (using VB.NET). Normally, I could add custom attributes to my UserControl like in the solution for this question.
However, when it comes to the properties of the child controls, the name of each attribute becomes quite long as I tried to include the control name in it.
For example, I have simple user control like this:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="MyControl.ascx.vb"
Inherits="Web.MyControl" %>
<asp:Panel ID="pnl_Filter" runat="server">
<div class="d-flex row">
<div class="col-1">
<asp:Label ID="lbl_Subject" runat="server" Text="Subject" Font-Bold="true" />
</div>
<div class="col-5">
<asp:DropDownList ID="ddl_Subject" runat="server"
DataSourceID="ods_Subject"
DataTextField="subject_name"
DataValueField="subject_id">
</asp:DropDownList>
<asp:ObjectDataSource ID="ods_Subject" runat="server"
TypeName="Web.SubjectManager"
SelectMethod="GetSubjectList" />
</div>
....
</div>
</asp:Panel>
I wonder if I could create custom inner tag inside my UserControl so, when I place it in parent page, I could do something like this:
<uc:MyControl ID="mc_filter" runat="server">
<LabelProperties Text="Subject" Font-Bold="true" />
<DropdownProperties DataSourceID="ods_Subject"
DataTextField="subject_name"
DataValueField="subject_id" />
</uc:MyControl>
I have asp.net page like this: There is a form that contains all, inside it a LoginStatusand some other controls like TextBox and ImageButton.
My problem is that: when we press Enter in the Text box, the LogOut button is pressed, then the user goes out. There is a way to avoid it?
I tried with javascript, but my controls are inside ajax panel and it is very complex, there is a html way?
Regards,
Antonino
Wrap the TextBox or the HTML containing the TextBox with something like this:
<div onKeyDown="return (event.keyCode!=13);"> ... </div>
If you do want something to happen when the enter key is pressed other than the LogOut button you can wrap the content inside a Panel and assign a DefaultButton like this:
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="LogOut" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</asp:Panel>
Now when the enter key is pressed in either TextBox the Cancel button will fire.
I have dropdownlist controls which are populated from database. I want to apply bootstrap dropdownlist effect to it. How can I do it. I tried form-control but only the dropdown control changes and it is not like a BS dropdown, the list is the same as the one in asp.net.
The second image is what I want. and the first one is I get when I apply form control
Code:
<asp:DropDownList ID="ddlCType" runat="server" CssClass="form-control" DataSourceID="SqlDataSource1" DataTextField="Comp_Type" DataValueField="Type_ID" AutoPostBack="True" OnDataBound="DDLCTypeDataBound" Style="width: 400px">
It seems the bootstrap 3 is not able to pick 'form-control' from the rendered html from asp.net engine. So here are the options.
Option 1 : Assign the class during page load.
<script>
$().ready(function(){
$('#<%=ddlCType.ClientID%>').addClass("form-control");
});
</script>
Option 2 : : Use bootstrap-select plugin.
<asp:DropDownList ID="ddlCType" runat="server" CssClass="selectpicker" DataSourceID="SqlDataSource1" DataTextField="Comp_Type" DataValueField="Type_ID" AutoPostBack="True" OnDataBound="DDLCTypeDataBound" Style="width: 400px">
<script>
$().ready(function(){
$('#<%=ddlCType.ClientID%>').selectpicker();
});
</script>
Example : http://jsfiddle.net/DinoMyte/wd1z0zmg/8/
So I'm using Telerik's gui system and would like to insert a dropdown inside another one but I don't know how to do that.
This is what I've got so far
<telerik:RadToolBarDropDown runat="server" ToolTip="DropDown1" ImageUrl="~/Images/test.png">
<Buttons>
<telerik:RadToolBarButton runat="server" Text="Click me!" Value="TOGGLE_WALLS" CheckOnClick="true" ImageUrl="~/Images/checkmark.png"/>
</Buttons>
</telerik:RadToolBarDropDown>
More or less, a dropdown inside a dropdown. Is it possible? Do Telerik support this?
You can use an item template to nest a DropDownList or ComboBox in the RadToolBarDropDown:
<telerik:RadToolBarDropDown>
<Buttons>
<telerik:RadToolBarButton>
<ItemTemplate>
<telerik:RadDropDownList ID="RadDropDownList1" runat="server">
</telerik:RadDropDownList>
</ItemTemplate>
</telerik:RadToolBarButton>
</Buttons>
</telerik:RadToolBarDropDown>
I am having problem while clicking on the image wrapped in an Anchor tag. The link is not appearing in the proper order and it shows server error following is my code snippet.
have a look at this, am I doing something wrong
<asp:Repeater ID="repeater1" DataSourceID="datasource1" runat="server" EnableViewState="False">
<ItemTemplate>
<div id="ads">
<a href='<%# Eval("Link") %>' target="_blank">
<asp:Image runat="server" Width="228" Height="189" ToolTip='<%# Eval("Description") %>' ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("Image")) %>' />
</a>
</div>
</ItemTemplate>
</asp:Repeater>
if the Link is www.example.com then when I click on the image I get the following url along with localhost/www.example.com appended and it show a server error there.
so why not it navigates to this URL alone i have also used resolveclienturl method too.
kindly help me to solve this problem.