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 in every usage of my wrapper in addition to user-defined Columns *@<DxGridDataColumn><CellDisplayTemplate Context="..."><ChildComponent Name="Child 1" /></CellDisplayTemplate></DxGridDataColumn></Columns></DxGrid><ChildComponent Name="Child 2" /></CascadingValue>@code {   [Parameter]   RenderFragment Columns { get; set; }   public string Something { get; set; }}

And ChildComponent looks like:

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

And I use it like this:

@* Usage *@<WrapperComponent><Columns><DxGridDataColumn FieldName="..."><CellDisplayTemplate Context="..."><ChildComponent Name="Child 3" /></CellDisplayTemplate></DxGridDataColumn></Columns></WrapperComponent>

In ChildComponent instances with Name="Child 2" and Name="Child 3", I 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. This assumption makes sense, since columns is a RenderFragment that is only rendered by the third party component once the remote data is loaded. However, I dont believe this is the cause of the error because 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>