I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps
It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.
Related
Using ASP.Net webforms I have a pop up containing 2 tabs, which display info on a feature, 'FEATURE PROPERTIES' and 'IMAGES'. Each time a new feature is clicked the pop up is updated with the new feature details.
I was making the call back to the server where updatePanel8 was being updated. Unfortuantelly I am trying to convert my website to telerik and I am having difficulties implenting this. I have read many Q's on telerik forms some suggest trying RadAjaxPanel others suggest tryiing RadAjaxManager, but either way I cant seem to get it working as I cant use an update panel inside a panel when I am using telerik.
**MY CODE:**
<asp:Panel ID="ViewFeatureProperties" runat="server" BackColor="Snow" Width="300"
HorizontalAlign="Center">
<asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
Style="position: relative; overflow: hidden; background-color: White;
width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">
<ContentTemplate>
<div id="DivHolding2Tabs" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb" style="width:100%;border-color:Black;border-width:1px;border-style:solid;">
<ul id="tabList" style="width:100%">
<li>Info </li>
<li>Images </li>
</ul>
<div id="tabs-1" class="WorkFlowLayout">
<b><font color="FF6600">Feature Properties </font></b>
<div id="divFeatureInfo" runat="server">
</div>
</div>
<div id="tabs-2" class="WorkFlowLayout">
<b><font color="FF6600">Images</font></b>
<div id="ImagesRelatingToFeatureDIV" runat="server">
</div>
</div>
</div>
<br />
<br />
<div class="buttonwrap">
<span id="Span5" class="ActionBtns">
<asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
</span>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
**CODE BEHIND**
protected void ViewFeatureWorkflowImagePostBackBtn_Click(object sender, EventArgs e)
{
ReloadUploadedImagesForFeatureWorkflow();
}
private void ReloadUploadedImagesForFeatureWorkflow()
{
//generate the new details for the popup
UpdatePanel8.Update();
script.Append("OpenPropertiesPopUp();");
ScriptManager.RegisterClientScriptBlock(UpdatePanel8, UpdatePanel8.GetType(), "OpenPropertiesPopupCall()",
script.ToString(),
true);
}
Some exmaples I have tried are:
<telerik:radajaxmanager id="ajaxManager1" runat="server" UpdatePanelsRenderMode="Inline"><%-- defaultloadingpanelid="RadAjaxLoadingPanel1" runat="server">--%>
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ajaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:radajaxmanager>
<asp:Panel ID="Panel1" runat="server">
<div id="Div1" class="overflowcontent webkit-scrollbar webkit-scrollbar-track webkit-scrollbar-thumb"
style="width: 100%; border-color: Black; border-width: 1px; border-style: solid;">
<asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Text="Update the first Panel" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
<asp:Label ID="Label4" runat="server" Text="Label4"></asp:Label>
<ul id="Ul1" style="width: 100%">
<li>Info </li>
<li>Images </li>
</ul>
<div id="tabs-1" class="WorkFlowLayout">
<b><font color="FF6600">Feature Properties </font></b>
<div id="divFeatureInfo" runat="server">
</div>
</div>
<div id="tabs-2" class="WorkFlowLayout">
<b><font color="FF6600">Images</font></b>
<div id="ImagesRelatingToFeatureDIV" runat="server">
</div>
</div>
</div>
<br />
<br />
<div class="buttonwrap">
<span id="Span6" class="ActionBtns">
<asp:Button ID="Button2" runat="server" Style="display: none; visibility: hidden;"
OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
</span>
</div>
</asp:Panel>
<br />
<telerik:radajaxloadingpanel id="RadAjaxLoadingPanel2" runat="server" skin="Default"></telerik:radajaxloadingpanel>
code behind
UpdatePanel8.AjaxRequest;
// UpdatePanel8.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", UpdatePanel8.ClientID));
If calling the Update() server method is your requirement, I do not think you will be able to migrate to RadAjax. There is no server Update() method there, because the update panels are created dynamically.
If, however, you want to update Panel1 when ViewFeatureWorkflowImagePostBackBtn is clicked, you need an AJAX setup like this:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ViewFeatureWorkflowImagePostBackBtn">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Panel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
Where I am assuming that the ViewFeatureWorkflowImagePostBackBtn button is still somewhere in the code. If it was replaced by a button with ID Button2, the AjaxControlID setting should use Button2 instead.
I am working with ASP.NET. I am using a repeater to display images, and I also am using a check box for each image.
How can I select individual images and update their values as per image id?
My code is:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
You could use javascript to implement this, something like this should do the trick:
Without jQuery
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
onclick="imageClickHandler(this,event);"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
function imageClickHandler(s,e){
//do something with the current image that is being clicked on.
//The parameter 's' is a reference to the caller of this method and the 'e' contains
//event data
}
With jQuery
If your using jQuery, you could also try something like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
class="handled"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript" src="jquery-1.7.3"></script>
$(function(){
$("img.handled").click(function(){
//alerts the id of the image thats being clicked on.
alert($(this).attr("id"));
});
});
I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>
You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"
I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.
I am using two listviews to display two tag clouds (a red one and a green one). When the tag gets quite big, it overlaps the smaller ones. Is there a way to space out the tags, i.e vertical padding or something?
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="negative_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
<br />
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView2" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="positive_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
Yes,
on your <a> tags you can add:
line-height: 30px
or alternativelly you can add
padding-top:5px; padding-bottom:5px
I was trying to look out for a possible solution and am yet to find one. Could you help me out how to add a text over an image.
Below is my code and I want lblWelcome and lblUsername to come over the image.
<img alt="Logo" src="../Resources/Images/Header.gif" style="height: 70px; width: 1000px;"/>
<asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>
<asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
Would be glad if someone can help me with this.
TIA,
Su
Another way can be by setting your image as the background image of an element and have your text as the child element
e.g.
<div style="background-image: url(../Resources/Images/Header.gif);height:70px;width:1000px;" >
<asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>
<asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
</div>
Use Css like Given Below:
<style type="text/css">
.lblposition {
position:absolute;
left:789px;
top:30px;
height: 21px;
width: 65px;
}
</style>
Use this css in label like below:
<asp:Label ID ="lbl" runat="server" Text="Search" BackColor="Red" ForeColor="Blue" CssClass ="lblposition"></asp:Label>
<table>
<tr>
<td style="background-image:url("Images/image1.jpg"); height:20px; width:20px;">
<asp:label ID="Lbl1" runat="server" Text="" Fore-color="Red" />
</td>
</tr>
</table>