Umbraco Block Grid Get Parent settings from Child Block

Hi,

I have hit a bit of an issue on a site I am building, we have some block grid, that we can set a color on, Which is normally the outer container, for HTML that works ok.

But the issue I am now having is the fact that we need to set a style on the child blocks that are in the container if a colours set as the back ground.

So Example.

Outer Block would have a back colour and inside the container we have up to 4 columns depending on the block been used.

Each of the cols would then need to check the parent container to see if a back color is set, if it is then we need to apply a style at that point.

The problem is I can’t apply the style on the outer container, as if one or more of the cols dose not have a back color then the text style can’t be applied.

I have a work around in place I set the back color again on each of the cols that needs it. But this is just a work around and I can see it annoying the customer.

I just need a way to get he settings on the outer container from the child block in the container. If that make sence.

Thanks
Darren

Hey @darrenhunterEmerald,
there are ways to check this but may be more complex that using conditional CSS

e.g. If the outer container has a class of ‘dark’ then make the text ‘light’ and vice versa.

I have it set up like this in UmBootstrap using Bootstraps conditional CSS.

Please feel to install it and use the code.

To get this to work the way it needs to work, it has to write additional DIV before the content is generated.

See:

<div class="h-100 textBoxPaddingFix" @Html.Raw(getRowStyle()) > @*p-3*@
    <!--This div is used to add the border colour-->
    @if(BuildBorderWrapper() !=""){
        <div class="@BuildBorderWrapper() h-100">
            @{

                InnerRender();

            }
            <!--Area Content End Here-->
        </div>
    } else {
        <!--No DIV Needed-->
        InnerRender();
    }

</div>

So I have some code that check my setting to see if the back ground colour is set,

 Boolean hasBackGroundColour = colSettingsHelper.hasBackGroundColour();

 public void GetSettings() {

     if(mode == 0)
     {
         if (Setup)
         {

             colSettings.cssClass = Model.Settings.Value<string>("class");
             colSettings.setABackGroundImage = Model.Settings.Value<IPublishedContent>("setABackGroundImage");
             colSettings.backgroundClass = Model.Settings.Value<string>("backgroundClass");
             colSettings.colourClass = Model.Settings.Value<string>("textColour");
             settingsName = Model.Settings.ContentType.Alias;
             parentName = Model.Content.ContentType.Alias.ToUpper();
         }
     }

     if(mode == 1)
     {
         if (Setup)
         {
             colSettings.cssClass = model[0].Settings.Value<string>("class");
             colSettings.setABackGroundImage = model[0].Settings.Value<IPublishedContent>("setABackGroundImage");
             colSettings.backgroundClass = model[0].Settings.Value<string>("backgroundClass");
             colSettings.colourClass = model[0].Settings.Value<string>("textColour");
             settingsName = model[0].Settings.ContentType.Alias;
             parentName = model[0].Content.ContentType.Alias.ToUpper();
         }
     }

 }

 public Boolean hasBackGroundColour()
 {
     if(colSettings.backgroundClass != "")
     {
         return true;
     }

     return false;
 }

This works for the current item but what I like is if the flag is false then to check the outer container at this point programmatically. To see if a back grounds set.

Regards
Darren

Thank you for providing the example code.
I would still suggest using conditional CSS to change the inner colour if the outer colour is set.
If you want to make it more robust you can set a data attribute and use that as the condition in the CSS e.g. data-bg-set="true"

[data-bg-set="true" ]  .myText {
color:  #ff000;
}

Sorry I may not be explaining it very well.

We need to add a an extra wrapper to each of the col if the outer (Parent) has a back color set. That then adds the correct positioning for the text.

I done this my adding code in to the block renderer that checks if the back color of the childs set and this works.

But I like to be able to check the row that each of the cols been rended in to see if that got a background color.

So I need to go back up the tree from area.cshtml to what areas.cshtml and know what called the area.cshtml from areas.cshtml.

Thouse this is a CSS issues at hart it also a settings issue on the block, I feel it needs to be addressed in area and areas .cshtml files and not in the CSS it self.

So again my Question is how can I see the parent block from the child block.

This code may show what I am trying to do, this works for current item in area.cshtml.

async void  Normal(){
    /*
    * Original render method. 
    */
    if(hasBackGroundColour) {
         <!--Padding Added-->
        <div class="RteTextFixPadding">
            @await Html.GetBlockGridItemsHtmlAsync(Model)
        </div>
    } else {
         <!--No Padding Added-->
         @await Html.GetBlockGridItemsHtmlAsync(Model)
    }

Thanks
Darren

So I need to do this programmatically and not in CSS.

The site is also very close to launch with all the content in, we can’t just start rebuilding pages using new templates.

OK now I get it, you need to add a container based on whether the background colour is set.
I presume you need a container with padding etc when you add the background colour so the text doesn’t touch the edge or something similar.

Quick fix I have used many times is to create a variable that is set in the partial you check for the setting, then use viewdata to pass it to an if/else in the template.

Any chance you can post a example please so I can see how it works in Umbraco 13.

this is not been called by a controller per say it part of the inbuilt umbraco 13 functionality.

In which partial are you setting the background color?

Areas.cshtml, where I set the background colour.

I need to pass it to area.cshtml at this point.

So I usually do something like this:

var backgroundColour = hasSettings ? Model.Settings.Value<ColorPickerValueConverter.PickedColor>("layoutSettingsColourPicker") : null;

which you could then pass to other partials using viewdata:

ViewData["backgroundColour"] = backgroundColour;

I hope that helps.

Thank you that work a treat. Did exactly what I wanted thank you for your help.

My pleasure.
Please feel free to install UmBootstrap for lots of examples of manipulating Block Grid / List.

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.