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.
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;
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>
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.
Steps to reproduce: 1. Created a UserControl(.ascx) for implementing wizard control 2. Created wizard control with 2 steps 3. For each step placed a TextBox with Required Field Validator 4. Also place one extra button to verify the issue, generate its event as well 5. Now generate Next, Previous and Cancel button events for Wizard control 6. Now Click on Next button to generate required field validation on text box 7. Now Click on Back or Cancel or extra button 8. No event will be fired on single time, you have to click twice for each and every event 9. Can we get fix or solution for this, ASAP? Please let me know if any further information is required, attaching the POC created to show the issue. Thanks for your help in advance! Arvinder Singh Arora
New property that controls this behavior is added - ClickActiveStep with default value false.