Hi Tove,

You can render your markup with Grid by this manner.

@CurrentPage.GetGridHtml("propertyAlias", "bootstrap2")

Here bootstrap2 is a partial view. You can give your partial view path with your markup. You can find bootstrap2 in new instance of Umbraco on below path.

Settings -> Partial Views -> Grid -> bootstrap2.cshtml

Hopefully it helps you.

Regards,

Urvish Mandaliya

Thanks so much for replying, Urvish, however I think your suggestion would render a complete grid.

What I am looking for is a way to have rull controll over a grid cell so that it renders both the value a user types in (like a textstring) and the surrounding html.

I think the instructions on how to build customized editors is more what I am looking for. https://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/grid-layout

However, this approach means so much work and being new to .net/umbraco I actually wonder if there isn´t an easier way? I will go ahead and follow the step by step instructions given on the website above, but if someone has suggestions on how to achieve full control over grid cell layout/markup, please let me know.

Best regards /Tove

Tove,

You can have full control over the Grid cells. Find below steps.

1) call partial view with GridProperty value

@CurrentPage.GetGridHtml("propertyAlias", "bootstrap2")

2) In the partial View

@functions {
    public static MvcHtmlString RenderElementAttributes(dynamic contentItem)
    {
        var attrs = new List<string>();
        JObject cfg = contentItem.config;

        if(cfg != null)
            foreach (JProperty property in cfg.Properties()) {
                attrs.Add(property.Name + "=\"" + property.Value.ToString() + "\"");
            }

        JObject style = contentItem.styles;

        if (style != null) { 
        var cssVals = new List<string>();
        foreach (JProperty property in style.Properties())
            cssVals.Add(property.Name + ":" + property.Value.ToString() + ";");

        if (cssVals.Any())
            attrs.Add("style=\"" + string.Join(" ", cssVals) + "\"");
        }

        return new MvcHtmlString(string.Join(" ", attrs));
    }
}

Calling method :

@helper renderRow(dynamic row, bool singleColumn){
    <div @RenderElementAttributes(row)>
        @Umbraco.If(singleColumn, "<div class='container'>")
        <div class="row clearfix">
            @foreach ( var area in row.areas ) {
            <div class="[email protected] column">
                <div @RenderElementAttributes(area)>
                    @foreach (var control in area.controls) {
                        if (control !=null && control.editor != null && control.editor.view != null ) {
                            <text>@Html.Partial("grid/editors/base", (object)control)</text>
                        }
                    }
                </div>
            </div>}
        </div>
        @Umbraco.If(singleColumn, "</div>")
    </div>
}

Get Each row :

foreach (var section in Model.sections) {
                <div class="grid-section">
                    @foreach (var row in section.rows) {
                        @renderRow(row, true);
                    }
                </div>
            }   

Here in this row you can check that whether it is Textbox or not and you can set logic and html according to that.

You need to do some tweaks in that Bootstrap partial view.

Regards,

Urvish Mandaliya

Hi Urvish, thanks a bunch for answering again.

As being new to .net and Umbraco I would really appreciate an example of how I could set the logic here:

foreach (var section in Model.sections){ 
<div class="grid-section"> 
@foreach (var row in section.rows) {
@renderRow(row, true); 
} 
</div>
}

Would this be the right approach if I want to make a grid cell like in the example here: https://our.umbraco.org/media/upload/a48b5f31-0acb-495e-9737-d47ed976884d/showumbracoproblem.png

My concern is for example the content to the top left where I want the user to type a headline like "About us", and that this then will be rendered with the black stripe behind. Is that possible with your method or should I rather continue to develop customized editors?

Hoping my question makes sense. Best regards Tove

Hi Tove,

Not able to see that image.

Can you please put it here or check the path?

Regards,

Urvish Mandaliya

Hi

sorry - here it is:

Tove,

For this purpose "About Us" you can do that withing the content page.

You can give background image to this cell.

Also you can give styling to this cell as well from the Data Type where you have created Grid.

Regards,

Urvish Mandaliya

Hi Thanks again for good suggestions.

I would not like to use background image in this case. I want the size of the black stripe to increase if the user writes a longer headline.

What I want is this, for instance:

The user gets the option in backoffice to write a good headline. ("Oh what a great headline") When rendered on screen, the headline becomes part of valid markup. Like this:

<div class="cell_container">
<div class="cell">
<div class="col-md-6 myStyle">
<div class="headine">Oh what a great headline</div>
</div>
</div>
</div>

Surely there is a way? I have seen this

{
"name": "Headline",
"alias": "headline",
"view": "textstring",
"icon": "icon-coin",
"config": 
{
"style": "font-size: 36px; line-height: 45px; font-weight: bold",
"markup": "<h1>#value#</h1>"
}
}

which is described for instance here:

Is that the way to go?

Or is Umbraco 7.x more about creating a visual experience for the users/editors and not so much about how the frontend looks?

I am pretty much lost in finding a simple approach to full control over design/markup so any guidance would make my day :-)

Thanks in advance /Tove

Hi Tove,

For this type of functionality , my suggestion would be to use Rich Text Editor instead of Headings.(Just change heading to Rich Text from Data Type)

RTE would give you more control over the Html and also the you can change Text easily. You can do whatever you want in RTE.

Try this once and check your requirement satisfied or not.

Looking forward hearing from you.

Regards,

Urvish Mandaliya

is working on a reply...