Grid height not working with hidden div

2 posts, 0 answers
  1. Jesse
    Jesse avatar
    10 posts
    Member since:
    Aug 2018

    Posted 10 Mar 2020 Link to this post

    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.

  2. Silviya Stoyanova
    Admin
    Silviya Stoyanova avatar
    66 posts

    Posted 12 Mar 2020 Link to this post

    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.
Back to Top