Is there a way, after the user clicks the complete button that all the information
in the wizard is set back to the default.
I have a modal to add users with 2 wizard steps and a complete step. The complete step has two buttons 1)to start the process again 2)to close the modal. After complete everything in the modal is being reset to initial state and if I reopen the modal it always displays the complete step.
<telerik:RadWizard RenderMode="Lightweight" ID="AddUserWizard" runat="server" Skin="MetroTouch" OnClientLoad="OnClientLoad" OnClientButtonClicking="OnClientButtonClicking" DisplayProgressBar="False" DisplayNavigationButtons="True">
<WizardSteps>
<telerik:RadWizardStep ID="SearchUserStep" Title="Select User" runat="server" StepType="Start">
<telerik:RadScriptBlock ID="RadCodeBlock4" runat="server">
<div id="userSearchDiv">
<ul>
<li>Users</li>
<li>Groups</li>
</ul>
<div id="tabuserSearch" >
<input id="UserSearchTxt" type="text" />
<img src='images/magnifier.gif' style='vertical-align: middle; cursor: pointer;' alt='Click here to search' border="0" onclick='searchUser();' />
</div>
<div id="tabGroupSearch" >
<input id="GroupSearchTxt" type="text" />
<img src='images/magnifier.gif' style='vertical-align: middle; cursor: pointer;' alt='Click here to search' border="0" onclick='searchGroup();' />
</div>
</div>
</telerik:RadScriptBlock>
</telerik:RadWizardStep>
<telerik:RadWizardStep ID="edituser" Title="Edit User" runat="server" StepType="Finish">
<iframe id="editUserFrame" src="" frameborder="0" style="width: 100%; height: 360px;"></iframe>
</telerik:RadWizardStep>
<telerik:RadWizardStep runat="server" StepType="Complete" CssClass="complete" >
<telerik:RadButton RenderMode="Lightweight" ID="NewRegistrationButton" runat="server" OnClick="NewRegistrationButton_Click" Text="Create a new registration"></telerik:RadButton>
</telerik:RadWizardStep>
</WizardSteps>
Please let me know if there is any way to reset the wizard.
Related
I'm trying to fix an issue with a telerik rad button that occurs when scrolling after documents have been selected for uploading. The Select Files button stays at the top when scrolling which is what I want but the second button (Upload) does not stay at the top and instead scrolls and covers up the files that have been added via the Select Files button.
Here is the part of the code along with an image of the actual upload screen.
<div class="container">
<div class="row" style="padding: 10px 0">
<div class="col-lg-1" >
<telerik:RadAsyncUpload RenderMode="Lightweight"
ID="RadUpload1"
runat="server"
MultipleFileSelection="Automatic"
ManualUpload="False"
DropZones=".DropZone1"
OnClientValidationFailed ="OnClientValidationFailed"
PostbackTriggers="btnUpload"
HideFileInput="False"
UploadedFilesRendering="BelowFileInput"
OnClientFilesUploaded="onClientFilesUploaded"
OnClientFileUploading="onClientFileUploading">
<Localization Select="Select files"></Localization>
</telerik:RadAsyncUpload>
</div>
<div class="col-lg-2">
<telerik:RadButton RenderMode="Lightweight" runat="server" Text="Upload" ID="btnUpload" Enabled ="false"/>
</div>
<div class="col-lg-9"></div>
</div>
<div class="DropZone1">
<p>Drop Files Here</p>
</div>
Right now I can render a signup form in a twitter bootstrap modal, enter data into it, if the data doesn't pass constraints, the form will render correctly and say that the constraints don't pass (via error messages).
But the problem is, the formRemote that I'm using ends up "passing" even though the constraints aren't validated and the view I get contains the error message.
Essentially, I create a modal, then have it's data-remote set to the gsp containing this code:
<%# page import="security.User" %>
<html>
<head>
<r:layoutResources />
<g:set var="entityName" value="${message(code: 'user.label', default: 'User')}" />
<title><g:message code="default.create.label" args="[entityName]" /></title>
</head>
<body>
<g:hasErrors bean="${userInstance}">
<ul class="errors" role="alert">
<g:eachError bean="${userInstance}" var="error">
<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
</g:eachError>
</ul>
</g:hasErrors>
<g:formRemote name="ajaxSignupForm" url="[action:'save',controller:'user']" update="signupModal .modal-body">
<div class="fieldcontain ${hasErrors(bean: userInstance, field: 'username', 'error')} required">
<label for="username">
<g:message code="user.username.label" default="Username" />
<span class="required-indicator">*</span>
</label>
<g:textField name="username" required="" value="${userInstance?.username}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: userInstance, field: 'password', 'error')} required">
<label for="password">
<g:message code="user.password.label" default="Password" />
<span class="required-indicator">*</span>
</label>
<g:passwordField name="password" required="" value="${userInstance?.password}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: userInstance, field: 'confirmPassword', 'error')} required">
<label for="confirmPassword">
<g:message code="user.confirmPassword.label" default="Confirm Password" />
<span class="required-indicator">*</span>
</label>
<g:passwordField name="confirmPassword" required="" value="${userInstance?.confirmPassword}"/>
</div>
<g:submitButton name="create" class="btn btn-success" value="Create Account" />
</g:formRemote>
<div style='display: none; text-align: left;' id='signupMessage'></div>
<r:layoutResources />
</body>
</html>
The update="signupModal .modal-body" chunk is what is updating the modal that this gsp is contained in. I understand that this is some nasty logic, so what can I do to make this better and actually perform correctly?
I prefer to enclose your formRemote inside a div. and then set the update="formParent".
E.g.
<div id="formParent" ... update="signupModal">
<g:formRemote
...
</div>
I'm trying to create a textbox with an attached button that looks similar to a Kendo DatePicker or NumericTextBox. This is close, but it doesn't quite line up. Any help straightening this up would be appreciated.
<style>
.unselectable
{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<span class="k-widget k-datepicker k-header" style="width: 136px">
<span class="k-picker-wrap k-state-default">
<input class="k-input" type="text" name="searchParam" id="searchParam" placeholder="Name ..." />
<span class="unselectable k-button k-select">
<img class="unselectable" src="~/Images/search_flashlight_16.png" />
</span>
</span>
</span>
Everything you should need is this:
See jsFiddle DEMO
<span class="k-textbox k-button k-space-right">
<input value="This is the value" />
<a class="k-icon k-filter"></a>
</span>
Also see the "documentation" (Look at the source for the example) for this here.
EDIT:
Since the asker really wanted it to behave as a button (i.e. the click-effect), just add the k-button class to the outter span.
I know that this is an old question, but I felt like Shion's answer wasn't quite what I was looking for. So after a bit of experimenting I came up with this which doesn't give you the flicker of the button:
<span class="k-picker-wrap k-state-default">
<input style="width: 100%;" type="text" class="k-input">
<span unselectable="on" class="k-select" aria-label="select" role="button">
<span class="k-icon k-i-filter"></span>
</span>
</span>
Live Example: Dojo
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});
I have a reeeaaally weird & strange problem with some form elements on a .ASPX page im working on.. the page form has a hidden slide-in on click of a div, section allowing the user to 'make a reservation'.
The jQuery used to animate the slide works fine, and happens on click on the ticky check-box (id="rescheck").
The problem is, instead of all the fields contained within the hidden div displaying on click of the checkbox, and thus sliding into view along with their labels, only one text field input shows, and nothing else. Checking the source code shows that these missing labels & fields are not even in the source code, dispite being in the page code when viewed (and edited) within MS Visual Studio 2008.
As you can see, the fields and their labels seem to just disappear in the browser! I have NO idea whats causing this, and am not sure where to go with it next.
This is my PAGE code, from Visual Studio:
<fieldset id="resreq">
<legend>Make a Reservation?</legend>
<label for="rescheck" class="rescheck">If you would like to reserve a table at Madrasi check here:</label>
<input id="rescheck" type="checkbox" class="rescheck" runat="server" />
<div id="reservationfields">
<div id="res_when">
<div>
<asp:Label ID="lblDate" runat="server" AssociatedControlID="txtDate">On which date would you like us to reserve your table?</asp:Label>
<asp:TextBox ID="txtDate" runat="server" CssClass="res_date" />
</div>
<div>
<asp:Label ID="lblTime" runat="server">and for what time?</asp:Label>
<asp:TextBox ID="txtTime" runat="server" CssClass="res_time" />
</div>
</div><!-- close res_when -->
<div>
<asp:Label ID="lblBranch" runat="server">At which restaurant would you like to make your reservation?</asp:Label>
<asp:DropDownList ID="ddlBranch" runat="server">
<asp:ListItem Text="Select a Restaurant" Value="" />
<asp:ListItem Text="Restaurant 1" Value="Restaurant 1" />
<asp:ListItem Text="Restaurant 2" Value="Restaurant 2" />
</asp:DropDownList>
</div>
<div>
<asp:Label ID="lblPeople" runat="server" AssociatedControlID="txtPeople" Text="Number of Guests:" />
<asp:TextBox ID="txtPeople" runat="server" />
</div>
<div>
<asp:Label ID="lblDOB" runat="server" AssociatedControlID="txtDOB">Date of Birth:</asp:Label>
<asp:TextBox ID="txtDOB" runat="server" />
</div>
</div><!-- close reservation fields -->
</fieldset>
...and this is the Source Code when you 'view source' in the browser:
<fieldset id="resreq">
<legend>Make a Reservation?</legend>
<label for="rescheck" class="rescheck">If you would like to reserve a table at Madrasi check here:</label>
<input name="ctl00$cpcMain$rescheck" type="checkbox" id="ctl00_cpcMain_rescheck" class="rescheck" />
<div id="reservationfields">
<div id="res_when">
<div>
<input name="ctl00$cpcMain$txtDate" type="text" id="ctl00_cpcMain_txtDate" class="res_date" />
</div>
<div>
</div>
</div>
<div>
</div>
<div>
</div>
<div>
<span id="ctl00_cpcMain_rvDOB" style="color:Red;visibility:hidden;">You have entered your Date of Birth incorrectly (dd/mm/yyyy).</span>
</div>
</div><!-- close reservation fields -->
</fieldset>
Is there anything in the codebehind that sets the Visible property of any of the controls to false ? That causes the controls not to be rendered in the HTML at all instead of putting them in invisible state, which can be quite confusing because many wouldn't expect that.