Grid height not working with hidden div

[Jesse]

I am attempting to use a grid inside of a hidden div that is expandable. When I load the page with the div hidden, the grid does not size completely. Am I missing something here?

 

<div class="homegroup" style="margin-bottom: 50px;">
    <button type="button" class="collapseGroup">My Worklist</button>
    <div class="dataSection" style="display: none; height: 600px;">
        <div>
            @(Html.Kendo().Grid<MIR.Models.ReportBaseSummaryModel>()
                .Name("summaryReportGrid")
                .Columns(col =>
                {
                    col.Bound(m => m.ReportKey).Title("Report Id").Width(150);
                })
                .HtmlAttributes(new { style = "height: 450px;" })
                .Sortable()
                .Resizable(r => r.Columns(true))
                .Scrollable()
                .Filterable()
                .DataSource(source => source
                    .Ajax()
                    .ServerOperation(false)
                    .Model(m => m.Id(p => p.HeaderReportKey))
                    .Read(r => r.Action("LoadReportSummary", "Lookup"))
                )
                )
        </div>
    </div>
</div>

<style>
    .homegroup {
        width: 100%;
        border: 1px solid #d3d3d3;
        border-radius: 5px;
    }

    .collapseGroup {
        width: 100%;
        max-width: 100%;
        cursor: pointer;
        border: none;
        text-align: left;
        outline: none;
        padding-left: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
        height: 50px;
        background-color: #f2f2f2;
    }

    .collapseGroup:after {
        content: '\002B';
        font-weight: bold;
        float: left;
        margin-right: 10px;
    }

    .active:after {
        content: "\2212";
    }

    .dataSection {
        margin: 15px;
    }
</style>


<script>

    var coll = document.getElementsByClassName("collapseGroup");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
</script>

 

Attached are two images:

Example1: I hid the div by making the display: none; and then expand. The entire height of the grid is not rendered.

Example2: I show the div by making the display: block; and the entire height is rendered properly.

[Silviya Stoyanova]

Hello Jesse,

Thank you for the images.

Because the Grid is initialized in a hidden container, javascript cannot calculate the necessary space for the element properly. That is why I would suggest calling the resize() method after the container is present.

var coll = document.getElementsByClassName("collapseGroup");
    		var i;
 
    	for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
               $("#grid").data("kendoGrid").resize();
            }
        });
    }

I hope this helps.

 

Kind Regards, Silviya Stoyanova Progress Telerik