[Solved] Grid becomes garbled when canceling out edit form

[Eric R]

If I make my page render larger by holding down ctrl and scrolling the mouse wheel (to make IE7 font size larger - browser must first be maximized so a scroll bar appears horizonatlly), it causes my grid to garble its contents after I have clicked add or edit to bring up the form and then hit cancel. I have to navigate away from the page and come back, and the grids contents are reset in their cells as normal.

Here is what it looks like:
Garbled RadGrid after hitting cancel from edit/add form

My code block on my ascx page:

	<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ManageRoles.ascx.vb"
	Inherits="Manager_Controls_ManageRoles" %>
	<%@ Import Namespace="Engine.Components.Common" %>
	<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
	<td>
	<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
	<td colspan="2">
	<asp:Label ID="lblError" runat="server" Visible="false" EnableViewState="false" CssClass="red"><br /></asp:Label>
	</td>
	</tr>
	<tr>
	<td colspan="2">
	<telerik:RadGrid ID="rgRoles" Skin="Office2007" GridLines="None" runat="server" AutoGenerateColumns="False"
	Width="99%" AllowSorting="True" SortingSettings-SortedAscToolTip="/Manager/images/arrw_up.gif"
	SortingSettings-SortedDescToolTip="/Manager/images/arrw_d.gif">
	<MasterTableView DataKeyNames="RoleName" Width="100%" CommandItemDisplay="Top" AllowPaging="True"
	PageSize="<%# Config.AdminGridPageSize() %>" AllowMultiColumnSorting="True">
	<Columns>
	<telerik:GridTemplateColumn UniqueName="TemplateColumn">
	<ItemTemplate>
	&nbsp;
	<asp:LinkButton ID="imgBtnEdit" runat="server" CommandName="Edit" Text="Edit" ForeColor="#044A7E"
	CausesValidation="false" Visible='<%# DelButShow(DataBinder.Eval(Container.DataItem, "RoleName")) %>' />
	</ItemTemplate>
	<HeaderStyle Width="7%" />
	</telerik:GridTemplateColumn>
	<telerik:GridBoundColumn HeaderText="Role" UniqueName="RoleName" DataField="RoleName">
	<HeaderStyle HorizontalAlign="Left" Width="84%" />
	</telerik:GridBoundColumn>
	<telerik:GridTemplateColumn UniqueName="TemplateColumn1">
	<ItemTemplate>
	&nbsp;
	<asp:LinkButton ID="imgBtnDelete" runat="server" CommandName="Delete" ForeColor="#044A7E"
	Text="Delete" CausesValidation="false" Visible='<%# DelButShow(DataBinder.Eval(Container.DataItem, "RoleName")) %>'
	OnClientClick="javascript:if(!confirm('This action will delete the selected role. Are you sure?')){return false;}"></asp:LinkButton>
	</ItemTemplate>
	<HeaderStyle Width="8%" />
	</telerik:GridTemplateColumn>
	</Columns>
	<EditFormSettings UserControlName="/Manager/Controls/RolesAddEdit.ascx" EditFormType="WebUserControl">
	<EditColumn UniqueName="EditCommandColumn1">
	</EditColumn>
	</EditFormSettings>
	<CommandItemTemplate>
	<asp:LinkButton ID="lnkAddRole" runat="server" Text="Add New Role" ForeColor="#E8750F"
	CommandName="InitInsert" Visible='<%# Not rgRoles.MasterTableView.IsItemInserted %>'
	CausesValidation="false"></asp:LinkButton>
	</CommandItemTemplate>
	<ExpandCollapseColumn Visible="False">
	<HeaderStyle Width="19px" />
	</ExpandCollapseColumn>
	<RowIndicatorColumn Visible="False">
	<HeaderStyle Width="20px" />
	</RowIndicatorColumn>
	</MasterTableView>
	<SortingSettings SortedAscToolTip="/Manager/images/arrw_up.gif" SortedDescToolTip="/Manager/images/arrw_d.gif" />
	</telerik:RadGrid>
	</td>
	</tr>
	</table>
	<asp:Label ID="lblDelError" runat="server" ForeColor="Red" Text="The Administrator/Case Administrator role can not be deleted"
	Visible="False"></asp:Label>
	<telerik:RadAjaxManager ID="RadAjaxManager145" runat="server">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="rgRoles">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="lblError" />
	<telerik:AjaxUpdatedControl ControlID="rgRoles" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	<telerik:AjaxSetting AjaxControlID="RadAjaxManager145">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="lblError" />
	<telerik:AjaxUpdatedControl ControlID="rgRoles" />
	<telerik:AjaxUpdatedControl ControlID="lblDelError" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	</td>
	</tr>
	</table>

[Eric R]

I forgot the important environment information in which I am developing this page:

ASP.NET 2.0

XP 

 IE 7.0.5730.11

Version=2008.2.826.20

 C#

[Sebastian]

Hi Eric,

I tried to reproduce the issue you depicted on the following online demo of our web grid:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/usercontroleditform/defaultcs.aspx

but unfortunately to no avail. The answers to the following questions can help us trace the reason for the abnormality to address it accordingly:

• Can you please check whether the abnormality appears on your machine when using the zooming feature under IE 7? If so, can you please outline the steps which can be followed the replicate it?
• Does using plain MS GridView with link buttons and styled in the same manner produces the same unwanted discrepancies?

We will gladly cooperate with you in finding an accurate resolution. I also suggest you migrate to the latest release 2008.3.1314 of RadControls for ASP.NET AJAX.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Eric R]

Sebastian,

Thanks for your response. I did indeed get your online demo of the radgrid to garble just as what I see in my application.

Here's what I did.

1. I went to: http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/usercontroleditform/defaultcs.aspx
2. In IE7 I held down the ctrl + scroll up on the mouse wheel, to get the grid to cause a scrolling horizontal bar.
3. I clicked on an add a new record then I hit cancel, I repeated this step twice.
4. The text became garbled as you can see in this screenshot.
Telerik RadGrid Demo also becomes garbled

It seems as though the radgrid will eventually fix itself on Teleriks demo, so what I have found is that this issue is not related to my environment, but due to how Teleriks grid handles oversized fonts in an environment that a user has modified their IE7 so that they have a very large font. Not a biggie, as I assume this situation to be minimal in impact in my application. I just wanted to make sure I was not forgetting some sort of formatting.

Thank you for your help.

-Eric

[Sebastian]

Hi Eric,

Indeed I was able to reproduce the discrepancy following the steps from your response. I suspect that the glitch is due to the enlarged/minimized fonts handling by our web grid (you will probably get the same effect with standard MS GridView as well) when using the IE 7 zooming feature.

I will forward your report to our developers to consider improvement in this area (if possible) for the future versions of the control. Your Telerik points have been updated for the feedback.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.