I using a RadWizard in a page to update other elements. I have a cancel button each step and custom cancel button on the complete step. When attempting to reset the wizard back to the 1st step with client-side code. The wizard goes back to the 1st step. However, the step buttons no longer display, and validation messages remain. Due to the other elements on the page, it would be ideal to reset the wizard back to its original state without having to reload the page.
Any help with this is appreciated.
Cod Snippets below:
Markup:
<telerik:RadWizard ID="wzdNewTimeLine" runat="server" Width="100%" CssClass="Gridheigh4 controlfont" BorderStyle="Solid" BorderWidth="1px" OnClientLoad="wzOnClientLoad" OnClientButtonClicking="wzOnClientButtonClicking">
<WizardSteps>
<telerik:RadWizardStep ID="WizardStep1" runat="server" StepType="Start" Title="Product" CausesValidation="true" CssClass="controlfont" ValidationGroup="prod" DisplayCancelButton="true">
<div class="w3-bar-block">
<span class="w3-bar-item" style="width:50em">
<label><b>Product:</b></label><br />
<telerik:RadComboBox ID="dnProduct" runat="server" DataSourceID="dsProduct" DataTextField="Product" DataValueField="Product" EmptyMessage="Select a Product.." OnClientSelectedIndexChanged="dnProduct_OnIndexChange" Width="30%" CausesValidation="true" ValidationGroup="prod">
</telerik:RadComboBox>
<asp:RequiredFieldValidator ID="ProductRequiredFieldValidator" runat="server" ControlToValidate="dnProduct" ValidationGroup="prod" EnableClientScript="true" ForeColor="red"
ErrorMessage="*required field">
</asp:RequiredFieldValidator>
</span>
div class="w3-bar-item">
<h6 class="w3-flat-midnight-blue w3-round"><i class="fa-soild fa-info-circle"></i> Select a Product for this Timeline..</h6>
</div>
</div>
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="WzardStep2" runat="server" StepType="Step" Title="Review Type" CssClass="controlfont" ValidationGroup="reviewtype" CausesValidation="true" DisplayCancelButton="true">
<div class="w3-bar-block">
<span class="w3-bar-item" style="width:50em"><label><b>Review Type:</b></label><br />
<telerik:RadComboBox ID="dnReviewType" runat="server" DataSourceID="dsUMReviewType" DataTextField="Review_Type" DataValueField="Review_Type" OnClientSelectedIndexChanged="dnReviewType_OnIndexChange" EmptyMessage="Select a Review Type" Width="30%" ValidationGroup="reviewtype" CausesValidation="true">
</telerik:RadComboBox>
<asp:RequiredFieldValidator ID="ReviewTypeRequiredFieldValidator" runat="server" ControlToValidate="dnReviewType" EnableClientScript="true" ValidationGroup="reviewtype" ErrorMessage="*required feild" ForeColor="Red"></asp:RequiredFieldValidator>
</span>
</div>
<div class="w3-bar-item">
<h6 class="w3-flat-midnight-blue w3-round"><i class="fa-solid fa-info-circle"></i> Select the Review Type for this Timeline..</h6>
</div>
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="WizrdStep3" runat="server" StepType="Step" Title="Urgency" CssClass="controlfont" ValidationGroup="urgencycode" CauseValidation="true" DisplayCancelButton="true">
<div class="w3-bar-block">
<span class="w3-bar-item" style="width:50em">
<label><b>Urgency Code:</b></label><br /><telerik:RadComboBox ID="dnUrgencyCode" runat="server" DataSourceID="dsUgencyCode" DataTextField="Urgency_Code" DataValueField="Urgency_Code" EmptyMessage="Select an Urgency Code" OnClientSelectedIndexChanged="dnUrgencyCode_OnIndexChange" Width="30%"></telerik:RadComboBox>
<asp:RequiredFieldValidator ID="UrgencyCodeRequiredFieldValidator" runat="server" ControlToValidate="dnUrgencyCode" ValidationGroup="urgencycode" EnableClientScript="true" ErrorMessage="*required field" ForeColor="Red"></asp:RequiredFieldValidator>
</span>
<div class="w3-bar-item">
<h6 class="w3-flat-midnight-blue w3-round"><i class="fa-solid fa-info-circle"></i> Select an Urgency Code for this Timeline..</h6>
</div>
</div>
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="WizardStep4" runat="server" StepType="Finish" Title="Deadline Days" CausesValidation="true" ValidationGroup="nodays" DisplayCancelButton="true">
<table style="width:100%">
<tr>
<td style="text-align:right"><b>Days to Deadline:</b></td>
<td style="text-align:left">
<telerik:RadNumericTextBox ID="txtDeadline" runat="server" ToolTip="Number of days to Decision Deadline." Value="0" Width="30%"
NumberFormat-DecimalDigits="0" CausesValidation="true" ValidationGroup="nodays">
</telerik:RadNumericTextBox>
<asp:CustomValidator ID="DeadlineCustomValidator" runat="server" ControlToValidate="txtDeadline" EnableClientScript="true" ValidationGroup="nodays" ForeColor="Red" ErrorMessage="*value must be greater than zero" ClientValidationFunction="ValidateDeadlineDays"></asp:CustomValidator>
</td>
</tr>
<tr>
<td style="text-align:right"><b>Extension Days:</b></td>
<td style="text-align:left">
<telerik:RadNumericTextBox ID="txtExtension" runat="server" ToolTip="Number of days added to deadline form the 'Extension Sent' Value.." Value="0" Width="30%" NumberFormat-DecimalDigits="0" CausesValidation="true" ValidationGroup="nodays"></telerik:RadNumericTextBox>
<asp:CustomValidator ID="ExtensionCustomValidator" runat="server" ControlToValidate="txtExtension" EnableClientScript="true"
ValidationGroup="nodays" ForeColor="red" ErrorMessage="*extensions not valid for Post-Service or Urgent UM" ClientValidationFunction="ValidateExt"></asp:CustomValidator>
</td>
</tr>
<tr>
<td style="text-align:right; vertical-align:middle">
<telerik:RadSwitch ID="ckMMSOnly" runat="server" AutoPostBack="false" CssClass="elasticSwitch" OnClientCheckedChanged="ckMMS_OnChange"></telerik:RadSwitch>
</td>
<td style="text-align:left;padding-left:5px"><b>:Medication Management Only?</b></td>
</tr>
</table>
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="WizardStepComplete" runat="server" StepType="Complete" DisplayCancelButton="true" AllowReturn="true">
<p>Save your changes..</p>
<br />
<br />
<div class="w3-bar">
<div class="w3-bar-item">
<!---- Custom Cancel Button -->
<button class="w3-btn w3-flat-midnight-blue w3-small w3-round"
onclick="btnCancel_OnClick(); return false"><i class="fa-solid fa-cancel"></i> Cancel Changes</button>
</div>
<div class="w3-bar-item">
<button id="btnAdd" class="w3-btn w3-flat-midnight-blue w3-round" onclick="btnAdd_Onclick(); return false"><i class="fa-solid fa-save"></i> Save</button>
</div>
</div>
</telerik:RadWizardStep>
</WizardSteps>
</telerik:RadWizard>Client-Side Code
<script type="text/javascript">
function wzOnClientLoad(sender, args) {
for (var i = 1; i < sender.get_wizardSteps().get_count() ; i++) {
sender.get_wizardSteps().getWizardStep(i).set_enabled(false);
}
}
function wzOnClientButtonClicking(sender, args) {
var command = args.get_command();
if (command == 3) {
args.set_cancel(true);
btnCancel_OnClick();
//return;
}
if (!args.get_nextActiveStep().get_enabled()) {
args.get_nextActiveStep().set_enabled(true);
}
}
function ValidateDeadlineDays(s, e) {
var wiz = $find("<%=wzdNewTimeLine.ClientID%>");
if (e.Value < 1) {
e.IsValid = false;
}
else {
e.IsValid = true;
document.getElementById("<%=hdnDealineDays.ClientID%>").value = e.Value;
}
}
function ValidateExt(s, e) {
var reviewtype = document.getElementById("<%=hdnReviewType.ClientID%>").value;
var urgencycode = document.getElementById("<%=dnUrgencyCode.ClientID%>").value;
if (e.Value > 0) {
if (reviewtype == "Post-Service" || urgencycode == "Urgent" || urgencycode == "Non-Urgent to Urgent") {
e.IsValid = false;
}
}
else {
e.IsValid = true;
document.getElementById("<%=hdnExtDays.ClientID%>").value = e.Value;
}
}
function ckMMS_OnChange(s, e) {
document.getElementById("<%=hdnMMS.ClientID%>").value = e._checked;
}
function btnAdd_Onclick() {
__doPostBack("<%=pnlTimelines.ClientID%>");
btnCancel_OnClick();
}
function btnNewTL_OnClick() {
var wizcontainer = document.getElementById('newtl');
wizcontainer.style.display = 'block';
var wizard = $find("<%=wzdNewTimeLine.ClientID%>");
wzOnClientLoad(wizard, "");
}
function dnProduct_OnIndexChange(s, e) {
var prod = s.get_value();
if (prod.length > 0) {
document.getElementById("<%=hdnProduct.ClientID%>").value = prod;
}
}
//** Clear out wizard control values and rest to start **
function btnCancel_OnClick() {
$find("<%=dnProduct.ClientID%>").clearSelection();
$find("<%=dnReviewType.ClientID%>").clearSelection();
$find("<%=dnUrgencyCode.ClientID%>").clearSelection();
$find("<%=txtDeadline.ClientID%>").set_value(0);
$find("<%=txtExtension.ClientID%>").set_value(0);
$find("<%=ckMMSOnly.ClientID%>").set_checked(false);
var wizard = $find("<%=wzdNewTimeLine.ClientID%>");
var wizardsteps = wizard.get_wizardSteps();
wizardsteps._data[0].set_active(true);
wizard.set_progressPercent(0);
document.getElementById("<%=hdnProduct.ClientID%>").value = "";
document.getElementById("<%=hdnReviewType.ClientID%>").value = "";
document.getElementById("<%=hdnUrgencyCode.ClientID%>").value = "";
document.getElementById("<%=hdnDealineDays.ClientID%>").value = 0;
document.getElementById("<%=hdnExtDays.ClientID%>").value = 0;
document.getElementById("<%=hdnMMS.ClientID%>").value = false;
document.getElementById('newtl').style.display = 'none';
}
</script>1 Answer, 1 is accepted
Hello Fred,
You said you wanted to reset the Wizard without reloading the entire Page, but the code inside the AddGridRecord function forces the Page to reload. More specifically the line I marked with yellow in the following snippet:
function AddGridRecord() {
// Inserts record into timelime grid
__doPostBack("<%=pnlTimelines.ClientID%>");
resetWizard();
}Remove that part if you do not want to reload the Page. The current configuration you have for the Wizard will not do any PostBacks on its own.
Resetting the Wizard is not a built-in functionality. You can use the Wizard's client-side APIs to switch between steps and a few more functionalities, but to reset Validators and/or values of Controls within Steps, you will need to implement that additionally.
By looking at the current code, it seems to be following the same principles I had in mind:
// Create an enum for the Wizard Commands to ease your programming experience
const WzCommand = {
PreviousCommand: 0,
NextCommand: 1,
FinishCommand: 2,
CancelCommand: 3
}
function wzOnClientButtonClicked(sender, args) {
var command = args.get_command();
if (command == WzCommand.PreviousCommand) { // if Previous Command
// Do something
} else if (command == WzCommand.NextCommand) { // if Next Command
// Do something
} else if (command == WzCommand.FinishCommand) { // if Finish Command
// Do something
} else if (command == WzCommand.CancelCommand) { // if Cancel Command
// Switch back to Step 1
// Access the Controls of Step 1
// Clear the Values of all Controls
// Reset Validators
// Do something more..
}
}
As for resetting validators, there are a few approaches that you can use. Here is one StackOverflow article with an example: Reset an asp.net validation control via javascript?
last but not least, I have tested the OnClientButtonClicked (latest version) and it is triggered for all the commands (Next, Previous, Cancel, Finish). Both the ClientButtonClicking and ClientButtonClicked are working as expected. If this does not work for you, most likely there are JavaScript errors or something that could conflict.
I advise you to keep an eye on the Console tab of the Browser's DevTools to see JavaScript exceptions. All errors must be eliminated to ensure the proper functioning of Script Controls.
You can check out the following Blog Posts for Tips and Tricks to debug the application on the client-side:
Regards,
Attila Antal
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
I believe that I've found a partial solution to this problem by removing the complete step from the wizard and placing client-side events on the Finish step. However, I'm still not able to prevent the validation message from showing after resetting the wizard controls.
FYI: Not included in original post. I'm using the wizard as an insert record form for a grid. Also, not sure if this is bug or feature, but the OnClientButtonClicked event does not fire for the wizard Cancel button.
Updated Client-Side Script:
<script type="text/javascript"> var validated = true; function wzOnClientLoad(sender, args) { for (var i = 1; i < sender.get_wizardSteps().get_count() ; i++) { sender.get_wizardSteps().getWizardStep(i).set_enabled(false); } } function wzOnClientButtonClicking(sender, args) { var command = args.get_command(); //Check for Cancel Button click if (command == 3) { args.set_cancel(true); resetWizard(); return; } if (!args.get_nextActiveStep().get_enabled()) { args.get_nextActiveStep().set_enabled(true); } } function wzOnClientButtonClicked(sender, args) { var command = args.get_command() //** Button Command Values ** // 0 - WizardCommand.Previous // 1 - WizardCommand.Next // 2- WizardCommand.Finish; // 3- WizardCommand.Cancel // 4 - WizardCommand.NavigationBarButtonClick // ** FYI: Does not file on Cancel Button Click ** if (command == 3) { btnCancel_OnClick(); } else if (command == 2 && validated) { AddGridRecord(); } } function resetWizard() { // ** Rest Wizard back to step zero and hide the wizard container **/ $find("<%=dnProduct.ClientID%>").clearSelection(); $find("<%=dnReviewType.ClientID%>").clearSelection(); $find("<%=dnUrgencyCode.ClientID%>").clearSelection(); $find("<%=txtDeadline.ClientID%>").set_value(0); $find("<%=txtExtension.ClientID%>").set_value(0); $find("<%=ckMMSOnly.ClientID%>").set_checked(false); var wizard = $find("<%=wzdNewTimeLine.ClientID%>"); var wizardsteps = wizard.get_wizardSteps(); var prodvalidator = document.getElementById("<%=ProductRequiredFieldValidator.ClientID%>"); wizardsteps._data[0].set_active(true); for (i = 0; i < wizardsteps._data.length; i++) { wizardsteps._data[i].set_enabled(false); } wizard.set_progressPercent(0); document.getElementById("<%=hdnProduct.ClientID%>").value = ""; document.getElementById("<%=hdnReviewType.ClientID%>").value = ""; document.getElementById("<%=hdnUrgencyCode.ClientID%>").value = ""; document.getElementById("<%=hdnDealineDays.ClientID%>").value = 0; document.getElementById("<%=hdnExtDays.ClientID%>").value = 0; document.getElementById("<%=hdnMMS.ClientID%>").value = false; validated = true; //wizard contianer document.getElementById('newtl').style.display = 'none'; } function AddGridRecord() { // Inserts record into timelime grid __doPostBack("<%=pnlTimelines.ClientID%>"); resetWizard(); } </script>