This is a migrated thread and some comments may be shown as answers.

Problem with grid scrolling in presence of additional controls

3 Answers 53 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mooka asked on 22 Feb 2011, 07:11 PM

2-22-2011-12-09-02-PM.png

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem with grid scrolling in presence of additional controls

3 Answers, 1 is accepted