Goodie Goodie - 17 days ago 6
ASP.NET (C#) Question

Want to reset RadGrid height when browser window is minimized or maximized

I have a

RadGrid
. I have seen events like
OnGridCreated
,
OnRowHiding
etc in ClientEvents in ClientSettings. I want a similar method like OnBrowserWindowResize so that when the user minimizes or maximizes the browser window, an event is raised and I can set my RadGrid height to some value. I tried using

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


But here inside I am not able to find my
RadGrid
. Please give me a solution

mww mww
Answer

First you have put your GridView into some div. Set property height to 100% !importantant. On JS function dynamically edit div height, try follow this sample it working for me.

Edit .css

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

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

Edit JS headerHeight value You need change and set height of your header, also do it same with 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>
Comments