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 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>

Answer 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

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

2 个答案: