First off: Hello! this my first post here, and I have an annoying issue that arises with google chrome.
here's a screenshot: http://img208.imageshack.us/img208/448/gridproblem.png
I started out using the Web Mail demo from this site for the layout. It worked nicely. Then I decided I would to like to put some common layouts and functionality into a templated usercontrol.
I put a radsplitter, 2 panes, and 2 placeholders in the usercontrol markup. I created a page with the usercontrol on it; within one of its templates I put a radgrid. Everything worked well with IE/FireFox, but the grid got squished in chrome. After searching these forums I found some javascripts which may be outdated, but I implemented them anways and the grid actually resized in chrome onload but gets squished the moment I start resizing the window.
Here's the code
usercontrol asxc
usercontrol codebehind:
aspx:
By the way: if I take the contents of the LeftPaneContentTemplate and just slap that into the aspx markup then the problem disappears, but then I can't use templated usercontrols. I do not use ajax or any updatepanels for this app (yet). As of this moment I will start moving the functionality from this usercontrol into a masterpage instead. Maybe I will have better luck there.
Any ideas ?
Edit: RadControls Version: v.2010.1.415.40
here's a screenshot: http://img208.imageshack.us/img208/448/gridproblem.png
I started out using the Web Mail demo from this site for the layout. It worked nicely. Then I decided I would to like to put some common layouts and functionality into a templated usercontrol.
I put a radsplitter, 2 panes, and 2 placeholders in the usercontrol markup. I created a page with the usercontrol on it; within one of its templates I put a radgrid. Everything worked well with IE/FireFox, but the grid got squished in chrome. After searching these forums I found some javascripts which may be outdated, but I implemented them anways and the grid actually resized in chrome onload but gets squished the moment I start resizing the window.
Here's the code
usercontrol asxc
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PanelView.ascx.cs" Inherits="PanelView" ClassName="PanelView" %> |
<%@ Register Src="HeaderBar.ascx" TagName="HeaderBar" TagPrefix="emesh" %> |
<telerik:RadScriptBlock ID="rsbChrome" runat="server" Visible="false"> |
<script type="text/javascript"> |
function Resize() { |
setTimeout(function () { |
var scrollArea = null; |
for (var i = 0; i < radGrids.length; i++) { |
var scrollArea = document.getElementById(radGrids[i] + "_GridData"); |
if (scrollArea) { |
scrollArea.style.height = document.body.offsetHeight + "px"; |
} |
if (window[radGrids[i]].ClientSettings.Scrolling.UseStaticHeaders) { |
var header = document.getElementById(radGrids[i] + "_GridHeader"); |
scrollArea.style.height = document.body.offsetHeight - header.offsetHeight + "px"; |
} |
} |
}, 200); |
} |
windowwindow.onresize = window.onload = Resize; |
</script> |
</telerik:RadScriptBlock> |
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" BorderSize="0" BorderStyle="None" PanesBorderSize="0" Height="100%" Orientation="Horizontal"> |
<telerik:RadPane ID="LeftPane" runat="server" Scrolling="None"> |
<emesh:HeaderBar runat="server" ID="LeftPaneCaption" /> |
<asp:PlaceHolder runat="server" ID="LeftPaneContent" /> |
</telerik:RadPane> |
<telerik:RadSplitBar ID="RadSplitBar1" runat="server"> |
</telerik:RadSplitBar> |
<telerik:RadPane ID="RightPane" runat="server" Scrolling="None"> |
<emesh:HeaderBar runat="server" ID="RightPaneCaption" /> |
<asp:PlaceHolder runat="server" ID="RightPaneContent" /> |
</telerik:RadPane> |
</telerik:RadSplitter> |
usercontrol codebehind:
using System; |
using System.Collections.Generic; |
using System.Linq; |
using System.Web; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using Telerik.Web.UI; |
using System.ComponentModel; |
using System.Web.Script.Serialization; |
public partial class PanelView : System.Web.UI.UserControl |
{ |
#region ContentTemplate Code |
private ITemplate leftContentTemplate = null; |
private ITemplate rightContentTemplate = null; |
public class ContentContainer : WebControl, INamingContainer { } |
[TemplateContainer(typeof(ContentContainer))] |
[PersistenceMode(PersistenceMode.InnerProperty)] |
[TemplateInstance(TemplateInstance.Single)] |
[Browsable(true)] |
[Category("Behavior")] |
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] |
public ITemplate LeftPaneContentTemplate |
{ |
get { return leftContentTemplate; } |
set { leftContentTemplate = value; } |
} |
[TemplateContainer(typeof(ContentContainer))] |
[PersistenceMode(PersistenceMode.InnerProperty)] |
[TemplateInstance(TemplateInstance.Single)] |
[Browsable(true)] |
[Category("Behavior")] |
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)] |
public ITemplate RightPaneContentTemplate |
{ |
get { return rightContentTemplate; } |
set { rightContentTemplate = value; } |
} |
protected override void OnInit(EventArgs e) |
{ |
base.OnInit(e); |
if (LeftPaneContentTemplate != null) |
{ |
// Instantiate and initialize the content container class |
ContentContainer containerLeft = new ContentContainer(); |
LeftPaneContentTemplate.InstantiateIn(containerLeft); |
// Add the content template to the placeholder so that we can see the user content |
LeftPaneContent.Controls.Add(containerLeft); |
} |
else |
{ |
LeftPaneVisible = false; |
} |
if (RightPaneContentTemplate != null) |
{ |
// Instantiate and initialize the content container class |
ContentContainer containerRight = new ContentContainer(); |
RightPaneContentTemplate.InstantiateIn(containerRight); |
// Add the content template to the placeholder so that we can see the user content |
RightPaneContent.Controls.Add(containerRight); |
} |
else |
{ |
RightPaneVisible = false; |
} |
} |
#endregion |
#region Properties |
public bool LeftPaneVisible |
{ |
get{ return LeftPane.Visible; } |
set{ LeftPane.Visible = value;} |
} |
public bool RightPaneVisible |
{ |
get { return RightPane.Visible; } |
set { RightPane.Visible = value; } |
} |
public string LeftPaneTitle |
{ |
get { return LeftPaneCaption.Text; } |
set { LeftPaneCaption.Text = value; } |
} |
public string RightPaneTitle |
{ |
get { return RightPaneCaption.Text; } |
set { RightPaneCaption.Text = value; } |
} |
public Orientation CurrentOrientation |
{ |
get { return RadSplitter1.Orientation; } |
set { RadSplitter1.Orientation = value; } |
} |
public bool ChromeCompatibilityMode |
{ |
get; |
set; |
} |
#endregion |
protected override void OnPreRender(EventArgs e) |
{ |
base.OnPreRender(e); |
if (!LeftPaneVisible || !RightPaneVisible) |
{ |
RadSplitBar1.Visible = false; |
} |
if (ChromeCompatibilityMode) |
{ |
rsbChrome.Visible = true; |
List<string> IDs = new List<string>(); |
FillWithGridIDs(IDs, Page.Controls); |
JavaScriptSerializer js = new JavaScriptSerializer(); |
ScriptManager.RegisterArrayDeclaration(Page, "radGrids", js.Serialize(IDs)); |
} |
} |
protected void Page_Load(object sender, EventArgs e) |
{ |
} |
private void FillWithGridIDs(List<string> gridIDs, ControlCollection controls) |
{ |
foreach (Control ctrl in controls) |
{ |
if (ctrl is RadGrid) |
{ |
gridIDs.Add(ctrl.ClientID); |
} |
FillWithGridIDs(gridIDs, ctrl.Controls); |
} |
} |
} |
aspx:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/EMeshMaster.master" AutoEventWireup="true" CodeFile="Roles.aspx.cs" Inherits="Roles" %> |
<%@ Register src="UserControls/HeaderBar.ascx" tagname="HeaderBar" tagprefix="uc1" %> |
<%@ Register src="UserControls/PanelView.ascx" tagname="PanelView" tagprefix="emesh" %> |
<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" Runat="Server"> |
</asp:Content> |
<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" Runat="Server"> |
<asp:ObjectDataSource ID="dsRoles" runat="server" TypeName="DbHelpers" SelectMethod="GetRoles"></asp:ObjectDataSource> |
<emesh:PanelView runat="server" ChromeCompatibilityMode="true"> |
<LeftPaneContentTemplate> |
<telerik:RadToolBar ID="tlbRoles" runat="server" Width="100%" onbuttonclick="tlbRoles_ButtonClick"> |
<Items> |
<telerik:RadToolBarButton Value="tbWrapper"> |
<ItemTemplate> |
<table cellpadding="2" cellspacing="0"> |
<tr> |
<td> |
<span>New Role</span> |
</td> |
<td> |
<telerik:RadTextBox runat="server" ID="tbRole"> |
</telerik:RadTextBox> |
</td> |
</tr> |
</table> |
</ItemTemplate> |
</telerik:RadToolBarButton> |
<telerik:RadToolBarButton Text="Create" Value="new"></telerik:RadToolBarButton> |
<telerik:RadToolBarButton IsSeparator="true"></telerik:RadToolBarButton> |
<telerik:RadToolBarButton Text="Delete Role" Value="delete"></telerik:RadToolBarButton> |
</Items> |
</telerik:RadToolBar> |
<telerik:RadGrid ID="existingRoles" runat="server" AllowSorting="True" AutoGenerateColumns="False" GridLines="None" Height="100%" Width="100%" DataSourceID="dsRoles" ShowHeader="True"> |
<ClientSettings> |
<Selecting AllowRowSelect="True" /> |
<Scrolling AllowScroll="True" /> |
</ClientSettings> |
<MasterTableView> |
<RowIndicatorColumn> |
<HeaderStyle Width="20px"></HeaderStyle> |
</RowIndicatorColumn> |
<ExpandCollapseColumn> |
<HeaderStyle Width="20px"></HeaderStyle> |
</ExpandCollapseColumn> |
<Columns> |
<telerik:GridBoundColumn HeaderText="Roles" UniqueName="RoleName" DataField="RoleName"> |
</telerik:GridBoundColumn> |
<telerik:GridBoundColumn HeaderText="Users in Role" UniqueName="UsersInRole" DataField="UsersInRole"> |
</telerik:GridBoundColumn> |
</Columns> |
</MasterTableView> |
</telerik:RadGrid> |
</LeftPaneContentTemplate> |
</emesh:PanelView> |
</asp:Content> |
By the way: if I take the contents of the LeftPaneContentTemplate and just slap that into the aspx markup then the problem disappears, but then I can't use templated usercontrols. I do not use ajax or any updatepanels for this app (yet). As of this moment I will start moving the functionality from this usercontrol into a masterpage instead. Maybe I will have better luck there.
Any ideas ?
Edit: RadControls Version: v.2010.1.415.40