Hyperlinks in FlexGrid causes Blazor Circuit Restart

Hyperlinks in FlexGrid causes Blazor Circuit Restart

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

• 

  jkattakkayam

  • Post Options:
  • Link
    Copy

  Posted 19 May 2023, 9: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, 3:02 pm 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

• 

  darren

  • Post Options:
  • Link
    Copy

  Posted 12 February 2024, 7:04 pm EST - Updated 13 February 2024, 1:09 am EST

  Thank you for this Manish, it has been driving me crazy too until I saw your fix. Is there a way the GridHyperlinkColumn can be changed to not force a reload?

  Also, for me the Context=“context” attribute works better on the GridColumn element, omitting Binding so the cell context binds to the whole object then using different properties for display text and URL.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 February 2024, 2:47 am EST

  Hi Darren,
  
  The behavior is by design. So if you would not like to reload the Page on Link click, please use the above provided workaround.

  And regarding the ContextMenu with Binding and NonBinding column. This behavior is by design as if binding available, it evaluates the value based on binding from the row item while if the binding is not available, the binding is not available and this does not allow to evaluate the cell value based on binding and it returns the complete row item.

  Regards,
  
  Manish Gupta