grid passing data down

Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib

May 24, 2017 @ 15:14

Hello,

I am using Umbraco 7.5.13 and I have grid setup. The markup outputted in my grid looks like:

    <div class="row clearfix" style="color: #fff;background-color:#798788;">
        <div class="col-md-12 column">
            <section class="textblock section-bg--green">
                <div class="container">
                    <div class="default-styling">
                        <h1 style="text-align: center;">This is the title</h1>
                        <h2 style="text-align: center;">And this is subtitle</h2>
                        <p style="text-align: center;">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada.</p>
                    </div>
                </div>
            </section>
        </div>
</div>

The first outer div is written in my bootstrap partial and I test for a property and if that property is set in write out inline style on my outer most div with is the row.

Further down in my grid/editors partials i write out the columns and render the editors in those columns. On those columns i also have class property which is written out. The issue i am having is my inline style on outer div cannot be seen because of the class set on my column. Is there a way to pass down from the bootstrap partial where i have row data a flag to the lower level so that in the column if row style is set then test for that flag and not write out the class on the column div.

Hope this makes sense.

Regards

Ismail

Copy Link

bob baty-barr 1180 posts 1294 karma points MVP

May 24, 2017 @ 15:27

Ismail, i have used the viewbag to set and get values "under" the main grid partial.

if (row.name == "Divider")
    {
        ViewBag.Row = "divider";
some more stuff here
}

Copy Link

Nik 1614 posts 7260 karma points MVP 7x c-trib

May 24, 2017 @ 15:45

Ismail,

Just out of interest, why the inline styles? If you used classes you might be able to set up some rules.

Something I did recently was update a dedicated CSS file for "editor configured classes" during the save and publish events. These classes could then have additional rules applied/css that allowed sub-classes to behave as they should.

(Granted, Bob's approach of using the ViewBag makes the most sense for what you've described :-) )

Nik

Copy Link

Anders Bjerner 487 posts 2990 karma points MVP 8x admin c-trib

May 24, 2017 @ 16:03

Bob's solution with a view bag is one approach (I hadn't thought of that).

Anyways, If you're using the default approach in Umbraco, you have a bunch of dynamic references, which are really instances of JObject. If you cast the model for the control to JObject, it will have a Parent property.

The parent property leads to the parent JSON structure, which as far as I remember, is the JSON array containing the JSON for the control, while Parentof the array the JSON property holding the array. The trick here is that you can traverse up the JSON structure, and if you call Parent enough times, you will eventually have a reference to the JObject of the row, and you can make the check in your code. Something like:

foreach (JObject control in area.controls) {

    // 1st parent is the array of controls in area
    // 2nd parent is the "controls" property holding the array
    // 3rd parent is the  parent area
    // 4th parent is the array of areas
    // 5th parent is the "areas" property holding the array
    // 6th parent is the parent row (YAY)

    // Oh so pretty
    JObject row = (JObject) control.Parent.Parent.Parent.Parent.Parent.Parent;

    dynamic config = row.GetValue("config");

    if (config != null && config.@class == "purple") {
        <pre>Has class "purple"</pre>
    } else {
        <pre>Doesn't have class "purple"</pre>
    }

}

This is a bit more complex, so Bob's solution might be the best choice ;)

Another approach is to use our Skybrud.Umbraco.GridData package, which provides a strongly typed model for the grid.

If you use our package, you will have a GridRow instance for the row, and a GridControl instance for the control. The control instance will have an Area property referencing the parent grid area, which again will have a Row property referencing the parent grid row:

This means that your code could look like this instead:

GridDataModel grid = Model.Content.GetGridModel("content");

foreach (GridSection section in grid.Sections) {
    foreach (GridRow row in section.Rows) {
        foreach (GridArea area in row.Areas) {
            foreach (GridControl control in area.Controls) {
                if (control.Area.Row.Config["class"] == "purple") {
                    <pre>Has class "purple"</pre>
                } else {
                    <pre>Doesn't have class "purple"</pre>
                }
            }
        }
    }
}

And you'd like, you can of course separate parts of that into partial views - eg.:

@Html.Partial("TypedGrid/Controls/Default", control)

and

@inherits UmbracoViewPage<Skybrud.Umbraco.GridData.GridControl>

@if (Model.Area.Row.Config["class"] == "purple") {
    <pre>Has class "purple"</pre>
} else {
    <pre>Doesn't have class "purple"</pre>
}

Copy Link

is working on a reply...

Flag this post as spam?

Grid passing data down