Хотите сбросить высоту RadGrid, когда окно браузера минимизировано или максимизировано

Question

У меня есть RadGrid. Я видел такие события, как OnGridCreated, OnRowHiding и т. Д. В ClientEvents в ClientSettings. Мне нужен подобный метод, например OnBrowserWindowResize, так что, когда пользователь минимизирует или максимизирует окно браузера, возникает событие, и я могу установить высоту RadGrid на некоторое значение. Я попытался с помощью

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

Но вот внутри я не могу найти свой RadGrid. Пожалуйста, дайте мне решение

Answer 1

Сначала вы положили свой GridView в какой-нибудь div. Установите высоту свойства 100% !importantant. На JS-функции динамически изменяйте высоту div, попробуйте следовать этому образцу, который он работает для меня.

Edit .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 value Вам нужно изменить и установить высоту вашего заголовка, а также сделать то же самое с 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