Question

我最近开始研究一个新项目，这一次，我开始使用干净的INSPINIA v2.7 theme。我使用了该主题的空页面模板，并开始构建一个简单的搜索页面，其中包含一些过滤器和一个正常运行的Kendo Grid。

现在，这个网站将发布到两个屏幕方向：景观1920 x 1080和肖像1600 x 2560.我需要使剑道网格相应地表现。我自己谷歌阅读本指南：Resize and Expand the Kendo UI Grid to 100% Height。我看到第一个案例就是我需要的。但是那里有一个非常简单的容器层次结构，并且该演示非常有效。

在基于bootstrap的网站中，层次结构并不那么简单。

这是_Layout.cshtml：

@using DA.Services.IBS.Web.FinancePortalFull.Helpers

<!DOCTYPE html>

<html prefix="og: http://ogp.me/ns#">
    <head>
        <title>@ViewBag.Title | Finance System</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

        <!-- Add local styles, mostly for plugins css file -->
        @if (IsSectionDefined("Styles"))
        {
            @RenderSection("Styles", required: false)
        }

        <!-- Add jQuery Style direct - used for jQGrid plugin -->
        <link href="@Url.Content("~/Scripts/plugins/jquery-ui/jquery-ui.min.css")" rel="stylesheet" type="text/css" />

        <!-- Primary Inspinia style -->
        @Styles.Render("~/Content/css")
        @Styles.Render("~/font-awesome/css")
    </head>

    <body class="md-skin">
        <!-- Wrapper-->
        <!-- PageClass give you ability to specify custom style for specific view based on action -->
        <div id="wrapper" class="@Html.PageClass()">

            <!-- Navigation -->
            @Html.Partial("_Navigation")

            <!-- Page wraper -->
            <div id="page-wrapper" class="gray-bg @ViewBag.SpecialClass">

                <!-- Top Navbar -->
                @Html.Partial("_TopNavbar")

                <!-- Main view  -->
                @RenderBody()

                <!-- Footer -->
                @Html.Partial("_Footer")

            </div>
            <!-- End page wrapper-->
        </div>
        <!-- End wrapper-->

        <!-- Section for main scripts render -->
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/kendo")
        @Scripts.Render("~/plugins/slimScroll")
        @Scripts.Render("~/bundles/inspinia")

        <!-- Handler for local scripts -->
        @RenderSection("scripts", required: false)
    </body>

</html>

以下是View本身。我试图通过在不同级别添加父div来遵循剑道链接上的指南，但div和网格内部根本不会呈现100％。

@model DA.Services.IBS.Web.FinancePortalFull.Models.EpayTransactionFilterViewModel

@{
    ViewBag.Title = "Filter";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>@ViewBag.Title</h2>
        <ol class="breadcrumb">...</ol>
    </div>
    <div class="col-lg-2">...</div>
</div>

<div  class="wrapper wrapper-content animated fadeInRight">
    <form method="post" action="@Url.Action("FilterReport", "EpayReconcile")">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-4">...</div>
                <div class="col-sm-4">...</div>
                <div class="col-sm-4">...</div>
            </div>
            <div class="row">...</div>
            <div class="row">...</div>
        </div>

        <div id="parent">
            <div class="ibox">
                <div class="ibox-content m-b-sm border-bottom">
                    <div class="row">
                    <div class="col-lg-12">
                        @(Html.Kendo().Grid(Model.SearchResults).Name("GridSearchResults")...)
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@section Styles {
    @Styles.Render("~/plugins/dataPickerStyles")
    @Styles.Render("~/Content/plugins/chosen/chosenStyles")

    <style>
        html,
        body,
        #parent,
        #GridSearchResults {
            margin: 0;
            padding: 0;
            border-width: 0;
            height: 100%; /* DO NOT USE !important for setting the Grid height! */
        }

        html
        {
            overflow: hidden;
            font: 13px sans-serif;
        }
    </style>
}

@section Scripts {
    @Scripts.Render("~/plugins/dataPicker")
    @Scripts.Render("~/plugins/chosen")

    <script type="text/javascript">           
        var gridElement = $("#GridSearchResults");

        function resizeGrid() {
            gridElement.data("kendoGrid").resize();
        }

        $(window).resize(function(){
            resizeGrid();
        });
    </script>
}

另外，仅供参考，来自各个屏幕的两个屏幕截图：

我需要知道如何使网格和所需的容器和div按照视口垂直扩展
如果成功，我将尝试处理动态页面大小调整，以便显示最大数据

更新我有这个道场：http://dojo.telerik.com/@DoomerDGR8/owoSeN 它完美地保持了性能。我只需要让它适用于从_Layout.cshtml一直到我的cshtml的所有容器和面板。

更新2：

我使用网格将此样式添加到目标视图：

<style>
    #GridSearchResults {
        border-width: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    html, body {
        height:100%;
    }

    .fill {
        min-height: 100%;
        height: 100%;
    }

    html
    {
        overflow:hidden;
    }
</style>

此外，修改后的脚本，仅限网格视图：

<script type="text/javascript">
    $(document).ready(function () {
        setPageSize();
    });

    function resizeGrid() {
        var gridElement = $("#GridSearchResults");
        // console.log(gridElement);
        gridElement.data("kendoGrid").resize();
        setPageSize();
    }

    function setPageSize(){
        var grid = $("#GridSearchResults").data("kendoGrid");
        var windowHeight = $(window).height();

        //Custom Logic for pageSize
        if (windowHeight >= 1200) {
            grid.dataSource.pageSize(40);
        }
        else if (windowHeight >= 1000) {
            grid.dataSource.pageSize(35);
        }
        else if(windowHeight >= 900){
            grid.dataSource.pageSize(30);
        }
        else if(windowHeight >= 700){
            grid.dataSource.pageSize(25);
        }
        else if(windowHeight >= 400){
            grid.dataSource.pageSize(20);
        }else{
            grid.dataSource.pageSize(10);
        }
    }

    $(window).resize(function(){
        resizeGrid();
    });
</script>

我仍然没有得到调整大小效果，并且网格保持固定宽度，如早期截图所示，但JS正在工作。以下是chrome检查的内容，因为我的高度指令在不同的地方被覆盖，所以这一切都是错误的：

您会注意到我已将填充类添加到_layout.cshtml中的页面包装器中，只有当用户位于定义了.fill的目标视图时才会应用该填充类。

无济于事。

Bootstrap v3和Kendo UI网格100％高度

0 个答案: