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:
- Using a named
CascadingValuedid not help. - 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 :)