Hi,
I have a Radwizard using a material skin with the navigaiton bar on the left, in all browsers except safari it renders properly, other skins besides Material also render properly in safari. The only problem is material in Safari.
Can be reproduced in the Orientation demo - https://demos.telerik.com/aspnet-ajax/wizard/functionality/orientation/defaultvb.aspx?skin=Material on Safari (MAC). Set the Navigation Bar Position dropdown value to Left.
https://docs.microsoft.com/en-us/previous-versions/aspnet/ms178342(v=vs.100)
Hi
I would like to request the feature
Microsoft's addition of asp:CreateUserWizard is most welcome it covers the typical UX of every site however its not pretty.
A quick win for you is to have in one of your blogs a post showing reskining it with the depth of your controls.
An initial colouration can be used with telerik:RadFormDecorator this is clunky as below.
<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" DecorationZoneID="ContentPlaceHolder1_CreateUserWizard1" Skin="Sunset" />
What would be nice is a <telerik:CreateUserWizard/> with the option of selection the MS standard backend or other third party IAM providers such as Google/Azure/Telerik/KeyCloak-OAuth
Just that Telerik would come out the box with Internationalization sorted.
Thanks
Doug
A temporary workaround is enabling the controls programmatically:
private void RadWizard1_NextButtonClick(object sender, WizardEventArgs e)
{
if (Page.IsValid)
{
int activeStepIndex = RadWizard1.ActiveStep.Index;
var wizstep = RadWizard1.WizardSteps[activeStepIndex];
wizstep.Enabled = true;
for (var index = 0; index < wizstep.Controls.Count; index++)
{
var ctrl = wizstep.Controls.Item[index] as WebControl;
if (ctrl != null)
ctrl.Enabled = true;
}
}
}
Private Sub RadWizard1_NextButtonClick(sender As Object, e As WizardEventArgs) Handles RadWizard1.NextButtonClick
If Page.IsValid Then
Dim activeStepIndex As Integer = TryCast(sender, RadWizard).ActiveStep.Index
Dim wizstep = RadWizard1.WizardSteps.Item(activeStepIndex)
wizstep.Enabled = True
For index = 0 To wizstep.Controls.Count - 1
Dim ctrl = TryCast(wizstep.Controls.Item(index), WebControl)
If ctrl IsNot Nothing Then
ctrl.Enabled = True
End If
Next
End If
End Sub
When looking at MetroTouch (and other) skin on FF, Edge and Chrome we see a little discrepance in the stepper bar, see attached.
This will be solved when altering css like so:
.RadWizard .rwzBreadCrumb .rwzLink::before {
right: -0.5em;}
original value is:
right: -0.6em;
When nesting several RadWizard controls with different orientation they are mixing there styles in Lightweight (e.g. Vertical in horizontal). The problem occurs only in Lightweight, the Classic rendered Wizards are rendered properly. Code to reproduce the problem: <telerik:RadWizard runat="server" ID="StaticWizard" RenderMode="Lightweight"> <WizardSteps> <telerik:RadWizardStep Title="1.0 Step"> <telerik:RadWizard runat="server" ID="NestedStaticWizard1" NavigationBarPosition="Left" ProgressBarPosition="Left" RenderMode="Lightweight"> <WizardSteps> <telerik:RadWizardStep Title="1.01 Sub-step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="1.02 Sub-step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="1.03 Sub-step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="1.04 Sub-step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="1.05 Sub-step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="1.06 Sub-step"></telerik:RadWizardStep> </WizardSteps> </telerik:RadWizard> </telerik:RadWizardStep> <telerik:RadWizardStep Title="2.0 Step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="3.0 Step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="4.0 Step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="5.0 Step"></telerik:RadWizardStep> <telerik:RadWizardStep Title="6.0 Step"></telerik:RadWizardStep> </WizardSteps> </telerik:RadWizard>
Would be great if the "isbreak" option like in the radtabstrip is also available for the radwizard tabstrip. See attached image (created by your colleague btw)
A workaround is to disable the embedded jQuery and use an older version (for example, 1.11.1 which is the previous version the suite used): https://docs.telerik.com/devtools/aspnet-ajax/controls/scriptmanager/disabling-the-embedded-jquery Repro steps: 1. put a wizard on the page that will do a postback upon step change 2. change a step Expected: the postback occurs, the step is changed Actual: Firefox throws TypeError: access to strict mode caller function is censored Sample markup <telerik:RadWizard RenderMode="Lightweight" runat="server" ID="RadWizard1" Width="600px" Height="330px" RenderedSteps="Active"> <WizardSteps> <telerik:RadWizardStep Title="first" Active="true"> in FF clicking on the next step will give you <code>TypeError: access to strict mode caller function is censored</code> </telerik:RadWizardStep> <telerik:RadWizardStep Title="click for error in FF">This is caused by the need to do a postback and one thing that causes it is <code>RenderedSteps="Active"</code></telerik:RadWizardStep> </WizardSteps> </telerik:RadWizard>
Would be great to have a SingleClick and SingleClickText property for Cancel, Next and Finish buttons on the RadWizard in the same manner as normal RadButtons. Testing a project which is complete except for an issue where the user is able to submit many times by pressing the Finish button in quick succession. Tried this but did not work for me: http://www.telerik.com/forums/prevent-user-from-double-clicking-next-button
Currently the only way to do anything with the default RadWizard navigation buttons (Cancel, Previous, Next, Finish) is to change the localization of them. Doing this workaround, however, will lose you the option to have any reasonable form of localization in your program. So this is a request to add templates to allow developers to create their own sets of buttons, and expose control of the area to developers completely so they may instead redesign the whole area if they wish.
It's a simple addition but it would be very useful. Currently I can address WizardSteps inside the wizard by index only, like that: WizardSteps[1]. I want to be able to address WizardSteps by step Title, like that: WizardStep["Review"]
Hi! I would like to implement an exam with control time for each step of the wizard. For example the time to complete the step 1 would be 3 minutes the time for the step 2 would be 5 minutes, I think that the step wizard could be include a property for the time and other property for customize the page for show when the time is over.
add findById client-side method to RadWizard and/or RadWizardStepCollection objects in order to find steps by id. This would also be useful server-side instead of using FindControl
Until the issue is fixed, you can add a simple script that will remove the height attribute that causes the problem. Here are two examples: With a RadWindow's ContentTemplate <asp:Button ID="Button1" Text="open wnd" OnClientClick="openWnd(); return false;" runat="server" /> <telerik:RadWindow runat="server" ID="resultsWindow" Modal="true" Height="700px" Width="1100px" VisibleStatusbar="false" OnClientShow="repaintWizard"> <ContentTemplate> <telerik:RadWizard runat="server" ID="ResultsWizard" ActiveStepIndex="0" RenderedSteps="Active" DisplayProgressBar="false"> <WizardSteps> <telerik:RadWizardStep runat="server" ID="SelectStatus" StepType="Start" TabIndex="0"> <telerik:RadButton runat="server" ID="StatusWizard" ToggleType="Radio"> <ToggleStates> <telerik:RadButtonToggleState Text="Passed" /> <telerik:RadButtonToggleState Text="Failed" /> </ToggleStates> </telerik:RadButton> </telerik:RadWizardStep> </WizardSteps> </telerik:RadWizard> </ContentTemplate> </telerik:RadWindow> <script> function repaintWizard(sender, args) { $telerik.$(".rwzContent", sender.get_contentElement()).height(""); } function openWnd() { $find("<%=resultsWindow.ClientID%>").show(); } </script> In a simple hidden div: <script> function showDiv() { var theDiv = $get("testDiv"); theDiv.style.display = ""; $telerik.$(".rwzContent", theDiv).height(""); } </script> <asp:Button ID="Button1" Text="show div" OnClientClick="showDiv(); return false;" runat="server" /> <div id="testDiv" style="display:none;"> <telerik:RadWizard runat="server" ID="RadWizard1" ActiveStepIndex="0" RenderedSteps="Active" DisplayProgressBar="false"> <WizardSteps> <telerik:RadWizardStep runat="server" ID="RadWizardStep1" StepType="Start" TabIndex="0"> <telerik:RadButton runat="server" ID="RadButton1" ToggleType="Radio"> <ToggleStates> <telerik:RadButtonToggleState Text="Passed" /> <telerik:RadButtonToggleState Text="Failed" /> </ToggleStates> </telerik:RadButton> </telerik:RadWizardStep> </WizardSteps> </telerik:RadWizard>
Setting RenderedSteps="Active" may be used as a workaround.