Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor CascadingValue not available in descendent component

$
0
0

I am trying to use <CascadingValue> to pass down an instance of a component so that I can easily access its api in dependent sub components (Grid, and GridColumn for example).

Say my setup is like this (Sketch of the actual code):

@* WrapperComponent.razor *@<CascadingValue Value="this" IsFixed="true"><DxGrid><Columns> @* Columns defined in the ThirdPartyComponent *@          @Columns          @* A column I need every usage of my wrapper in addition to user-defined Columns *@<ChildComponent Name="Child 1" /></Columns></DxGrid><ChildComponent Name="Child 2" /></CascadingValue>@code {   [Parameter]   RenderFragment SomeRenderFragment { get; set; }   public string Something { get; set; }}

And ChildComponent looks like:

@* ChildComponent .razor *@<DxGridDataColumn>    @WrapperComponentInst.Something</DxGridDataColumn>@code {   [CascadingParameter]   WrapperComponent WrapperComponentInst { get; set; }}

And I use it like this:

@* Usage *@<WrapperComponent><Columns><DxGridDataColumn><ChildComponent Name="Child 3" /></DxGridDataColumn></Columns></WrapperComponent>

In ChildComponent instances with Name="Child 2" and Name="Child 3", I will have access to the WrapperComponent passed down via CascadingValue.However, in the ChildComponent with Name="Child 1", which is used within the markup of WrapperComponent (though nested), the cascading value is null. Oddly, the the ChildComponent with Name="Child 2" that is also part of WrapperComponent's markup the cascading value is not null.

What I have tried so far:

  1. Using a named CascadingValue did not help.
  2. Removing IsFixed did not help.

I then considered that perhaps the Columns RenderFragment isn't actually rendered within the render tree as I expected, since it's handled by a third-party component. In that the case, the CascadingValue does not surround the RenderFragment, making it unavailable to its descendents. However, this assumption is contradicted by the fact that the cascading value is available within the ChildComponent instance with Name="Child 3".

To fix it I had to do create yet another Cascading value:

@* WrapperComponent.razor *@<CascadingValue Value="this" IsFixed="true"><DxGrid><Columns>          @Columns<CascadingValue Value="this" IsFixed="true"> @* Fix *@<ChildComponent Name="Child 1" /><CascadingValue/></Columns></DxGrid><ChildComponent Name="Child 2" /></CascadingValue>

I want to understand why this happens, as adding another CascadingValue seems to go against the whole point of CascadingValue if it doesn’t actually reach all descendants.

Thanks for any tips :)


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>