Showing text in below of image in asp.net menu control

Showing text in below of image in asp.net menu control - c#

I have tried to show the menu name below of menu icon,. but I don't know how to do that.
My ASPX Code
<asp:menu runat="server" ItemWrap="true" Orientation="Horizontal">
<Items>
<asp:MenuItem ImageUrl="~/Images/Admin.png" Selectable="true" Text="System" />
<asp:MenuItem ImageUrl="~/Images/user.png" Selectable="true" Text="User" />
<asp:MenuItem ImageUrl="~/Images/cut.png" Selectable="true" Text="Cut" />
<asp:MenuItem ImageUrl="~/Images/edit-copy.png" Selectable="true" Text="Copy" />
</Items>
</asp:menu>
Output

Please try putting <br> tag while setting Text to menu Item .
Then the menu will be
<asp:Menu runat="server" ItemWrap="true" Orientation="Horizontal">
<Items>
<asp:MenuItem ImageUrl="~/Images/Admin.png" Selectable="true" Text="<br> System" />
<asp:MenuItem ImageUrl="~/Images/user.png" Selectable="true" Text="<br> User" />
<asp:MenuItem ImageUrl="~/Images/cut.png" Selectable="true" Text="<br> Cut" />
<asp:MenuItem ImageUrl="~/Images/edit-copy.png" Selectable="true" Text="<br> Copy" />
</Items>
</asp:Menu>

Related

How to pass variable to asp MenuItem

I have a ASP Menu in my webpage:
<asp:Menu ID="Menu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="" Value="home" />
....
</Items>
</asp:Menu>
All I want is: The Text tag of MenuItem displays the user name: Session["user"].Tostring()
with code behind:
IDMenuItem.Text= Session["user"].Tostring();
and
<asp:MenuItem Text="//the user name will be displayed here" Value="home" />
But there is no ID tag in MenuItem. Help???

Try:
Menu.Items[0].Text = Session["user"].ToString();

Add more than one item in LayoutColumn in Ext.net

I am trying to create 2 different columns, and within each column I want to have multiple items. For instance a ComboBox, and 2 DateFields in one column.
I publish the code, and it gives me and error when I try to run it saying "Only one Component allowed in this Collection"
<body>
<form id="MetricsForm" runat="server">
<ext:ResourceManager ID="MetricsManager" runat="server" />
<ext:Viewport ID="MetricsViewPort" runat="server"></ext:Viewport>
<asp:SqlDataSource ID="DMSSQL2DataSource" runat="server" ConnectionString="" />
<asp:SqlDataSource ID="LocalDataSource" runat="server" ConnectionString="" />
<ext:TabPanel ID="TabPanel" runat="server">
<Items>
<ext:Panel runat="server" Title="Step 1" ID="Tab1">
<Items>
<ext:Panel ID="Panel1"
runat="server"
Title="Step 1: Choose date span and set spans"
Region="North"
Height="200"
Width="475"
MinWidth="225"
MaxWidth="475">
<Items>
<ext:Container runat="server" Layout="RowLayout" Height="200" >
<Items>
<ext:ColumnLayout runat="server" ID="MetricsColumnLayout">
<Columns>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:RadioGroup runat="server" ID="ChooseSpan" Selectable="true" ColumnsNumber="1" >
<Items>
<ext:Radio ID="RadioAll" runat="server" BoxLabel="Show All" InputValue="0" />
<ext:Radio ID="RadioMonth" runat="server" BoxLabel="Choose Date Range(By Month)" InputValue="1" />
<ext:Radio ID="RadioDate" runat="server" BoxLabel="Choose Date Range(By Dates)" InputValue="2" />
</Items>
</ext:RadioGroup>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:ComboBox runat="server" ID="MonthComboBox" Selectable="true" SelectedIndex="0" StyleSpec="margin-bottom:4px;" Width="200" >
<Items>
<ext:ListItem Text="Any Month" Value="0" />
<ext:ListItem Text="January" Value="1" />
<ext:ListItem Text="February" Value="2" />
<ext:ListItem Text="March" Value="3" />
<ext:ListItem Text="April" Value="4" />
<ext:ListItem Text="May" Value="5" />
<ext:ListItem Text="June" Value="6" />
<ext:ListItem Text="July" Value="7" />
<ext:ListItem Text="August" Value="8" />
<ext:ListItem Text="September" Value="9" />
<ext:ListItem Text="October" Value="10" />
<ext:ListItem Text="November" Value="11" />
<ext:ListItem Text="December" Value="12" />
</Items>
</ext:ComboBox>
<ext:DateField
ID="StartDateField"
runat="server"
FieldLabel="Start"
Vtype="daterange"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200">
<CustomConfig>
<ext:ConfigItem Name="endDateField" Value="#{EndDateField}" Mode="Value" />
</CustomConfig>
<Listeners>
</Listeners>
</ext:DateField>
<ext:DateField
ID="EndDateField"
runat="server"
Vtype="daterange"
FieldLabel="End"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200">
<CustomConfig>
<ext:ConfigItem Name="startDateField" Value="#{StartDateField}" Mode="Value" />
</CustomConfig>
<Listeners>
</Listeners>
</ext:DateField>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="Step 2" ID="Tab2">
</ext:Panel>
</Items>
</ext:TabPanel>
<div>
</div>
</form>

I'm not 100% sure what layout you are trying to configure, but it would be best to avoid using the Layout Controls as they have been removed from Ext.NET 2. You can use the .Layout property.
The following sample demonstrates replacing the Layout control with .Layout property.
Example
<%# Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TabPanel runat="server">
<Items>
<ext:Panel runat="server" Title="Step 1">
<Items>
<ext:Panel
runat="server"
Title="Step 1: Choose date span and set spans"
Region="North"
Height="200"
Width="475"
MinWidth="225"
MaxWidth="475">
<Items>
<ext:Container runat="server" Layout="ColumnLayout" Height="200">
<Items>
<ext:RadioGroup runat="server" Selectable="true" ColumnsNumber="1" >
<Items>
<ext:Radio runat="server" BoxLabel="Show All" InputValue="0" />
<ext:Radio runat="server" BoxLabel="Choose Date Range(By Month)" InputValue="1" />
<ext:Radio runat="server" BoxLabel="Choose Date Range(By Dates)" InputValue="2" />
</Items>
</ext:RadioGroup>
<ext:ComboBox
runat="server"
Selectable="true"
SelectedIndex="0"
StyleSpec="margin-bottom:4px;"
Width="200">
<Items>
<ext:ListItem Text="Any Month" Value="0" />
<ext:ListItem Text="January" Value="1" />
<ext:ListItem Text="February" Value="2" />
<ext:ListItem Text="March" Value="3" />
<ext:ListItem Text="April" Value="4" />
<ext:ListItem Text="May" Value="5" />
<ext:ListItem Text="June" Value="6" />
<ext:ListItem Text="July" Value="7" />
<ext:ListItem Text="August" Value="8" />
<ext:ListItem Text="September" Value="9" />
<ext:ListItem Text="October" Value="10" />
<ext:ListItem Text="November" Value="11" />
<ext:ListItem Text="December" Value="12" />
</Items>
</ext:ComboBox>
<ext:DateField
runat="server"
FieldLabel="Start"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200"
/>
<ext:DateField
runat="server"
FieldLabel="End"
AnchorHorizontal="100%"
EnableKeyEvents="true"
Width="200"
/>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="Step 2"/>
</Items>
</ext:TabPanel>
</form>
</body>
</html>

Just wrap the things in a Container.
<ext:Container
runat="server"
Width="600"
Height="300"
Layout="ColumnLayout">
<Items>
<ext:RadioGroup runat="server" ColumnWidth="0.5">
<Items>
<ext:Radio runat="server" BoxLabel="1" />
<ext:Radio runat="server" BoxLabel="2" />
</Items>
</ext:RadioGroup>
<ext:Container runat="server" ColumnWidth="0.5">
<Items>
<ext:ComboBox runat="server" />
<ext:DateField runat="server" />
<ext:DateField runat="server" />
</Items>
</ext:Container>
</Items>
</ext:Container>

How can I get my menu control to center?

I'm using ASP.Net's Menu control http://msdn.microsoft.com/en-us/library/ecs0x9w5%28v=vs.80%29.aspx, which I'm trying to position.
Markup for the menu is this
<asp:Menu ID="SiteMenu" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11">
<Items>
<asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
So I just figured I'd add tags around it,
<div horizontal-align:center>
<asp:Menu ID="SiteMenu" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11">
<Items>
<asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
but nah that didn't work. So what's my next move?

oops , you should use margins and widths :
<div style="margin:0 auto 0 auto; width:750px;">
<asp:Menu ID="SiteMenu" runat="server" Orientation="Horizontal" BorderColor="Blue" Font-Size="XX-Large" StaticMenuItemStyle-BackColor = "Pink" StaticMenuItemStyle-HorizontalPadding = "11">
<Items>
<asp:MenuItem Text="Articles" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Wiki" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Forums" Value="New Item"></asp:MenuItem>
<asp:MenuItem Text="Links" Value="New Item"></asp:MenuItem>
</Items>
</asp:Menu>
</div>

Use margin like:
margin:0 auto;
This help you make it automatically centered to its parent element.

What causes the extra blank line after menu items in my ASP.NET Menu under IE8?

I am using asp:Menu for the first time and running into a problem.
I have a horizontal menu with four options. The third option is "Filter". Hovering over "Filter" produces a vertical drop-down menu with several options, two of which are "Filter Category One" and "Filter Category Two". The dropdown menu with those options looks fine until I hover over one of the options (such as "Filter Category One") that has children.
At that time a blank line appears under "Filter Category One" at the same time that its own menu options (children) appear off to the right. Also a blank line appears at the bottom of the level-3 menu, which is the child menu that appears when I hover over "Filter Category One". In other words, the menu with the options Filter 1.1, Filter 1.2, and Filter 1.3 (see below) has a blank line below Filter 1.3.
I suspect (but am not positive) that the blank line between Filter Category One and Filter Category Two when hovering over Filter Category One has the same cause as the extra blank line that appears after Filter 1.3.
My customer uses only IE 8. I browsed using Firefox and Chrome and did not experience this particular problem. (Many other problems showed up, but not this particular one.)
I've found complaints about asp:Menu and IE8 at stackoverflow and elsewhere, but I have not seen a complaint identical to mine.
I would appreciate any help.
I'll be happy to attach a pic if there is a way to upload one.
FOLLOW-UP: We use IE8 Quirks Mode. The problem disappears in IE 8 Standards or IE 7 Standards mode (though other problems appear).
<asp:Menu
OnMenuItemClick="Menu_ItemSelected"
Orientation="Horizontal"
ID="MainMenu"
runat="server"
StaticDisplayLevels="1"
DynamicHoverStyle-BackColor="LightGray"
DynamicHoverStyle-BorderColor="Black"
DynamicHoverStyle-BorderStyle="Solid"
DynamicHoverStyle-BorderWidth="1"
StaticMenuItemStyle-BorderColor="gray"
StaticMenuItemStyle-BorderWidth="1"
StaticMenuItemStyle-BorderStyle="Solid"
StaticMenuItemStyle-HorizontalPadding="15px"
DynamicMenuStyle-BorderColor="Black"
DynamicMenuStyle-BorderStyle="Solid"
DynamicMenuStyle-BorderWidth="1"
DynamicMenuStyle-BackColor="WhiteSmoke"
DynamicMenuStyle-HorizontalPadding="0"
DynamicMenuItemStyle-HorizontalPadding="5"
DynamicMenuItemStyle-Font-Size="X-Small"
>
<Items>
<asp:MenuItem Text="Home" NavigateUrl="javascript:mainPage_Click()" />
<asp:MenuItem Text="Job Details" NavigateUrl="javascript:jobDetailsPage_Click()" />
<asp:MenuItem Selectable="false" Text="Filter">
<asp:MenuItem Selectable="true" Text="Clear Filter"/>
<asp:MenuItem Selectable="false" Text="Filter Category One">
<asp:MenuItem Selectable="true" Text="Filter 1.1"/>
<asp:MenuItem Selectable="true" Text="Filter 1.2"/>
<asp:MenuItem Selectable="true" Text="Filter 1.3"/>
</asp:MenuItem>
<asp:MenuItem Selectable="false" Text="Filter Category Two">
<asp:MenuItem Selectable="true" Text="Filter 2.1"/>
<asp:MenuItem Selectable="true" Text="Filter 2.2"/>
<asp:MenuItem Selectable="true" Text="Filter 2.3"/>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Help" NavigateUrl="ITOBPSLADB_help.htm" Target="_blank" />
</Items>
</asp:Menu>

Unable to replicate your issue with the following code and IE8 in Compatibility view. Please correct my doctype or whatever is different here from yours so that this code also breaks/shows blank lines in IE8.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu
OnMenuItemClick="Menu_ItemSelected"
Orientation="Horizontal"
ID="MainMenu"
runat="server"
StaticDisplayLevels="1"
DynamicHoverStyle-BackColor="LightGray"
DynamicHoverStyle-BorderColor="Black"
DynamicHoverStyle-BorderStyle="Solid"
DynamicHoverStyle-BorderWidth="1"
StaticMenuItemStyle-BorderColor="gray"
StaticMenuItemStyle-BorderWidth="1"
StaticMenuItemStyle-BorderStyle="Solid"
StaticMenuItemStyle-HorizontalPadding="15px"
DynamicMenuStyle-BorderColor="Black"
DynamicMenuStyle-BorderStyle="Solid"
DynamicMenuStyle-BorderWidth="1"
DynamicMenuStyle-BackColor="WhiteSmoke"
DynamicMenuStyle-HorizontalPadding="0"
DynamicMenuItemStyle-HorizontalPadding="5"
DynamicMenuItemStyle-Font-Size="X-Small"
>
<Items>
<asp:MenuItem Text="Home" NavigateUrl="javascript:mainPage_Click()" />
<asp:MenuItem Text="Job Details" NavigateUrl="javascript:jobDetailsPage_Click()" />
<asp:MenuItem Selectable="false" Text="Filter">
<asp:MenuItem Selectable="true" Text="Clear Filter"/>
<asp:MenuItem Selectable="false" Text="Filter Category One">
<asp:MenuItem Selectable="true" Text="Filter 1.1"/>
<asp:MenuItem Selectable="true" Text="Filter 1.2"/>
<asp:MenuItem Selectable="true" Text="Filter 1.3"/>
</asp:MenuItem>
<asp:MenuItem Selectable="false" Text="Filter Category Two">
<asp:MenuItem Selectable="true" Text="Filter 2.1"/>
<asp:MenuItem Selectable="true" Text="Filter 2.2"/>
<asp:MenuItem Selectable="true" Text="Filter 2.3"/>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Help" NavigateUrl="ITOBPSLADB_help.htm" Target="_blank" />
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>

Asp.net Menu displaying diffrent menu items depending on access level

I'm trying to create an asp menu for a website. The site will have 2 levels of user Master users (which will have more options) and Sub users which will have limited menu options.
I was wonder does anyone knows if a way to hide menu items? I've tried google but I can't really find much.
Here's the Asp code
<asp:Menu id="MainMenu" runat="server" StaticDisplayLevels="1" Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="Setup" Value="">
<asp:MenuItem ID="DepoAccount" Text="Depo Account Details" Value="" NavigateUrl="~/AccountManagment.aspx"></asp:MenuItem>
<asp:MenuItem Text="User Accounts" Value="" NavigateUrl="~/ImplantParameters.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Actions" Value="">
<asp:MenuItem Text="View Consignments" Value="" NavigateUrl="~/Consignements.aspx"></asp:MenuItem>
<asp:MenuItem Text="Add Consignments" Value="" NavigateUrl="~/Consignements.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Utitlies" Value="">
<asp:MenuItem Text="Export" Value="" NavigateUrl="~/ImplantParameters.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Reports" Value="">
<asp:MenuItem Text="Manifest" Value="" NavigateUrl="~/ImplantParameters.aspx"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
I have worked out how to hide the whole menu when the user is not logged in
MainMenu.Visible = false
Any pointers would be greatly appreciated.

You're looking for ASP.NET's Security Trimming feature.
You should move your static menu items into an XML SiteMap file, and set EnableSecurityTrimming on the sitemap to true.

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Showing text in below of image in asp.net menu control - c#

Related

How to pass variable to asp MenuItem

Add more than one item in LayoutColumn in Ext.net

How can I get my menu control to center?

What causes the extra blank line after menu items in my ASP.NET Menu under IE8?

Asp.net Menu displaying diffrent menu items depending on access level

Categories

Resources