Hyperlinks in FlexGrid causes Blazor Circuit Restart

Hyperlinks in FlexGrid causes Blazor Circuit Restart

Posted by: jkattakkayam on 19 May 2023, 12:53 am EST

• 

  jkattakkayam

  • Post Options:
  • Link
    Copy

  Posted 19 May 2023, 12:53 am EST

  We have a Blazor single-page application. Within the app, we use the ComponentOne FlexGrid control, which includes columns with hyperlinks. However, we have encountered an issue where clicking these hyperlinks within the FlexGrid columns causes the Blazor Circuit connection to restart, resulting in a full page reload. We have attempted to use different components for the hyperlinks within the FlexGrid, such as ‘GridHyperlinkColumn’, ‘NavLink’, and regular anchor tags, but the behavior remains the same. It is important to note that direct links outside of the FlexGrid control are functioning correctly without any issues.

  Please refer to the following code snippet where the first direct link is working as expected, and Blazor handles the navigation appropriately without causing a full page reload or circuit restart. However, the links inside the FlexGrid control are causing a circuit restart.

  <NavLink href="/test">Direct Link Test</NavLink> <FlexGrid AutoGenerateColumns="false" ItemsSource="testList"> <FlexGridColumns> <GridColumn Header="TestID" Binding="ID" Width="90" /> <GridHyperlinkColumn Header="GridHyperlinkColumn" Binding="Link" ContentBinding="Id" Width="90" /> <GridColumn Header="NavLink" Width="90"> <CellTemplate Context="context"> <NavLink href="/test">Test NavLink</NavLink> </CellTemplate> </GridColumn> <GridColumn Header="AnchorLink" Width="90"> <CellTemplate Context="context"> <a style="position:absolute;" href="/test">Test Anchor Link</a> </CellTemplate> </GridColumn> </FlexGridColumns> </FlexGrid>

  Thanks,
  
  Jokku

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 21 May 2023, 6:02 am EST

  Hi Jokku,
  
  It can be done using the following code snippet:

  <GridColumn Header="Link" Binding="Link" >
                  <CellTemplate Context="context">
                      <a href="@context" @onmousedown=@(()=>nav.NavigateTo(context.ToString(),false)) @onclick:preventDefault>@context</a>
                  </CellTemplate>
              </GridColumn>

  Or alternatively, you may create your own Column just to define the Binding and ContentBinding. Please refer to the attached sample for reference.

  Regards,
  
  Manish Gupta

  FlexGrid_Link_SPA.zip