1. Home
  2. Forum
  3. Blazor
  4. Using the same component in a workflow with SfMenu > MenuItem

Using the same component in a workflow with SfMenu > MenuItem

I have a component that is accessed via SfMenu MenuItem but is used in several workflows off the same menu tree.  The menu uses the Url attribute and the workflow is changed via the parameter being passed in.  The problem is that the page view does not update. In a normal case, I'd use an onclick event and navigation manager with force set to true or in others workflow changes StateHasChanged().

What is the best way to accomplish this using the SfMenu -> MenuItem? 

Thanks

Mike


Attachment: SfMenuWorkflow_49dcc2d3.rar

3 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team November 30, 2020 10:07 AM UTC

Hi Mike, 
 
We have checked your reported query. We are unable to reproduce the reported issue in our end. Please refer below refer code snippets. 
 
 
@page "/fetchdata" 
@page "/fetchdata/{CurrentCount:int}" 
 
 
@using BlazorApp_ServerSide.Data 
@inject WeatherForecastService ForecastService 
 
@using Syncfusion.Blazor.Buttons 
@inject NavigationManager Navigation 
 
<h1>Weather forecast</h1> 
 
<p>This component demonstrates fetching data from a service.</p> 
 
@if (forecasts == null) 
{ 
    <p><em>Loading...</em></p> 
} 
else 
{ 
    <table class="table"> 
        <thead> 
            <tr> 
                <th>Date</th> 
                <th>Temp. (C)</th> 
                <th>Temp. (F)</th> 
                <th>Summary</th> 
                <th>Action</th> 
            </tr> 
        </thead> 
        <tbody> 
            @foreach (var forecast in forecasts) 
            { 
                if (CurrentCount < Count) 
                { 
                    CurrentCount++; 
                    <tr> 
                        <td>@forecast.Date.ToShortDateString()</td> 
                        <td>@forecast.TemperatureC</td> 
                        <td>@forecast.TemperatureF</td> 
                        <td>@forecast.Summary</td> 
                        <td><SfButton Content="Redirect" @onclick="Redirect"></SfButton></td> 
                    </tr> 
                } 
            } 
        </tbody> 
    </table> 
} 
 
@code { 
    private WeatherForecast[] forecasts; 
    [Parameter] 
    public int CurrentCount { get; set; } = 0; 
    private int Count = 5; 
 
    protected override async Task OnInitializedAsync() 
    { 
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now); 
    } 
 
    protected override void OnAfterRender(bool firstRender) 
    { 
        base.OnAfterRender(firstRender); 
        if (CurrentCount != 0) 
        { 
            Count = 5; 
        } 
    } 
 
    private void Redirect() 
    { 
        Count = 2; 
        CurrentCount = 0; 
        Navigation.NavigateTo("/FetchData/1"); 
    } 
} 
 
 
For your reference, we have prepared a sample based on this. Please refer below link. 
 
 
We have created the video demonstration based on this. Please find the below video link. 
 
 
In above sample, you can navigate Home-> Fetech Data and click the Redirect button. Then navigate Home-> Fetech Data, if page refreshed.  
 
Blazor updates the UI every time a parameter update. Invoking an external StateHasChanged() might be required when updating parameters as a result of any async operation. For more details please refer below link. 
 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


Marked as answer
MC Mike Chafin November 30, 2020 12:35 PM UTC

Mohan Kumar,

I appreciate your support however the question was specific to using the same component from a SfMenu -> MenuItem  

As an aside, I don't have a video viewer from a *.xesc and really don't wish to load Expression.

Thanks

Mike

MK Mohan Kumar Ramasamy Syncfusion Team December 2, 2020 10:25 AM UTC

Hi Mike, 
 
Sorry for the inconvenience caused. 
We have changed the video format based on this, please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 
 


Loader.
Up arrow icon