

Hi,
We have Customized the Windows7 Skin according to our requirement and we are facing issue that Grid Size is cannged and we face flickering issue when user hover the first row in the grid with following conditions:
Browser: IE6 Only(Internet Explorer 6) and fine with IE8 and FF
Resolution: 1024x768 or lower
Telerick Build: 2010.1.415.35
For testing purposes, i renamed Windows7 skin proved by telerick to GridSkin, interesting thing is same xcode works fine with embedded skins and have no flickering but when we use custom skin then we face destcribed UI issue.
Can you help use find the fix the issue.
Thanks
<form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%" Height="100%" BackColor="Green"> <telerik:RadPane ID="RadPane1" runat="server" Height="10%" Scrolling="None" > <asp:Button ID="btnLoad" runat="server" Text="Load" OnClick="btnLoad_Click" /> </telerik:RadPane> <telerik:RadPane ID="RadPane2" runat="server" Width="100%" Height="90%" Scrolling="None"> <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" EnableEmbeddedSkins="False" Skin="GridSkin" EnableViewState="true" PageSize="50" AllowPaging="true" AllowSorting="true" HorizontalAlign="Left" GridLines="None" Width="100%" Height="100%" AllowMultiRowSelection="true" > <HeaderContextMenu EnableEmbeddedSkins="False" Skin="Grid"> <CollapseAnimation Duration="200" Type="OutQuint" /> </HeaderContextMenu> <MasterTableView Width="100%" CanRetrieveAllData="False" CellPadding="0" EnableTheming="False" GridLines="None" GroupsDefaultExpanded="False" HorizontalAlign="Left" TableLayout="Fixed" DataKeyNames="ID" ClientDataKeyNames="ID" HeaderStyle-HorizontalAlign="Left" AllowMultiColumnSorting="false" AllowNaturalSort="true" AllowCustomSorting="false" ShowHeadersWhenNoRecords="true"> <Columns> <telerik:GridBoundColumn HeaderText="A1" UniqueName="A1" DataField="A1"> <HeaderStyle Width="100px" Wrap="false" /> <ItemStyle Width="100px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="A2" UniqueName="A2" DataField="A2"> <HeaderStyle Width="100px" Wrap="false" /> <ItemStyle Width="100px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="A3" UniqueName="A3" DataField="A3"> <HeaderStyle Width="100px" Wrap="false" /> <ItemStyle Width="100px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="B1" UniqueName="B1" DataField="B1"> <HeaderStyle Width="200px" Wrap="false" /> <ItemStyle Width="200px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="B2" UniqueName="B2" DataField="B2"> <HeaderStyle Width="200px" Wrap="false" /> <ItemStyle Width="200px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn HeaderText="B3" UniqueName="B3" DataField="B3"> <HeaderStyle Width="200px" Wrap="false" /> <ItemStyle Width="200px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" Display="false" > <HeaderStyle Width="0px" Wrap="false" /> <ItemStyle Width="0px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="C1" HeaderText="C1" UniqueName="C1" Display="False" > <HeaderStyle Width="0px" Wrap="false" /> <ItemStyle Width="0px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="C2" HeaderText="C2" UniqueName="C2" Display="False" > <HeaderStyle Width="0px" Wrap="false" /> <ItemStyle Width="0px" /> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="C3" HeaderText="C3" UniqueName="C3" Display="False" > <HeaderStyle Width="0px" Wrap="false" /> <ItemStyle Width="0px" /> </telerik:GridBoundColumn> </Columns> </MasterTableView> <ClientSettings EnablePostBackOnRowClick="false" EnableRowHoverStyle="true"> <Selecting AllowRowSelect="True" /> <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="100%" FrozenColumnsCount="1" /> <ClientEvents /> <Resizing AllowColumnResize="true" /> </ClientSettings> <SortingSettings EnableSkinSortStyles="false" /> <FilterMenu EnableEmbeddedSkins="False" Skin="Grid"> <CollapseAnimation Duration="200" Type="OutQuint" /> </FilterMenu> <PagerStyle AlwaysVisible="true" Height="25px" Width="100%" Mode="NumericPages" /> </telerik:RadGrid> </telerik:RadPane> </telerik:RadSplitter> </form> /*Telerik RadGrid Windows7 Skin*/ /*global*/ .RadGrid_GridSkin { border:1px solid #a5b3c5; background:#fcfcfc; color:#000; } .RadGrid_GridSkin, .RadGrid_GridSkin .rgMasterTable, .RadGrid_GridSkin .rgDetailTable, .RadGrid_GridSkin .rgGroupPanel table, .RadGrid_GridSkin .rgCommandRow table, .RadGrid_GridSkin .rgEditForm table, .RadGrid_GridSkin .rgPager table, .GridToolTip_GridSkin { font:12px/16px "segoe ui",arial,sans-serif; } .RadGrid_GridSkin .rgHeader:first-child, .RadGrid_GridSkin th.rgResizeCol:first-child, .RadGrid_GridSkin .rgFilterRow>td:first-child, .RadGrid_GridSkin .rgRow>td:first-child, .RadGrid_GridSkin .rgAltRow>td:first-child { border-left-width:0; padding-left:8px; } .RadGrid_GridSkin .rgAdd, .RadGrid_GridSkin .rgRefresh, .RadGrid_GridSkin .rgEdit, .RadGrid_GridSkin .rgDel, .RadGrid_GridSkin .rgFilter, .RadGrid_GridSkin .rgPagePrev, .RadGrid_GridSkin .rgPageNext, .RadGrid_GridSkin .rgPageFirst, .RadGrid_GridSkin .rgPageLast, .RadGrid_GridSkin .rgExpand, .RadGrid_GridSkin .rgCollapse, .RadGrid_GridSkin .rgSortAsc, .RadGrid_GridSkin .rgSortDesc, .RadGrid_GridSkin .rgUpdate, .RadGrid_GridSkin .rgCancel, .RadGrid_GridSkin .rgUngroup, .RadGrid_GridSkin .rgExpXLS, .RadGrid_GridSkin .rgExpDOC, .RadGrid_GridSkin .rgExpPDF, .RadGrid_GridSkin .rgExpCSV { background-image:url('Images/Grid/sprite.gif'); } /*header*/ .RadGrid_GridSkin .rgHeaderDiv { background:#f1f5fb; } .RadGrid_GridSkin .rgHeader, .RadGrid_GridSkin th.rgResizeCol { border:1px solid; border-color:#f6f9fb #fff #c2cedb #e1eaf3; border-top:0; background:#f1f5fb; } .RadGrid_GridSkin th.rgSorted { background:0 -2600px repeat-x #dde8f7 url('Images/Grid/sprite.gif'); } .RadGrid_GridSkin .rgHeader, .RadGrid_GridSkin .rgHeader a { color:#4c607a; } /*rows*/ .RadGrid_GridSkin .rgRow td, .RadGrid_GridSkin .rgAltRow td, .RadGrid_GridSkin .rgEditRow td, .RadGrid_GridSkin .rgFooter td { border-style:solid; border-width:0 1px 1px; } .RadGrid_GridSkin .rgRow { background-color:#ebeff3; } .RadGrid_GridSkin .rgRow td { border-color:#ebeff3; } .RadGrid_GridSkin .rgAltRow td { border-color:#fff; } .RadGrid_GridSkin .rgRow .rgSorted, .RadGrid_GridSkin .rgAltRow .rgSorted { background-color:#e5ecf5; border-color:#e5ecf5; } .RadGrid_GridSkin .rgSelectedRow .rgSorted, .RadGrid_GridSkin .rgActiveRow .rgSorted, .RadGrid_GridSkin .rgHoveredRow .rgSorted, .RadGrid_GridSkin .rgEditRow .rgSorted { background-color:transparent; } .RadGrid_GridSkin .rgRow a, .RadGrid_GridSkin .rgAltRow a, .RadGrid_GridSkin .rgEditRow a, .RadGrid_GridSkin .rgFooter a, .RadGrid_GridSkin .rgEditForm a { color:#1e3287; } .RadGrid_GridSkin .rgSelectedRow { background:#d7e8fe 0 -3900px repeat-x url('Images/Grid/sprite.gif'); } *+html .RadGrid_GridSkin .rgSelectedRow .rgSorted{background-color:#d7e8fe} * html .RadGrid_GridSkin .rgSelectedRow .rgSorted{background-color:#d7e8fe} .RadGrid_GridSkin .rgActiveRow, .RadGrid_GridSkin .rgHoveredRow { background:#e7eef6 0 -2900px repeat-x url('Images/Grid/sprite.gif'); } *+html .RadGrid_GridSkin .rgActiveRow .rgSorted, *+html .RadGrid_GridSkin .rgHoveredRow .rgSorted{background-color:#e7eef6} * html .RadGrid_GridSkin .rgActiveRow .rgSorted, * html .RadGrid_GridSkin .rgHoveredRow .rgSorted{background-color:#e7eef6} .RadGrid_GridSkin .rgEditRow { background:#e6f0fd 0 -4900px repeat-x url('Images/Grid/sprite.gif'); } *+html .RadGrid_GridSkin .rgEditRow .rgSorted{background-color:#e6f0fd} * html .RadGrid_GridSkin .rgEditRow .rgSorted{background-color:#e6f0fd} .RadGrid_GridSkin .rgSelectedRow td, .RadGrid_GridSkin .rgActiveRow td, .RadGrid_GridSkin .rgHoveredRow td, .RadGrid_GridSkin .rgEditRow td { border-left:0; border-right:0; padding-left:8px; padding-right:8px; } .RadGrid_GridSkin .rgSelectedRow td, .RadGrid_GridSkin .rgSelectedRow .rgSorted { border-bottom-color:#8daed5; } .RadGrid_GridSkin .rgActiveRow td, .RadGrid_GridSkin .rgActiveRow .rgSorted, .RadGrid_GridSkin .rgHoveredRow td, .RadGrid_GridSkin .rgHoveredRow .rgSorted { border-bottom-color:#a8d8eb; } .RadGrid_GridSkin .rgEditRow td, .RadGrid_GridSkin .rgEditRow .rgSorted { border-bottom-color:#8daed5; } /*footer*/ .RadGrid_GridSkin .rgFooterDiv, .RadGrid_GridSkin .rgFooter { background:#e2eaf4; } .RadGrid_GridSkin .rgFooter td { border-top-width:1px; border-color:#e2eaf4; } /*status*/ .RadGrid_GridSkin .rgPager .rgStatus { border:1px solid; border-color:#fcfcfc #c2cedb #f1f5fb #f1f5fb; border-left:0; } .RadGrid_GridSkin .rgStatus div { background-image:url('Images/Grid/loading_small.gif'); } /*pager*/ .RadGrid_GridSkin .rgPager { background:#f1f5fb 0 -5900px repeat-x url('Images/Grid/sprite.gif'); } .RadGrid_GridSkin td.rgPagerCell { border:1px solid; border-color:#fcfcfc #fff #f1f5fb; border-right:0; } .RadGrid_GridSkin .rgInfoPart { color:#5a6779; } .RadGrid_GridSkin .rgInfoPart strong { color:#1e395b; } .RadGrid_GridSkin .rgPageFirst { background-position:0 -550px; } .RadGrid_GridSkin .rgPageFirst:hover { background-position:0 -600px; } .RadGrid_GridSkin .rgPagePrev { background-position:0 -700px; } .RadGrid_GridSkin .rgPagePrev:hover { background-position:0 -750px; } .RadGrid_GridSkin .rgPageNext { background-position:0 -850px; } .RadGrid_GridSkin .rgPageNext:hover { background-position:0 -900px; } .RadGrid_GridSkin .rgPageLast { background-position:0 -1000px; } .RadGrid_GridSkin .rgPageLast:hover { background-position:0 -1050px; } .RadGrid_GridSkin .rgPager .rgPagerButton { border-color:#c2cedb; background:#dde8f6 repeat-x 0 -1550px url('Images/Grid/sprite.gif'); color:#1e395b; font:12px/12px "segoe ui",arial,sans-serif; } .RadGrid_GridSkin .rgNumPart a:hover, .RadGrid_GridSkin .rgNumPart a:hover span, .RadGrid_GridSkin .rgNumPart a.rgCurrentPage, .RadGrid_GridSkin .rgNumPart a.rgCurrentPage span { background:no-repeat url('Images/Grid/sprite.gif'); } .RadGrid_GridSkin .rgNumPart a { color:#1e395b; } .RadGrid_GridSkin .rgNumPart a:hover { background-position:100% -1250px; color:#4c607a; } .RadGrid_GridSkin .rgNumPart a:hover span { background-position:0 -1150px; } .RadGrid_GridSkin .rgNumPart a.rgCurrentPage, .RadGrid_GridSkin .rgNumPart a.rgCurrentPage:hover { background-position:100% -1450px; color:#4c607a; } .RadGrid_GridSkin .rgNumPart a.rgCurrentPage span, .RadGrid_GridSkin .rgNumPart a.rgCurrentPage:hover span { background-position:0 -1350px; } /*sorting, reordering*/ .RadGrid_GridSkin .rgHeader .rgSortAsc { background-position:3px -248px; height:10px; } .RadGrid_GridSkin .rgHeader .rgSortDesc { background-position:3px -198px; height:10px; } .GridReorderTop_GridSkin, .GridReorderBottom_GridSkin { height:11px; background:0 0 no-repeat url('Images/Grid/sprite.gif'); } .GridReorderBottom_GridSkin { background-position:0 -50px; } /*filtering*/ .RadGrid_GridSkin .rgFilterRow { background:#f1f5fb; } .RadGrid_GridSkin .rgFilterRow td { border-left:1px solid #f1f5fb; border-right:1px solid #f1f5fb; } .RadGrid_GridSkin .rgFilter { background-position:0 -300px; } .RadGrid_GridSkin .rgFilter:hover { background-position:0 -350px; } .RadGrid_GridSkin .rgFilterActive, .RadGrid_GridSkin .rgFilterActive:hover { background-position:0 -400px; } .RadGrid_GridSkin .rgFilterBox { border-color:#b8cbde; font:12px "segoe ui",arial,sans-serif; color:#000; } /*filter context menu*/ .RadMenu_GridSkin .rgHCMClear, .RadMenu_GridSkin .rgHCMFilter { border-color:#c2cedb; background:#dde8f6 center -23px repeat-x url('Images/Grid/ButtonSprites.gif'); color:#1e395b; font-family:"segoe ui",arial,sans-serif; } .RadMenu_GridSkin .rgHCMClear:hover, .RadMenu_GridSkin .rgHCMFilter:hover { border-color:#c2dbfb; background-position:center -67px; background-color:#e7edf5; } /*grouping*/ .RadGrid_GridSkin .rgGroupPanel { border:1px solid; border-color:#f2f5fa #f6f9fb #f6f9fb; background:#eef3f8 0 -1900px repeat-x url('Images/Grid/sprite.gif'); } .RadGrid_GridSkin .rgGroupPanel td { border:0; padding:0; } .RadGrid_GridSkin .rgGroupPanel td td { padding:2px 3px 1px; } .RadGrid_GridSkin .rgGroupPanel td td td { padding:0; } .RadGrid_GridSkin .rgGroupPanel .rgSortAsc { background-position:4px -144px; } .RadGrid_GridSkin .rgGroupPanel .rgSortDesc { background-position:4px -94px; } .RadGrid_GridSkin .rgUngroup { background-position:0 -7200px; } .RadGrid_GridSkin .rgGroupItem { border:1px solid #9bc9ff; background:#dde8f6 0 -7000px repeat-x url('Images/Grid/sprite.gif'); } .RadGrid_GridSkin .rgGroupHeader { background:0 -6489px repeat-x url('Images/Grid/sprite.gif'); font-size:1.1em; line-height:21px; color:#1e3287; } .RadGrid_GridSkin .rgGroupHeader td { padding:0 8px; } .RadGrid_GridSkin .rgExpand { background-position:5px -496px; } .RadGrid_GridSkin .rgCollapse { background-position:3px -444px; } .RadGrid_GridSkin .rgGroupHeader .rgExpand, .RadGrid_GridSkin .rgGroupHeader .rgCollapse { background-color:#fcfcfc; } .RadGrid_GridSkin .rgGroupHeader td p { background:#fcfcfc; } .RadGrid_GridSkin .rgGroupHeader td div div { background:#fcfcfc; } /*editing*/ .RadGrid_GridSkin .rgEditForm { border-bottom:1px solid #666; } .RadGrid_GridSkin .rgUpdate { background-position:0 -1800px; } .RadGrid_GridSkin .rgCancel { background-position:0 -1850px; } /*hierarchy*/ .RadGrid_GridSkin .rgDetailTable { border-color:#a5b3c5; } /*command row*/ .RadGrid_GridSkin .rgCommandRow { background:#e4edf8 0 -2099px repeat-x url('Images/Grid/sprite.gif'); color:#1e395b; } .RadGrid_GridSkin .rgCommandCell { border:1px solid; border-color:#fbfdfe #f1f7fc #ebf3fb; padding:0; } .RadGrid_GridSkin .rgCommandTable td { border:0; padding:2px 7px; } .RadGrid_GridSkin .rgCommandTable { border:0; } .RadGrid_GridSkin .rgCommandRow a { color:#1e395b; text-decoration:none; } .RadGrid_GridSkin .rgAdd { margin-right:3px; background-position:0 -1650px; } .RadGrid_GridSkin .rgRefresh { margin-right:3px; background-position:0 -1600px; } .RadGrid_GridSkin .rgEdit { background-position:0 -1700px; } .RadGrid_GridSkin .rgDel { background-position:0 -1750px; } .RadGrid_GridSkin .rgExpXLS, .RadGrid_GridSkin .rgExpDOC, .RadGrid_GridSkin .rgExpPDF, .RadGrid_GridSkin .rgExpCSV { background-image:url('Images/Grid/export.gif'); } .RadGrid_GridSkin .rgExpXLS { background-position:0 0; } .RadGrid_GridSkin .rgExpDOC { background-position:0 -50px; } .RadGrid_GridSkin .rgExpPDF { background-position:0 -100px; } .RadGrid_GridSkin .rgExpCSV { background-position:0 -150px; } /*multirow select*/ .GridRowSelector_GridSkin { background:#039; } /*row drag n drop*/ .GridItemDropIndicator_GridSkin { border-top:1px dashed #039; } /*tooltip*/ .GridToolTip_GridSkin { border:1px solid #a0afc3; padding:3px; background:#eef4fb; color:#4c607a; } /*rtl*/ .RadGridRTL_GridSkin .rgHeader:first-child, .RadGridRTL_GridSkin th.rgResizeCol:first-child, .RadGridRTL_GridSkin .rgFilterRow>td:first-child, .RadGridRTL_GridSkin .rgRow>td:first-child, .RadGridRTL_GridSkin .rgAltRow>td:first-child { border-left-width:1px; padding-left:7px; } .RadGridRTL_GridSkin .rgPageFirst { background-position:0 -1000px; } .RadGridRTL_GridSkin .rgPageFirst:hover { background-position:0 -1050px; } .RadGridRTL_GridSkin .rgPagePrev { background-position:0 -850px; } .RadGridRTL_GridSkin .rgPagePrev:hover { background-position:0 -900px; } .RadGridRTL_GridSkin .rgPageNext { background-position:0 -700px; } .RadGridRTL_GridSkin .rgPageNext:hover { background-position:0 -750px; } .RadGridRTL_GridSkin .rgPageLast { background-position:0 -550px; } .RadGridRTL_GridSkin .rgPageLast:hover { background-position:0 -600px; }
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadRotatorThumbs"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="ImagePreview" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings></telerik:RadAjaxManager><telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="Server" Transparency="30" BackColor="#E0E0E0"> <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' alt="Loading..." style="border: 0;" /></telerik:RadAjaxLoadingPanel><table width="780px"> <tr> <td width="180px"> <telerik:RadRotator ID="RadRotatorThumbs" Skin="Forest" runat="server" OnItemClick="LoadImage" Width="130px" Height="400px" ItemHeight="60px" ItemWidth="115px" RotatorType="ButtonsOver" ScrollDirection="Up, Down" ScrollDuration="700" FrameDuration="1"> <ItemTemplate> <asp:Image runat="server" ID="Image" ImageUrl='<%# Eval("ImageUrl","{0}") %>' /> </ItemTemplate> </telerik:RadRotator> </td> <td width="600px"> <asp:Image runat="server" ID="ImagePreview" ImageUrl="" AlternateText="" /> </td> </tr></table>public partial class Controls_Photos : System.Web.UI.UserControl{ private string _thumbPath = "/thumbnails"; private string _fullImagePath = "~/Images/photos"; [Serializable()] private struct fileInfo { public string filename; } private List<fileInfo> imagesArray { get { return (List<fileInfo>)ViewState["imagesArray"]; } set { ViewState["imagesArray"] = value; } } public string ThumbPath { get { return _thumbPath; } set { _thumbPath = value; } } public string FullImagePath { get { return _fullImagePath; } set { _fullImagePath = value; } } protected void Page_Load(object sender, EventArgs e) { DataTable myTable = CreateDataTable(); if (!IsPostBack || object.Equals(imagesArray, null)) { imagesArray = new List<fileInfo>(); foreach (string fileName in System.IO.Directory.GetFiles(Server.MapPath(FullImagePath + ThumbPath), "*thumb*")) //add functionality to sort by modified date { fileInfo fInfo = new fileInfo(); fInfo.filename = FullImagePath + ThumbPath + "/" + fileName.Substring(fileName.LastIndexOf("\\") + 1); imagesArray.Add(fInfo); AddRow(ref myTable, fInfo.filename); } RadRotatorThumbs.DataSource = myTable.DefaultView; RadRotatorThumbs.DataBind(); ImagePreview.ImageUrl = imagesArray[0].filename.Replace("_thumb", "").Replace(ThumbPath, ""); } } protected DataTable CreateDataTable() { DataTable myTable = new DataTable(); DataColumn myColumn = new DataColumn(); myColumn.DataType = Type.GetType("System.String"); myColumn.ColumnName = "ImageUrl"; myTable.Columns.Add(myColumn); return myTable; } protected void AddRow(ref DataTable myTable, string path) { DataRow myRow; myRow = myTable.NewRow(); myRow["ImageUrl"] = path; myTable.Rows.Add(myRow); } protected void LoadImage(object sender, RadRotatorEventArgs e) { fileInfo fInfo = imagesArray[e.Item.Index]; ImagePreview.ImageUrl = fInfo.filename.Replace("_thumb", "").Replace(ThumbPath, ""); }}

I'm using with RegExpTextBoxSetting and WebMethod validation.
its works fine, but the only problem is that when the method gets false, the RegExpTextBoxSetting gets the error icon and the text box gets the red color but, The error message not display !
ExpandCollapseColumn-Display="False"
and have
<expandcollapsecolumn Display="false"> </expandcollapsecolumn>