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

Question

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

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

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

Answer 1

首先，您将 GridView 放入某个 div 中。将属性高度设置为100%!重要。在 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>