ASP.net WebPart title icons - asp.net

I'm creating a web part page in ASP.net i want to display icons for minimise, restore, close etc instead of the drop down menu which is currently showing. This code adds an icon next to the minimise icon in the menu but i want to remove the menu completly and render 3 icons in the top right of each web part. Does anyone have an example how to achieve that?
<asp:WebPartManager ID="WebPartManager1" runat="server" Personalization-Enabled="true" >
</asp:WebPartManager>
<asp:WebPartZone ID="WebPartZone1" runat="server" HeaderText="zone 1"> <MinimizeVerb ImageUrl="img/os_minimise.gif" />
<ZoneTemplate>
<asp:Label ID="lblZone1Header" runat="server"><h1>Zone 1</h1></asp:Label>
<uc1:TestControl ID="TestControl1" runat="server" />
</ZoneTemplate>
</asp:WebPartZone>
<asp:WebPartZone ID="WebPartZone2" runat="server" HeaderTexxt="zone 2">
</asp:WebPartZone>
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>

Web Part Zone has a property WebPartVerbRenderMode set it to menu and then Set Icons for Minimize,Restore,Close verbs etc.

Related

In an ASP.Net LoginView, 2 sets of UserName and Password TextBoxes are displayed

Using an ASP.Net LoginView, 2 sets of UserName and Password TextBoxes are displayed.
Using this markup, can you tell us how to only show 1 set of the UserName and Password TextBoxes from the AnonymousTemplate?
<asp:UpdatePanel
ID="UpdatePanelParentsSummary"
runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<div class="Menu">
<asp:LoginView
ID="loginViewMain"
runat="server">
<AnonymousTemplate>
<asp:LoginStatus
ID="loginStatus"
runat="server" />
<asp:Login runat="server" ID="login"></asp:Login>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:LoginName
ID="loginName"
runat="server"
FormatString="Hello, {0}!<br/><br/> You have successfully<br/> logged onto the staff site." />
(<asp:LoginStatus ID="loginStatus" runat="server" />)
<asp:SiteMapDataSource
id="KnowledgeAcademySiteMap"
runat="server"
ShowStartingNode="false" />
<asp:TreeView
id="TreeViewMain"
runat="server"
ExpandDepth="0"
OnTreeNodeExpanded="TreeViewMain_TreeNodeExpanded"
DataSourceID="KnowledgeAcademySiteMap">
<RootNodeStyle ImageUrl="/Images/book.png" />
<ParentNodeStyle ImageUrl="/Images/book.png" />
<LeafNodeStyle ImageUrl="/Images/book.png" />
</asp:TreeView>
</LoggedInTemplate>
</asp:LoginView>
</div>
</asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
With the markup shown, there should be only one <asp:Login> control displayed. There must be some other markup or code that is affecting this.
The best option at this point would be to debug the problem by adding some additional content that will help figure out where everything is coming from. For example, you could try the following:
Enable Tracing in the page by setting Trace=true in the #Page directive at the top of the ASPX file. That will render a graph of the control tree at the bottom of the page, which might help you figure out where the other Login control is.
Add some dummy markup immediately before and after the Login control that you see, such as putting the text BEGINBEGINBEGIN right before it, and ENDENDEND right after it. If you see that rendering once, then there's a different Login control coming from somewhere else. If you see it rendering twice, then something is causing the whole control to render twice, which must be coming from some custom code that is not being shown.
Start removing bits and pieces of the page to simplify it, until you figure out what is causing the difference.

how to create an ajax image button?

I am creating a thumbnail viewer.
For the thumbnails I add image buttons that when they are clicked they will be viewed in a larger size. The images are entered dynamically by the user (in the code behind).
The problem is:
I don't want the thumbnails to be updated every time they are clicked.
But since it is a button it will be updated by the click anyway!!!
What can I do?
<asp:DataList ID="lstThumbs" runat="server" RepeatDirection="Horizontal">
<ItemTemplate>
<div class="thumbs">
<asp:ImageButton ID="imgbtnThumb"
ImageUrl='<%# Container.DataItem %>'
runat="server"
OnClick="imgSmall_Click" />
</div>
</ItemTemplate>
</asp:DataList>

Rating control not appearing

I am trying to use the ASP.NET ajax rating control on my ASP.NET website. I have followed the exact steps from the video tutorial to use this rating control.
Here's my HTML code.
<div id="Rating" style="float:right; width:400px">
<div class="demoheading">Rating demonstration
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float:left;width:230px">
How much do you like this profile?
</div><br />
<asp:Rating ID="LikeRating" runat="server" CurrentRating="3" MaxRating="5"
StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar"
EmptyStarCssClass="emptyStarRating"
style="float:left" onchanged="LikeRating_Changed1" Height="40px"
Width="400px">
</asp:Rating><br />
<div style="clear:left;">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" />
<asp:Label ID="LabelResponse" runat="server" Text="[No response provided yet]"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br /><br />
</div>
</div>
My rating control is not appearing in the designer. However, when I hover that blank space it should be, it shows me the rating number as in the figure below. I did check the path of the images and the css I used for the star rating. Is there still something I am missing?
You do not have the proper path to your image or the images do not exist. The control is there, the styles that you declare for the different type of stars do not have the images.
Also, you are missing a semicolon here:
emptyStarCssClass="emptyStarRating"
style="float:left"
should be
emptyStarCssClass="emptyStarRating"
style="float: left;"
I would recommend inspecting the element to check what it shows the image path is.
I missed the in designer part. I have experienced some issues where designer does not quite understand the image paths and will flag the path as bad, but in actuality it is fine. Have you tested the page in debug mode?

asp.net toggle button extender and modal popup extender collision

I am currently moving some form fields on an existing webform into a modal popup window using the asp.net toolkit extender. One of the fields uses the toolkit's toggle button extender on a checkbox a works quite well. When I move the checkbox and extender into the modal popup div, the toggle button extender stops working.
After confirming the problem, I decided to try using a jquery plug-in called checkbox that provides the same function. Again this plugin worked as advertised until I moved it into the modal window div. I had hoped to avoid hand rolling a solution.
I am guessing that the problem has something to to with css positioning. I would love to hear possible fixes before I build a solution from scratch.
Edit
Here is my original approach with toggle button extender:
<!-- works fine here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<asp:Panel ID="pnlAddTransaction" runat="server" Width="600px" Height="300px" CssClass="ModalWindow">
<!-- doesn't work here - outside UpdatePanel but inside modal window div-->
<asp:UpdatePanel ID="udpAddTransaction" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<!-- This is the desired location but doesnt work here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<!-- etc-->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hdnInvestmentID" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeAddTransaction" runat="server"
TargetControlID="pnlAddTransaction" PopupControlID="pnlAddTransaction"
CancelControlID="btnCancel" OnCancelScript="hideAddTransactionPopup()"
BackgroundCssClass="modalBackground" />
I have also now tried placing a hidden field and an image and writing jquery click function. This also results in the same issue (stops working inside modal div).I can get code to run by hard coding onclick event attribute. I would love to understand why and if there are any more elegant ways to work around this. I guess I could try a jquery modal popup plugin, but I didn't plan to rewrite this whole page.
Take a look at your ModalPopupExtender Attributes. TargetControlID and PopupControlID are the same panel "pnlAddTransaction". The TargetControlID is the control that triggers the control at PopupControlID to display.

How do I make AutoCompleteExtender render above select controls in IE6

When an AutoCompleteExtender is displayed in IE6 it seems to ignore z-index and renders below any select controls (like dropdownlists) in IE6.
<asp:TextBox ID="TextBox1" runat="server" />
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="TextBox1" EnableCaching="true" CompletionSetCount="5"
FirstRowSelected="true" ServicePath="~/Services/Service1.asmx" ServiceMethod="GetSuggestion" />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="Item 1" Value="0" />
<asp:ListItem Text="Item 2" Value="1" />
</asp:DropDownList>
How do I make it render above dropdownlists?
Nothing renders below select controls in IE6. It's one of the many "features" microsoft bestowed upon us when they gifted IE to the world
You have to hide them, then re-show them.
Observe the standard lightbox script - which does exactly this
(note that link is just to the first thing I found on google which had the source to lightbox.js as a demonstration. It's got nothing to do with anything else)
#Orion has this partially correct - there is one other way to deal with these, and that is to cover the offending select lists with an iframe. This technique is used in Cody Lindley's ThickBox (written for jQuery). See the code for details on how to do it.

Resources