Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ismail Mayat 4511 posts 10090 karma points MVP 2x admin c-trib
    May 24, 2017 @ 15:14
    Ismail Mayat
    0

    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

  • bob baty-barr 1180 posts 1294 karma points MVP
    May 24, 2017 @ 15:27
    bob baty-barr
    100

    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
    }
    
  • Nik 1591 posts 7148 karma points MVP 6x c-trib
    May 24, 2017 @ 15:45
    Nik
    1

    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

  • Anders Bjerner 487 posts 2989 karma points MVP 7x admin c-trib
    May 24, 2017 @ 16:03
    Anders Bjerner
    2

    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>
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft