Problem with grid scrolling in presence of additional controls

4 posts, 0 answers
  1. Mooka
    Mooka avatar
    16 posts
    Member since:
    Aug 2006

    Posted 22 Feb 2011 Link to this post


    Been struggling for some time, have tried support, but not getting a clear answer for what I think is a pretty common scenario. The typical response I get is that at least one element needs to have a fixed height in order to use 100% hieght.

    Just looking to make a UI that scales with the browser using Telerik controls. Things work ok with individual controls, things work fine, if you combine controls, then things go bad.

    So here is the basic example to start where there is a splitter, tool bar, grid, tab strip and multipage.

    Having just a splitter with grids with 100% height works great. Then you want to add some tabs or toolbars, and now the grids cannot calculate 100% height properly (does not account for other control height).

    Any recommendations on how to use these controls to properly scale with the browser?

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="SS.Test" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <head id="Head1" runat="server">
        <title>FullWindow</title>
        <style type="text/css">
            html, body, form
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
       
            </script>
        </telerik:RadScriptBlock>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="sc1" runat="server" ScriptMode="Release">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="ram1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="grid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                        <telerik:AjaxUpdatedControl ControlID="RadGrid3" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0">
            <telerik:RadPane ID="topPane" runat="server" Scrolling="None">
                <telerik:RadToolBar ID="toolbar1" runat="server" Width="100%">
                    <Items>
                        <telerik:RadToolBarButton Text="command 1">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="command 2">
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarButton Text="command 3">
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>
                <telerik:RadGrid ID="grid1" Width="100%" Height="100%" runat="server">
                    <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true" Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true">
                    </ClientSettings>
                </telerik:RadGrid>
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="bottomPane" runat="server" Scrolling="None">
                <telerik:RadTabStrip ID="tab1" runat="server" MultiPageID="mp1">
                    <Tabs>
                        <telerik:RadTab Text="Tab 1" Selected="true">
                        </telerik:RadTab>
                        <telerik:RadTab Text="Tab 2">
                        </telerik:RadTab>
                        <telerik:RadTab Text="Tab 3">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="mp1" runat="server" SelectedIndex="0">
                    <telerik:RadPageView ID="RadPageView1" runat="server">
                        <telerik:RadGrid ID="RadGrid1" Width="100%" Height="100%" runat="server">
                            <ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true">
                            </ClientSettings>
                        </telerik:RadGrid>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView2" runat="server">
                        <telerik:RadGrid ID="RadGrid2" Width="100%" Height="100%" runat="server">
                            <ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true">
                            </ClientSettings>
                        </telerik:RadGrid>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="RadPageView3" runat="server">
                        <telerik:RadGrid ID="RadGrid3" Width="100%" Height="100%" runat="server">
                            <ClientSettings Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true">
                            </ClientSettings>
                        </telerik:RadGrid>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>

    Imports System.Data.SqlClient
      
    Public Class Test
        Inherits System.Web.UI.Page
      
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      
      
            If IsPostBack = False Then
      
                Dim dt As New DataTable
      
                dt.Columns.Add("Data")
      
                Dim row As DataRow
      
                For i = 1 To 100
      
                    row = dt.NewRow
                    row("Data") = i
                    dt.Rows.Add(row)
      
                Next
      
                grid1.DataSource = dt
                grid1.DataBind()
      
            End If
      
      
        End Sub
      
      
      
        Private Sub grid1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles grid1.SelectedIndexChanged
      
            Dim dt As New DataTable
      
            dt.Columns.Add("Data")
      
            Dim row As DataRow
      
            For i = 200 To 300
      
                row = dt.NewRow
                row("Data") = i
                dt.Rows.Add(row)
      
            Next
      
            RadGrid1.DataSource = dt
            RadGrid1.DataBind()
      
            dt = New DataTable
      
            dt.Columns.Add("Data")
      
      
      
            For i = 300 To 400
      
                row = dt.NewRow
                row("Data") = i
                dt.Rows.Add(row)
      
            Next
      
            RadGrid2.DataSource = dt
            RadGrid2.DataBind()
      
            dt = New DataTable
      
            dt.Columns.Add("Data")
      
      
            For i = 400 To 500
      
                row = dt.NewRow
                row("Data") = i
                dt.Rows.Add(row)
      
            Next
      
            RadGrid3.DataSource = dt
            RadGrid3.DataBind()
      
      
        End Sub
      
    End Class


  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 Feb 2011 Link to this post

    Hi John,

    Our system indicates, that you have opened a support ticket on the same matter. To avoid duplicate posts, I will ask you to continue the communication there.

    Kind regards,
    Iana
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mooka
    Mooka avatar
    16 posts
    Member since:
    Aug 2006

    Posted 23 Feb 2011 Link to this post

    Was looking for some community advice / help here, but I will paste this in the support ticket as well.
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 25 Feb 2011 Link to this post

    Hi Mooka,

    Please, refer to the support ticket post for additional information.

    Regards,
    Iana
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top