想要在浏览器窗口最小化或最大化时重置 RadGrid 高度答案

【问题标题】：Want to reset RadGrid height when browser window is minimized or maximized想要在浏览器窗口最小化或最大化时重置 RadGrid 高度
【发布时间】：2017-03-29 08:55:13
【问题描述】：

我有一个RadGrid。我在 ClientSettings 的 ClientEvents 中看到了诸如 OnGridCreated、OnRowHiding 等事件。我想要一个类似 OnBrowserWindowResize 的方法，这样当用户最小化或最大化浏览器窗口时，会引发一个事件，我可以将我的 RadGrid 高度设置为某个值。我尝试使用

$(window).resize(function(){..}

但是在里面我找不到我的RadGrid。请给我一个解决方案

【问题讨论】：

标签： javascript asp.net c#-4.0 telerik

【解决方案1】：

首先，您将GridView 放入某个 div。将属性高度设置为100% !importantant。在 JS 函数上动态编辑 div 高度，尝试按照这个示例对我有用。

编辑 .css

<style>
  /*Set height 100% !important*/
.grid_style {
    height: 100% !important;
    width: 100% !important;
}

编辑 .aspx

<div class="grid_conteiner" id="grid_conteiner" style="height: 500px;">
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" GridLines="None" CssClass="grid_style">


</telerik:RadGrid>

编辑 JS headerHeight 值您需要更改和设置页眉的高度，也可以使用 footerHeight。

<script type="text/javascript">
    function getWindowHeight() {
        var functionReturn = 0;

        if ((document.documentElement) && (document.documentElement.clientHeight))
            functionReturn = document.documentElement.clientHeight;
        else if ((document.body) && (document.body.clientHeight))
            functionReturn = document.body.clientHeight;
        else if ((document.body) && (document.body.offsetHeight))
            functionReturn = document.body.offsetHeight;
        else if (window.innerHeight)
            functionReturn = window.innerHeight - 18;

        functionReturn = parseInt(functionReturn);
        if ((isNaN(functionReturn) === true) || (functionReturn < 0))
            functionReturn = 0;

        return functionReturn;
    };


    window.onresize = function(event) {
        var gridC = document.getElementById("grid_conteiner");

        if (gridC != null) {
            //Here set in px height of header
            var headerHeight = 120;
            //Here set in px height of your fooer
            var footerHeight = 80;
            //Here is getting window height
            var winHeight = getWindowHeight();
            //Here is set dynamically height to conteiner
            document.getElementById('grid_conteiner')
                .setAttribute("style", "height:" + (winHeight - headerHeight - footerHeight) + "px");
        }

    };
</script>

【讨论】：

【解决方案2】：

我建议您将网格包装在 RadSplitter 中，它支持 OnClientResized 客户端事件：

    <div id="mainDiv" style="height: 100%;" >
                <telerik:RadSplitter RenderMode="Lightweight" ID="MainSplitter" runat="server" Height="100%" Width="100%"
                    Orientation="Horizontal" OnClientResized="ClientResized">

<telerik:RadPane ID="Radpane1" runat="server" MinWidth="400" Scrolling="None">
                    <asp:Panel ID="Panel1" runat="server" Visible="True" Height="100%">
                    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowCustomPaging="True"
                        PageSize="25" Width="100%" Height="100%"....

您可以在 Telerik 网站上查看示例：http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandsplitterresizing/defaultcs.aspx?product=splitter

【讨论】：