NavigationManager.NavigateTo not functional while using Grid components

[Niklas Teich]

Hello.

I have pages with grids, and on those pages, the NavigationManager.NavigateTo function does not work.

I can reproduce this error - pages without a grid can use the NavigationManager without any problems.

Sadly, i can't post my error log in this thread "You have tried to enter a word or URL that is not allowed on this site."

How can i solve this issue?

Greetings,

Niklas

[James Cockerill]

I'm seeing the same problem on the latest version of the ej2-blazor-samples.

The sample project compiles but throws an exception immediately when run.

The index page attempts to navigate to a grid based page:

 protected override void OnInitialized(){

        UriHelper.NavigateTo("Grid/DefaultFunctionalities?theme=material");

    }

which throws a Microsoft.AspNetCore.Components.NavigationException

[Uwe Hein]

Hi @Niklas, @James,

  I tried with the samples form Sept. 19 using RC1 and VS 16.3.0 preview 4 without any problems.

    regards

       Uwe

[Niklas Teich]

I created a new Client-Side Blazor app and everything the docs suggest.
The samples are not using web assembly (Server-Side Blazor App).
Like i said, the Navigation crashes when a grid is on the page.
If no grid is on the page, i can use the NavigationTo function without any problems.

Niklas

[Rahul Narayanasamy]

Hi James, 

 

Greetings from Syncfusion.  

 

Query: “which throws a Microsoft.AspNetCore.Components.NavigationException” 

 

We are able to reproduce the reported issue at our end too, when trying to navigate to another page in OnInitialized method. This is because you are trying to navigate before component is being initialized. So we suggest you to achieve your requirement using OnAfterRender method of Blazor.  Refer the below code example.    

 

  protected override void OnAfterRender(bool firstRender) 

    { 

        Navigation.NavigateTo("/fetchdata"); 

    } 

 

Kindly download the sample from below  

 

Sample:  https://www.syncfusion.com/downloads/support/forum/147702/ze/James-366432859  

 

Please get back to us if you have further queries.  

 

Regards, 

Rahul 

[Rahul Narayanasamy]

Hi Niklas, 

 

Greetings from Syncfusion. 

 

Query: NavigationManager.NavigateTo not functional while using Grid components in Client Side Blazor 

 

We have validated your query and we are able to reproduce the reported problem at our end. Currently we are validating the reported problem at our end and we will further update you on September 25, 2019. Until then we appreciate your patience. 

 

Regards, 

Rahul 

[Vignesh Natarajan]

Hi  Niklas, 

Thanks for the patience.  

Query: “NavigationManager.NavigateTo not functional while using Grid components in Client Side Blazor” 

While navigating with Grid component in client side application, we suggest you to use NavLink routing component of Microsoft ASP.NET Core instead of Navigation Manager.  Using NavLink you can navigate to another page along with parameters also. Refer the below code example.  

@*render navLink as EjsButton*@ 

    <EjsButton> 

        <NavLink rel='nofollow' href="@link"> 

            Navigate To 

        </NavLink> 

    </EjsButton> 

@*to pass parameters on click*@ 

<EjsButton OnClick="Check">Pass Parameters</EjsButton> 

<EjsGrid DataSource="@Orders" AllowPaging="true">   

………………………………….. 

</EjsGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

    public string link = "fetchdata"; 

    public string a = "check";    

    public void Check() 

    { 

        link = $"fetchdata/{a}"; 

    } 

.            .               .               .               .             .                .               .  

} 

  

Refer the below screenshot for the output 

1. On Clicking the Navigate to button for first time. It will be navigated to below url

 

2. Then click on Pass Parameters button to change the rel='nofollow' href value. Now clicking on Navigate To will navigate to fetchdata along with parameter passed. Refer the below screenshot.

 

For your convenience we have prepared a client side application which can be downloaded from below.  

Sample: https://www.syncfusion.com/downloads/support/forum/147702/ze/ClientApp-729411084  

Also refer the below documentation for your reference 

https://docs.microsoft.com/en-us/aspnet/core/blazor/routing?view=aspnetcore-3.0#navlink-component  

Please get back to us if you have further queries.    

Regards, 

Vignesh Natarajan.