【ASPxRoundPanel】 实现 100% Height 效果

注意事项

对于 ASPxRoundPanel，实现 100% Width 非常简单，只要设置 Width 属性为 100% 就可以了，但是 100% Height 就不能通过设置一个属性来实现了，目前只能通过 JavaScript 来辅助实现。

 

实现方法

<script type="text/javascript">
    function CorrectRoundPanelHeight(roundPanel) {
        var mainElement = roundPanel.GetMainElement();
        var offsetParent = _aspxFindOffsetParent(mainElement);
        var offsetParentClearClientHeight = _aspxGetClearClientHeight(offsetParent);
        var contentCell = roundPanel.GetContentElement();
        var innerTable = _aspxGetChildByTagName(mainElement, "TABLE", 0);
        var height = contentCell.offsetHeight;
        _aspxSetOffsetHeight(contentCell, 0);
        while (innerTable.offsetHeight < offsetParentClearClientHeight)
            _aspxSetOffsetHeight(contentCell, ++height);
    }
</script>

<div id="Container" style="border: 5px solid black; width: 470px; height: 470px; padding: 10px;">
    <dxrp:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" Width="100%" Height="400px" ClientInstanceName="MyPanel">
        <ClientSideEvents Init="function(s, e) { CorrectRoundPanelHeight(s); }" />
        <PanelCollection>
            <dxp:PanelContent runat="server">
                Panel Content
            </dxp:PanelContent>
        </PanelCollection>
    </dxrp:ASPxRoundPanel>
</div>

 由于使用到了很多内部的 JavaScript 函数，所以代码就不做解析了，期待将来也能够像 Width 一样通过设置属性来实现。