Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Bilal Haidar 144 posts 410 karma points
    Dec 27, 2016 @ 19:47
    Bilal Haidar
    0

    Configure Grid with 2 layouts: Container and Container Fluid

    Hi,

    Is it possible to give the editor the option to choose between using the:

    1. Bootstrap 3 Container
    2. Bootstrap 3 Container Fluid

    In other words, can I have 2 different layouts on the same grid configuration such that one uses normal Container and the other uses Container Fluid (Full Width)?

    Thanks /Bilal

    Copy Link
  • Søren Kottal 530 posts 3521 karma points MVP 2x c-trib
    Dec 27, 2016 @ 20:16
    Søren Kottal
    100

    Yes, you can build your grid rendering any way you want.

    Dig into the view in /views/partials/grid/bootstrap3.cshtml to see how it's built.

    Copy Link
  • Bilal Haidar 144 posts 410 karma points
    Dec 27, 2016 @ 20:31
    Bilal Haidar
    0

    Thanks. But will I be able to allow editor to choose whether to use this or that?

    As you know its already available in Bootstrap 3, but from what I saw, in the Template, you just ask the Grid to render using either Container or Container Fluid. So, how can this parametrized so that Editors can choose this or that way of rendering.

    Thanks /Bilal

    Copy Link
  • Anthony Powell 7 posts 40 karma points
    Mar 23, 2021 @ 02:47
    Anthony Powell
    0

    Hi,

    The answer is yes.

    You'll see in the code that the grid editor is looping through the rows.

    ~/Views/Partials/Grid/*.cshtml

    If you query the row.name. You'll notice it is the alias you used in the grid editor settings in the back office. Use that name to determine in the grid rendering whether to use container or container-fluid.

    Modify the renderRow helper to something like...

    @helper renderRow(dynamic row, bool singleColumn, bool IsFluid)
{
    <div @RenderElementAttributes(row)>
        @if (singleColumn)
    {
        if (IsFluid)
        {
            @:<div class="container-fluid">
        }
        else
        {
            @:<div class="container">
        }

    }

        ...

       @if (singleColumn)
       {
           @:</div>
       }

    Then when looping through the rows do something like this...

    <div class="grid-section">
   <div class="[email protected] column">
        @foreach (var row in s.rows)
          {
               @renderRow(row, false, row.name == "yourAlias")
           }
   </div>

    I know this is an old post. But I hate leaving things kinda unanswered.

    Copy Link
  • hypnos97 2 posts 73 karma points
    Mar 23, 2021 @ 08:46
    hypnos97
    0

    I also encountered this

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies