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

Question

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

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

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

Answer 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 你需要改变和设置你的页眉的高度，也做同样的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>

Answer 2

我建议你在RadSplitter中包装网格，它支持onclientresize的客户端事件:

    <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