RadzenStep previous next icons

damian_s · September 7, 2021, 7:51am

Hi Radzen,

I have a small feature request.

One of the applications I'm working on, requires RTL support. I'm using your steps component as a wizard, and everything works dandy, except for the previous and next arrows which then point the wrong way.

Would it be possible to pass the icons as parameters, or even a flag for not showing them at all?

Thanks for considering it!

damian_s · September 7, 2021, 7:59am

Or if it could work like the Paginator where I'm able to override the style, that would work too.

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenPager.razor

@inherits RadzenComponent
@if (GetVisible())
{
    <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
        @if (skip > 0)
        {
            <a class="rz-paginator-first rz-paginator-element" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => FirstPage())">
                <span class="rz-paginator-icon rzi rzi-step-backward"></span>
            </a>
            <a class="rz-paginator-prev rz-paginator-element" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => PrevPage())">
                <span class="rz-paginator-icon rzi rzi-caret-left"></span>
            </a>
        }
        else
        {
            <a class="rz-paginator-first rz-paginator-element rz-state-disabled" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => FirstPage())">
                <span class="rz-paginator-icon rzi rzi-step-backward"></span>
            </a>
            <a class="rz-paginator-prev rz-paginator-element   rz-state-disabled" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => PrevPage())">
                <span class="rz-paginator-icon rzi rzi-caret-left"></span>

This file has been truncated. show original

enchev · September 7, 2021, 8:24am

Maybe you can hide completely step buttons and use your own. Here is the CSS class:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenSteps.razor#L50

    
      
                      {
                          <div class="rz-widget-content">
                              @if (step.ChildContent != null)
                              {
                                  @step.ChildContent
                              }
                          </div>
                      }
                  }
              }
              <div class="rz-steps-buttons">
                  <a class='@($"rz-steps-prev {(IsFirstVisibleStep() ?  "rz-state-disabled" : "")}")' @onclick="@PrevStep" href="javascript:void(0)"><i class="rzi">navigate_before</i>@PreviousText</a>
                  <a class='@($"rz-steps-next {(IsLastVisibleStep() ?  "rz-state-disabled" : "")}")' @onclick="@NextStep" href="javascript:void(0)">@NextText<i class="rzi">navigate_next</i></a>
              </div>
          </div>
          }
          
          
@code {
              [CascadingParameter]
              public EditContext EditContext { get; set; }

damian_s · September 7, 2021, 9:52am

Thanks @enchev.

Having had a look at it now, I'm not sure if I'll be able to use my own buttons with the steps field being private, without overriding/duplicating most of the component.

For now I think I'll just hide them completely.

enchev · September 7, 2021, 9:58am

You can use SelectedIndex property.

damian_s · September 7, 2021, 10:34am

Ah, I see. Or kind of.
I'm unable to check if the next step is disabled. Is there something else I'm missing?

github.com

radzenhq/radzen-blazor/blob/c31b7598e42e60c1ba22da22b530fc8c9f352673/Radzen.Blazor/RadzenSteps.razor#L129

    
      
                  await SelectStepFromIndex(prevIndex);
              }
          }
          
          
async System.Threading.Tasks.Task SelectStepFromIndex(int index)
          {
              if (index >= 0 && index < steps.Count)
              {
                  var stepToSelect = steps[index];
          
          
        if (stepToSelect != null && !stepToSelect.Disabled)
                  {
                      await SelectStep(stepToSelect, true);
                  }
              }
          }
          
          
int _selectedIndex = 0;
          [Parameter]
          public int SelectedIndex
          {

enchev · September 7, 2021, 10:55am

To check if the next step is disabled you can use Disabled property. The next step is SelectedIndex + 1.

damian_s · September 7, 2021, 11:06am

But I can't access the the list of steps to get the SelectedIndex + 1 step, and check its state.

enchev · September 7, 2021, 11:15am

Here is what I've just pushed: https://github.com/radzenhq/radzen-blazor/commit/d8468be21a2d51d43592dc3209e6b7bfe6e9535e

damian_s · September 7, 2021, 11:20am

That's great - thank you!