We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

NavigationManager.NavigateTo not functional while using Grid components

Thread ID:

Created:

Updated:

Platform:

Replies:

147702 Sep 20,2019 10:44 AM UTC Sep 24,2019 09:27 AM UTC Blazor 6
loading
Tags: Grid
Niklas Teich
Asked On September 20, 2019 10:44 AM UTC

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
Replied On September 20, 2019 10:37 PM UTC

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
Replied On September 21, 2019 08:08 AM UTC

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
Replied On September 23, 2019 09:16 AM UTC

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 [Syncfusion]
Replied On September 23, 2019 11:59 AM UTC

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  
 
 
Please get back to us if you have further queries.  
 
Regards, 
Rahul 


Rahul Narayanasamy [Syncfusion]
Replied On September 23, 2019 12:01 PM UTC

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 [Syncfusion]
Replied On September 24, 2019 09:27 AM UTC

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

 

  1. 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.  


Also refer the below documentation for your reference 


Please get back to us if you have further queries.    

Regards, 
Vignesh Natarajan. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon