RadWizard - Customize Buttons

12 posts, 1 answers
  1. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 05 Dec 2014 Link to this post

    Is there a way to customize the buttons on the bottom command area?  It seems like you can with the WinForms version but not the ASP.NET Ajax version.  We'd like to add our own buttons into the process (such as 'Skip Step' which will move forward without saving as opposed to 'Next' which would save and move forward).
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1907 posts

    Posted 10 Dec 2014 Link to this post

    Hello,

    You can use the RadWizard Localization-NexStep property in order to set different text for the next button. Also you can use the NextButtonClick server-side event handler to implement your own logic when the button is clicked.
    //markup code
    <telerik:RadWizard .... Localization-Next="SkipStep" OnNextButtonClick="RadWizard1_NextButtonClick"></telerik:RadWizard>



    Regards,
    Boyan Dimitrov
    Telerik
  3. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 10 Dec 2014 in reply to Boyan Dimitrov Link to this post

    I'm aware of that but that's not what I mean.

    I want to add a 'Skip' button which is NOT the same as the 'Next' button into the same area where the 'Back' and 'Next' buttons go.
  4. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 11 Dec 2014 in reply to J Link to this post

    As in something like this:

    {CONTENT}
    ---------------------------------------------------------------
    {BACK}                                    {SKIP}   {NEXT}
  5. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 15 Dec 2014 Link to this post

    *crickets*
  6. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1907 posts

    Posted 16 Dec 2014 Link to this post

    Hello,

    Please find below a sample RadWizard control configured to have Back, Skip and Next buttons. As I mentioned in order those buttons to behave as expected you have to subscribe for the server events of those buttons and implement your own custom logic.

    In other words the "Back" button will be shown in place of the default "Cancel" button, but if you want to implement back functionality you have to subscribe for the  OnCancelButtonClick and force the RadWizard to change the current active step to the previous one (if this step exists). Sample thing applies for "Skip" button.
    //markup code
    <telerik:RadWizard ID="RadWizard1" runat="server" Height="360px" Localization-Previous="Skip" Localization-Cancel="Back" DisplayCancelButton="true" OnCancelButtonClick="RadWizard1_CancelButtonClick">
        <WizardSteps>
    ......
    </telerik:RadWizard>


    Regards,
    Boyan Dimitrov
    Telerik
  7. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 16 Dec 2014 in reply to Boyan Dimitrov Link to this post

    Marking this as answered but that's such a cludgey way to do what we want and still limits us to only having 3 buttons.

    Maybe as a feature idea for the future, make it so we can add custom buttons and click handlers for them to the command area.  This does not seem like a clean approach for this, especially considering we only want it like that for 1 or 2 steps in the wizard, not all of them.  If we have to do what you describe, we might as well hide the command bar and make our own and then use js/css to make it seem like it's part of the wizard.
  8. Rod
    Rod avatar
    1 posts
    Member since:
    May 2014

    Posted 02 Feb Link to this post

    Telerik web products are cludgey period. The frustrations levels I experience trying to find out how to get behaviour beyond the rudimentary basics leaves me determined not to use their products when at all possible. The API and document pages are brief beyond usable and most of the examples and solutions put forward in the forums etc by the telerik people often do not solve the issues that were raised.
  9. Chris
    Chris avatar
    6 posts
    Member since:
    Jan 2017

    Posted 03 Feb in reply to Boyan Dimitrov Link to this post

    Let me get this straight, the Localization type is being used to change the functionality of the button?

    That is extremely hacky and poorly done.  Localization is for translating the page to the local language.  This means that if I wanted a custom button AND a localized wizard, not only would I have to change it here but I would have to locate some obscure file elsewhere to change the default behavior when the "Culture" field is changed?  And then even still I would be limited to at most 4 buttons?  This doesn't account for the fact that the wizard doesn't work properly when steps are added, removed, or when there is only a single step (the "back" button shows, which is just simply shouldn't) *and* there's no direct control over the progress bar which apparently is just styled based off of an int indicating the step (this should be exposed for developer control!).

    In addition there's no way to hide steps.  You can still set the step visibility to false, which leaves it in the step-selection bar but just makes the page empty.  That's incomplete functionality.

    This is not Rapid Application Development, this is WET and hacky development.

    Has Telerik been doing anything to address any of these issues?  As far as I've seen, not one has come remotely to a conclusion, much less a response that it is going to go into development.


  10. Peter Milchev
    Admin
    Peter Milchev avatar
    217 posts

    Posted 08 Feb Link to this post

    Hello,

    The Localization type is being used to change the functionality of the button?
    - The Wizard control does not support templates for the navigation buttons. The solution suggested by my colleague is a workaround that could fit that exact scenario. You can submit а feature request for the templates for the navigation buttons in the Telerik Ajax Feedback and Ideas portal. If the idea becomes popular, the management will prioritize its development. 

    This doesn't account for the fact that the wizard doesn't work properly when steps are added, removed
    - Here is the Wizard - Add / Remove WizardSteps online demo where the proper behavior of adding and removing steps is demonstrated.

    When there is only a single step (the "back" button shows, which is just simply shouldn't)
    - This is a known bug, we have increased its priority and you could follow the bug fixing progress in the "Previous" navigation button is displayed in the first WizardStep if its type is Auto and the next step's type is Complete Telerik Ajax Feedback and Ideas portal item.

    There's no direct control over the progress bar which apparently is just styled based off of an int indicating the step (this should be exposed for developer control!)
    - There are methods that control the completion percentage both client-side and server-side:
    1. Wizard client-side object has get_progressPercent() and set_progressPercent() mehtods
    2. Wizard server-side object has ProgressPercent property.

    There's no way to hide steps
    - Currently there is no such built-in functionality. Similar to the templates for navigation buttons case, you can submit another feature request for the hiding steps functionality.

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  11. Chris
    Chris avatar
    6 posts
    Member since:
    Jan 2017

    Posted 08 Feb in reply to Peter Milchev Link to this post

    The completion percentage control options should really be exposed on the proper page:  
    http://docs.telerik.com/devtools/aspnet-ajax/controls/wizard/structure/progress-bar  

    Even if it just links to other documentation pages.  I searched for a long time for find a server-side control of the percentage without any luck until your response right here, even still it will leave me or anyone else with a lack of documentation that is important no matter how basic it may be.

    It definitely appears that the add/remove steps works in the demo (bar some design issues), but for whatever reason when I attempt to use the feature it fails unless I have viewstate disabled.  It might be a specific usage-scenario that I'll have to post and troubleshoot.

    I'm glad to see the back button is a known bug that is in development at least.

    Thank you for the response.  It looks like I will need go to the features submission portal to add in a few ideas.

  12. Peter Milchev
    Admin
    Peter Milchev avatar
    217 posts

    Posted 09 Feb Link to this post

    Hello Chris,

    Thank you for your feedback. 

    We will review and update the documentation as soon as possible.

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top