This is a migrated thread and some comments may be shown as answers.
Grid height not working with hidden div
1 Answer 42 Views
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Jesse asked on 10 Mar 2020, 10:57 PM

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.

1 Answer, 1 is accepted

Sort by
0
Silviya Stoyanova
Telerik team
answered on 12 Mar 2020, 04:27 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Grid
Asked by
Jesse
Top achievements
Rank 1
Answers by
Silviya Stoyanova
Telerik team
Share this question
or