UI Make Grid Fullsize

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article:

Not full sized:

Full-sized:

---

Credits for the hard work to this Wiki article goes to zKarp and this Issue https://github.com/volkanceylan/Serenity/issues/3391.

Based on the version of zKarp, I have made a more Serenity Framework integrated version.

For this, do the following:

(1) Create a new less file: e.g. site.myProject.less and insert the following content:

    #GridDiv.fullscreen {
        z-index: 1100;
        width: 100%;
        height:100vh;
        min-height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }

(2) Import this new less file within site.less like this:

@import "site.myProject.less";

(3) Create a new Helper Typescript file called GridHelpers.ts under /Common/Helpers/ and insert the following:

namespace <yourProject>.GridHelper {
    export function EnableFullSizeGrid() {
        $('#GridDiv .grid-title .title-text').append('<a href="#" id="panel-fullscreen" class="pull-right" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a>');
        $('#panel-fullscreen').click(function (e) {
            $('#GridDiv').toggleClass('fullscreen');
            Q.initFullHeightGridPage($('#GridDiv'));
        });
    }
}

(4) Within xyzGrid.ts, insert the following:

    // *** Enable Full size grid resize ***
    <yourProject>.GridHelper.EnableFullSizeGrid();

In order to make sure that your dialogs will be displayed in front of the full sized grid, you have to add a Z-Index greater than 1100 to your dialogs - like this (you do that in your site.less file or in the *.less file where you have moved the css for your dialogs):

.s-TACMasterLayouts-TacMasterLayoutsDialog {
    > .size { width: 1200px; }
    .caption { width: 300px; }
    z-index: 1200;
}

With that, you can enable this feature on any grid you want and you don't have to write the full javascript code every time.