Multiple RadGrids inside of a TabStrip Rendering Issue

[Doug]

I have a user control which has a 4-tab tab strip inside.  Each of those tabs in turn render child user controls.  In two of those child controls I have a RadGrid.  I am having a lot of rendering issues with those grids inside the child controls that I do not have elsewhere in the application (I am using the grid extensively to replace an Access application and I have the grid pretty much down and many times copy and paste one set of grid code to another with very few changes).  Some notes:

1.  I use static headers on all the grids
2.  I define each column in the grid as well as explicitly define widths
3.  I use all the resizing and re-ordering bells and whistles

The grids inside the tabstrip/multipage render horribly.  Margins are off, title columns are not aligned with data columns, reordering one column in one grid throws off the margins of the other grid in the other tab, etc.  The strange this is that it is random and intermittent.  One time I load the page everything will look fine.  Refresh the page and everything could be off.  Close the browser and reload the app, everything could be off.  Refresh the page again and it looks fine.  I am using IE6 as per our corporate standards and am binding the data using NeedDataSource with a LINQ to SQL stored procedure.  I cannot give out data details, but snippets of code showing the basic configuration is below.  I don't seem to have this problem except for when I place a grid inside a tabstrip.  Any help would be appreciated.

Thanks,
Doug

Parent Control Code:

	<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MappingTables.ascx.cs" Inherits="LEBrowser.Content.Controls.WorkPanel.MappingTables" %>
	<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
	<%@ Register src="/Content/Controls/Tabs/AddressTypes.ascx" tagname="AddressTypes" tagprefix="VZW" %>
	<%@ Register src="/Content/Controls/Tabs/ContactTypes.ascx" tagname="ContactTypes" tagprefix="VZW" %>
	<%@ Register src="/Content/Controls/Tabs/LegalEntityTypes.ascx" tagname="LegalEntityTypes" tagprefix="VZW" %>
	<%@ Register src="/Content/Controls/Tabs/PhoneFaxTypes.ascx" tagname="PhoneFaxTypes" tagprefix="VZW" %>
	<table width="100%">
	<tr>
	<td width="30%" align="left" valign="middle">
	<span class="WorkPanelTitle">
	<asp:Literal runat="server" ID="litMappingTablesTitle">
	Mapping Tables
	</asp:Literal>
	</span>
	</td>
	</tr>
	</table>
	<asp:Image ID="imgDivider" AlternateText="Work Panel Divider" ImageUrl="~/Content/Images/WorkPanelDivider.png" runat="server" />
	<telerik:RadTabStrip ID="tabMappingTables" runat="server" Width="100%"
	ShowBaseLine="True" ReorderTabsOnSelect="True" MultiPageID="mpMappingTables">
	<Tabs>
	<telerik:RadTab runat="server" Text="Address Types" Selected="true">
	</telerik:RadTab>
	<telerik:RadTab runat="server" Text="Contact Types">
	</telerik:RadTab>
	<telerik:RadTab runat="server" Text="Legal Entity Types">
	</telerik:RadTab>
	<telerik:RadTab runat="server" Text="Phone/Fax Types">
	</telerik:RadTab>
	</Tabs>
	</telerik:RadTabStrip>
	<telerik:RadMultiPage ID="mpMappingTables" runat="server" SelectedIndex="0">
	<telerik:RadPageView ID="pvAddressTypes" runat="server">
	<VZW:AddressTypes ID="vzwAddressTypes" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView ID="pvContactTypes" runat="server">
	<VZW:ContactTypes ID="vzwContactTypes" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView ID="pvLegalEntityTypes" runat="server">
	<VZW:LegalEntityTypes ID="vzwLegalEntityTypes" runat="server" />
	</telerik:RadPageView>
	<telerik:RadPageView ID="pvPhoneFaxTypes" runat="server">
	<VZW:PhoneFaxTypes ID="vzwPhoneFaxTypes" runat="server" />
	</telerik:RadPageView>
	</telerik:RadMultiPage>

Child control example (Address Type)

	<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddressTypes.ascx.cs" Inherits="LEBrowser.Content.Controls.Tabs.AddressTypes" %>
	<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
	<br />
	<div class="Center">
	<span class="WorkWindowMessage">
	<asp:Label ID="lblAddressTypesMessage" runat="server">&nbsp;</asp:Label>
	</span>
	</div>
	<div class="Grid">
	<telerik:RadGrid ID="gridAddressTypes" runat="server" GridLines="None" AllowPaging="True" AllowFilteringByColumn="True"
	AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true" OnPreRender="gridAddressTypes_PreRender"
	OnNeedDataSource="gridAddressTypes_NeedDataSource" OnUpdateCommand="gridAddressTypes_UpdateCommand"
	OnInsertCommand="gridAddressTypes_InsertCommand" OnDeleteCommand="gridAddressTypes_DeleteCommand"
	OnCancelCommand="gridAddressTypes_CancelCommand" Width="850" Height="400">
	<MasterTableView CommandItemDisplay="Top" DataKeyNames="MappingTableID">
	<CommandItemSettings AddNewRecordText="Add New Address Type" />
	<Columns>
	<telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
	<ItemStyle Width="30" />
	</telerik:GridEditCommandColumn>
	<telerik:GridButtonColumn UniqueName="DeleteColumn" Text="Delete" CommandName="Delete"
	ConfirmDialogType="RadWindow" ConfirmTitle="Confirm Address Type Delete"
	ConfirmText="Are You Sure You Want To Delete This Address Type?  This will also delete any items associated with this Address Type!">
	<ItemStyle Width="30" />
	</telerik:GridButtonColumn>
	<telerik:GridBoundColumn UniqueName="ShortDescription" HeaderText="Short Description" DataField="ShortDescription">
	<ItemStyle Width="125" />
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn UniqueName="Description" HeaderText="Description" DataField="Description">
	<ItemStyle Width="420" />
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn UniqueName="IsActive" HeaderText="Active" DataField="IsActive">
	<ItemStyle Width="98" />
	</telerik:GridBoundColumn>
	</Columns>
	<EditFormSettings UserControlName="~/Content/Controls/GridForm/AddressType.ascx" EditFormType="WebUserControl">
	<EditColumn UniqueName="EditCommandColumn1"></EditColumn>
	<FormStyle BackColor="White" />
	</EditFormSettings>
	</MasterTableView>
	<clientsettings AllowColumnsReorder="True">
	<scrolling allowscroll="True" usestaticheaders="True" />
	<Resizing AllowColumnResize="True" EnableRealTimeResize="True" />
	</clientsettings>
	</telerik:RadGrid>
	</div>

	using System;
	using System.Web.UI;
	using System.Web.UI.WebControls;
	using Telerik.Web.UI;
	using VZWTaxAPICoreLibrary.Managers;
	using VZWTaxAPICoreLibrary.Objects.Generic;
	using VZWTaxAPICoreLibrary.Objects.Security;
	namespace LEBrowser.Content.Controls.Tabs
	{
	public partial class AddressTypes : UserControl
	{
	private readonly MappingManager MappingManager = new MappingManager();
	private User SessionUser;
	protected void Page_Load(object sender, EventArgs e)
	{
	SessionUser = Global.GetSessionUser(Session.SessionID);
	}
	protected void gridAddressTypes_PreRender(object sender, EventArgs e)
	{
	if (!IsPostBack)
	{
	gridAddressTypes.MasterTableView.Items[1].Edit = true;
	gridAddressTypes.MasterTableView.Rebind();
	}
	}
	protected void gridAddressTypes_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
	{
	gridAddressTypes.DataSource = MappingManager.GetAddressTypes();
	}
	protected void gridAddressTypes_InsertCommand(object sender, GridCommandEventArgs e)
	{
	UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
	MappingTable newMappingTable = new MappingTable
	{
	ShortDescription = (userControl.FindControl("txtShortDescription") as TextBox).Text,
	Description = (userControl.FindControl("txtDescription") as TextBox).Text,
	IsActive = (userControl.FindControl("chkIsActive") as CheckBox).Checked
	};
	if (!MappingManager.CheckDuplicateAddressType(newMappingTable))
	{
	MappingManager.InsertAddressType(newMappingTable, SessionUser.UserID);
	lblAddressTypesMessage.Text = "Address Type Successfully Added!";
	}
	else
	{
	e.Canceled = true;
	lblAddressTypesMessage.Text = "An Address Type With The Same Identifier Already Exists!";
	}
	}
	protected void gridAddressTypes_UpdateCommand(object sender, GridCommandEventArgs e)
	{
	UserControl userControl = (UserControl)e.Item.FindControl(GridEditFormItem.EditFormUserControlID);
	MappingTable updateMappingTable = new MappingTable
	{
	MappingTableID =
	Convert.ToInt32((userControl.FindControl("txtAddressTypeID") as TextBox).Text),
	ShortDescription =
	(userControl.FindControl("txtShortDescription") as TextBox).Text,
	Description = (userControl.FindControl("txtDescription") as TextBox).Text,
	IsActive = (userControl.FindControl("chkIsActive") as CheckBox).Checked,
	};
	MappingManager.UpdateAddressType(updateMappingTable, SessionUser.UserID);
	lblAddressTypesMessage.Text = "Address Type Successfully Updated!";
	}
	protected void gridAddressTypes_DeleteCommand(object sender, GridCommandEventArgs e)
	{
	string sAddressTypeID = (e.Item as GridDataItem).OwnerTableView.DataKeyValues[e.Item.ItemIndex]["MappingTableID"].ToString();
	MappingManager.DeleteAddressType(Convert.ToInt32(sAddressTypeID), SessionUser.UserID);
	}
	protected void gridAddressTypes_CancelCommand(object sender, GridCommandEventArgs e)
	{
	lblAddressTypesMessage.Text = " ";
	}
	}
	}

[Georgi Krustev]

Hello Doug,

I carefully examined your code snippet and I could not find something erroneous in the posted code. I will suggest you to examine this online demo which covers the required functionality. Note that every page view is loaded with Ajax request in order to avoid loading big amount of HTML mark-up code. Thus the performance is increased.

For further information you can review this online help article.

If the problem still persists I will suggest you to create a test project which reproduces the described erroneous behavior and attach it to a regular support thread.

Regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.