I'm having a problem where the controls on my popup EditForm are not rendering completely, even though they seem to be fully functional. The situation is much worst in IE than Firefox or Chrome but they both still have minor issues.
For example in IE, the date/time gadget on the right hand side of the controls are invisible but the mouse still changes to a 'hand' when hovering over the place they should be. After clicking, the dropdown calendar/time picker appears but has a transparent background. In Chrome or Firefox, almost everything looks OK except that the control tools in the edit box are monochrome.
I have attached images of screenshots from IE and Firefox plus cut down versions of my aspx and ascx code files. I would be grateful for any help you could give me.
<%@ Page Language="vb" CodeFile="Default.aspx.vb" AutoEventWireup="true" Inherits="Menu.Examples.Programming.ShowPath.DefaultVB" MasterPageFile="~/RAMTrack.master" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server"> <!--Page Header content--> <!-- From Telerik Support Forum: Title: Incorrect rendering of RadEditor In case where RadEditor is initially hidden and displayed using AJAX is causing the editor to render with incorrect width on the first show. This scenario applies for RadGrid edit template, RadEditor inside a RadPageView, etc. This problem occurs due to the fact that RadEditor CSS files are not fully loaded when the editor calculates its’ toolbar size. To avoid this problem you need to register the RadEditor’s CSS files manually on the page: Since Q2 2011 you need to use the Telerik.Web.SkinRegistrar.GetWebResourceUrl() method: --> <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server"> <link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(RadEditor), "Telerik.Web.UI.Skins.Editor.css") %>' rel="stylesheet" type="text/css" /> <link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(RadEditor), "Telerik.Web.UI.Skins.Default.Editor.Default.css") %>' rel="stylesheet" type="text/css" /> <link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(RadWindow), "Telerik.Web.UI.Skins.Window.css") %>' rel="stylesheet" type="text/css" /> <link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(RadWindow), "Telerik.Web.UI.Skins.Default.Window.Default.css") %>' rel="stylesheet" type="text/css" /> </telerik:RadCodeBlock> </asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="Body" runat="Server"> <!--Page Body content--> <telerik:RadScriptBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> // When the user double-clicks a row, then trigger the EditItem event function RowDblClick(sender, eventArgs) { sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical()); } function refreshGrid(arg) { __doPostBack("RefreshLogbook"); } function OnClientPageLoad(sender, args) { setTimeout(function () { sender.set_status(""); }, 0); } </script> </telerik:RadScriptBlock> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadGrid1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"> </telerik:RadAjaxLoadingPanel> <telerik:RadSplitter ID="RadSplitter1" Orientation="Horizontal" Width="100%" height="100%" runat="server"> <!--Top Pane--> <telerik:RadPane ID="RadPane1" Height="25%" runat="server"> </telerik:RadPane> <!--Horizontal split bar--> <telerik:RadSplitBar ID="RadSplitBar1" CollapseMode="Forward" CollapseExpandPaneText="Hide/Display Logbook Options" runat="server"> </telerik:RadSplitBar> <!--Bottom Pane--> <telerik:RadPane ID="RadPane2" Height="75%" runat="server"> <telerik:RadGrid ID="RadGrid1" runat="server" CssClass="RadGrid" GridLines="None" AllowPaging="True" PageSize="5" AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="True" AllowAutomaticDeletes="False" AllowAutomaticInserts="False" AllowAutomaticUpdates="True" DataSourceID="ds_Logbook" EnableLinqExpressions="False" EnableEmbeddedSkins="false" Skin="RAMTrackSkin_M" > <MasterTableView CommandItemDisplay="None" GridLines="None" DataSourceID="ds_Logbook" DataKeyNames="Logbook_Id" AllowFilteringByColumn="True" AllowSorting="True" TableLayout="Fixed" HeaderStyle-Wrap="true"> <EditFormSettings EditFormType="Template"> <PopUpSettings Width="600px" Height="400px" Modal="true" /> </EditFormSettings> <PagerStyle Mode="NextPrevAndNumeric" PageSizeLabelText="Page Size: " PageSizes="5,10,15,25,50,100,250" /> <Columns> <telerik:GridBoundColumn UniqueName="SessionNo" HeaderText="Session" DataField="SessionNo" HeaderStyle-Width="55px" FilterControlWidth="15px"> </telerik:GridBoundColumn> <telerik:GridDateTimeColumn FilterControlWidth="120px" DataField="LogDate" HeaderText="Log Date" SortExpression="LogDate" UniqueName="LogDate" PickerType="DatePicker" DataFormatString="{0:D}" EnableRangeFiltering="true" > <HeaderStyle Width="180px" /> </telerik:GridDateTimeColumn> <telerik:GridBoundColumn UniqueName="ActivityCode" HeaderText="Activity Code" DataField="ActivityCode" HeaderStyle-Width="70px" FilterControlWidth="20px"> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="StartTime" HeaderText="Start Time" DataField="StartTime" HeaderStyle-Width="70px" FilterControlWidth="30px"> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="StopTime" HeaderText="Stop Time" DataField="StopTime" HeaderStyle-Width="70px" FilterControlWidth="30px"> </telerik:GridBoundColumn> </Columns> <EditFormSettings UserControlName="WebUserControl.ascx" EditFormType="WebUserControl"> <EditColumn UniqueName="WebUserControl1"> </EditColumn> </EditFormSettings> </MasterTableView> <ClientSettings> <ClientEvents OnRowDblClick="RowDblClick"></ClientEvents> </ClientSettings> </telerik:RadGrid> </telerik:RadPane> </telerik:RadSplitter> <!--Data Source, definition for Grid (Note: the dates are stored as floating point numbers, hence all the conversion) --> <asp:SqlDataSource ID="ds_Logbook" runat="server" ConnectionString="<%$ ConnectionStrings:RAMtrack %>" ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>" SelectCommand="SELECT TOP (200) Logbook_Id ,SessionNo ,convert(Datetime,LogDate, 103) as LogDate ,convert(nvarchar(10),convert(Datetime,StartTime, 103), 103) as StartDate ,convert(nvarchar(5),convert(Datetime,StartTime, 113), 108) as StartTime ,convert(nvarchar(10),convert(Datetime,StopTime, 103), 103) as StopDate ,convert(nvarchar(5),convert(Datetime,StopTime, 113), 108) as StopTime ,Activity_Id ,ProgComment FROM tbl_LogBook ORDER BY LogDate DESC"> <SelectParameters> <asp:Parameter Name="StartDate" DefaultValue="40909" Type="Decimal" /> <asp:Parameter Name="EndDate" DefaultValue="90000" Type="Decimal" /> <asp:SessionParameter DefaultValue="65" Name="Installation_Id" SessionField="Installation_Id" Type="Int64" /> </SelectParameters> </asp:SqlDataSource> <!--Data Source for drop-down on edit screen --> <asp:SqlDataSource ID="ds_ActivityCodes" runat="server" ConnectionString="<%$ ConnectionStrings:RAMtrack %>" ProviderName="<%$ ConnectionStrings:RAMtrack.ProviderName %>" SelectCommand="SELECT Activity_Id ,ActivityCode ,ActivityDescription ,ActivityCode + ' - ' + ActivityDescription as ActivityCodeDesc FROM tbl_activities"> <SelectParameters> <asp:SessionParameter DefaultValue="2" Name="Installation_Id" SessionField="Installation_Id" Type="Int64" /> <asp:Parameter Name="EventTypeAtStart" DefaultValue="0" Type="Int64" /> </SelectParameters> </asp:SqlDataSource></asp:Content>Default.aspx.vb
Imports SystemImports System.Collections.GenericImports Telerik.Web.UINamespace Menu.Examples.Programming.ShowPath Partial Public Class DefaultVB Inherits System.Web.UI.Page Protected Sub RadGrid1_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated Dim filteringItem As GridFilteringItem Dim literalTo As LiteralControl Try filteringItem = e.Item If Not IsNothing(filteringItem) Then literalTo = filteringItem("LogDate").Controls(3) literalTo.Text = "<br /> To:" End If Catch ex As Exception ' It's OK, just carry on End Try End Sub Protected Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid1.PreRender If (Not Page.IsPostBack) Then ' Set the edit mode to either a drop-down form or Pop Up form. Valid values are "EditForms" and "PopUp" Me.RadGrid1.MasterTableView.EditMode = CType([Enum].Parse(GetType(GridEditMode), "PopUp"), GridEditMode) Me.RadGrid1.Rebind() End If End Sub End ClassEnd NamespaceWebUserControl.ascx (edit form)
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="user_WebUserControl" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><telerik:RadScriptBlock runat="server" ID="RadCodeBlock1"> <script type="text/javascript"> var RadTimePicker1; var RadTimePicker2; function GetRadWindow() { var oWindow = null; if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well) return oWindow; } function ConfirmCloseForm() { //if (confirm('Closing the form will abandon any unsaved changes, OK to close?')) { GetRadWindow().close(); //} } function CloseForm() { GetRadWindow().close(); } function ValidateStart(sender, args) { var Date1 = new Date(dp_StartDate.get_selectedDate()); var Time1 = new Date(tp_StartTime.get_selectedDate()); args.IsValid = true; if (Date1.getTime() < 1) { alert("The Start date is required"); args.IsValid = false; } if (Time1.getTime() < 1) { alert("The Start time is required"); args.IsValid = false; } } function ValidateTimes(sender, args) { var Date1 = new Date(dp_StartDate.get_selectedDate()); var Date2 = new Date(dp_StopDate.get_selectedDate()); var Time1 = new Date(tp_StartTime.get_selectedDate()); var Time2 = new Date(tp_StopTime.get_selectedDate()); args.IsValid = true; if (Date2.getTime() < Date1.getTime()) { alert("The Stop date and time should be greater than the Start time"); args.IsValid = false; } else { if ((Date2.getTime() == Date1.getTime()) && (Time2 < Time1)) { alert("The Stop date and time should be greater than the Start time"); args.IsValid = false; } } } function onLoadStartDate(sender, args) { dp_StartDate = sender; } function onLoadStartTime(sender, args) { tp_StartTime = sender; } function onLoadStopDate(sender, args) { dp_StopDate = sender; } function onLoadStopTime(sender, args) { tp_StopTime = sender; } </script></telerik:RadScriptBlock><telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0"> <Tabs> <telerik:RadTab Text="Start/Stop Details" Width="200px"></telerik:RadTab> <telerik:RadTab Text="Incident Details" Width="200px"></telerik:RadTab> <telerik:RadTab Text="Repair Action Details" Width="200px"></telerik:RadTab> </Tabs></telerik:RadTabStrip><telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="outerMultiPage"> <telerik:RadPageView runat="server" ID="pv_StartStop"> <table id="Table3" cellspacing="3" cellpadding="3" width="300" border="0"> <tr> <td style="text-align:right"> Log Date: </td> <td style="white-space:nowrap"> <asp:TextBox ID="txt_LogDate" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.LogDate" ) %>' Width="30em"></asp:TextBox> </td> <td> </td> </tr> <tr> <td style="text-align:right"> Activity Code: </td> <td style="white-space:nowrap"> <telerik:RadDropDownList runat="server" ID="cbo_ActivityCode" DataValueField="Activity_id" DataTextField="ActivityCodeDesc" DataSourceID="ds_ActivityCodes" Width="30em"> </telerik:RadDropDownList> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="cbo_ActivityCode" ErrorMessage="Please select an Activity Code" ForeColor="Red" runat="server">*</asp:RequiredFieldValidator> </td> <td> </td> </tr> <tr> <td align="right" valign="top"> <asp:label ID="lbl_StartTime" Text="Start Time:" runat="server"></asp:label> </td> <td> <telerik:RadDatePicker ID="dp_StartDate" Width="100px" runat="server"> <DateInput ID="DateInput1" runat="server"> <ClientEvents OnLoad="onLoadStartDate"></ClientEvents> </DateInput> </telerik:RadDatePicker> <telerik:RadTimePicker ID="tp_StartTime" Width="80px" runat="server"> <DateInput ID="DateInput2" runat="server"> <ClientEvents OnLoad="onLoadStartTime"></ClientEvents> </DateInput> <TimeView ID="TimeView1" Interval="00:30:00" Columns="6" runat="server"></TimeView> </telerik:RadTimePicker> <asp:CustomValidator ID="val_StartDate" EnableClientScript="true" ControlToValidate="dp_StartDate" ClientValidationFunction="ValidateStart" ForeColor="Red" runat="server">*</asp:CustomValidator> <asp:CustomValidator ID="val_StartTime" EnableClientScript="true" ControlToValidate="tp_StartTime" ClientValidationFunction="ValidateStart" ForeColor="Red" runat="server">*</asp:CustomValidator> </td> <td> </td> </tr> <tr> <td align="right" valign="top"> <asp:label ID="lbl_StopTime" Text="Stop Time:" runat="server"></asp:label> </td> <td> <telerik:RadDatePicker ID="dp_StopDate" Width="100px" runat="server"> <DateInput ID="DateInput3" runat="server"> <ClientEvents OnLoad="onLoadStopDate"></ClientEvents> </DateInput> </telerik:RadDatePicker> <telerik:RadTimePicker ID="tp_StopTime" Width="80px" runat="server"> <DateInput ID="DateInput4" runat="server"> <ClientEvents OnLoad="onLoadStopTime"></ClientEvents> </DateInput> <TimeView ID="TimeView2" Interval="00:30:00" Columns="6" runat="server"></TimeView> </telerik:RadTimePicker> <asp:CustomValidator ID="val_StopDate" EnableClientScript="true" ControlToValidate="dp_StopDate" ClientValidationFunction="ValidateTimes" ForeColor="Red" runat="server">*</asp:CustomValidator> <asp:CustomValidator ID="val_StopTime" EnableClientScript="true" ControlToValidate="tp_StopTime" ClientValidationFunction="ValidateTimes" ForeColor="Red" runat="server">*</asp:CustomValidator> </td> <td> </td> </tr> <tr> <td align="right" valign="top"> <asp:label ID="lbl_Comment" Text="Comments:" runat="server"></asp:label> </td> <td> <telerik:RadEditor ID="RE_ProgComment" Width="400px" Height="150px" EditModes="Design" Skin="Metro" runat="server"> <Tools> <telerik:EditorToolGroup> <telerik:EditorTool Name="Bold"></telerik:EditorTool> <telerik:EditorTool Name="Italic"></telerik:EditorTool> <telerik:EditorTool Name="Underline"></telerik:EditorTool> <telerik:EditorTool Name="InsertLink"></telerik:EditorTool> <telerik:EditorTool Name="Unlink"></telerik:EditorTool> <telerik:EditorTool Name="AjaxSpellCheck"></telerik:EditorTool> </telerik:EditorToolGroup> </Tools> </telerik:RadEditor> </td> <td> </td> </tr> </table> </telerik:RadPageView> <telerik:RadPageView runat="server" ID="pv_Incident"> </telerik:RadPageView> <telerik:RadPageView runat="server" ID="pv_RepairAction"> </telerik:RadPageView></telerik:RadMultiPage>WebUserControl.ascx.vb
Partial Class user_WebUserControl Inherits System.Web.UI.UserControl Private _dataItem As Object = Nothing#Region "Web Form Designer generated code" Protected Overrides Sub OnInit(ByVal e As EventArgs) ' ' CODEGEN: This call is required by the ASP.NET Web Form Designer. ' InitializeComponent() MyBase.OnInit(e) End Sub 'OnInit '/ <summary> '/ Required method for Designer support - do not modify '/ the contents of this method with the code editor. '/ </summary> Private Sub InitializeComponent() AddHandler DataBinding, AddressOf Me.LogbookDetails_DataBinding End Sub 'InitializeComponent#End Region Public Property DataItem() As Object Get Return Me._dataItem End Get Set(ByVal value As Object) Me._dataItem = value End Set End Property Protected Sub LogbookDetails_DataBinding(ByVal sender As Object, ByVal e As System.EventArgs) Dim ActivityCodeValue As Object Dim CommentsValue As Object ' The drop-down lists and checkboxes to not set their selections automatically ' so this is being done here during the databinding ActivityCodeValue = DataBinder.Eval(DataItem, "Activity_id") If ActivityCodeValue.Equals(DBNull.Value) Then ActivityCodeValue = 0 End If CommentsValue = DataBinder.Eval(DataItem, "ProgComment") If CommentsValue.Equals(DBNull.Value) Then CommentsValue = "" End If ' Populate the controls with data Me.cbo_ActivityCode.SelectedIndex = ActivityCodeValue Me.RE_ProgComment.Content = CommentsValue If Not IsDBNull(DataBinder.Eval(DataItem, "StartDate")) Then Me.dp_StartDate.SelectedDate = CDate(DataBinder.Eval(DataItem, "StartDate").ToString) End If If Not IsDBNull(DataBinder.Eval(DataItem, "StartTime")) Then Me.tp_StartTime.SelectedTime = ts_ExtractTime(DataBinder.Eval(DataItem, "StartTime").ToString) End If If Not IsDBNull(DataBinder.Eval(DataItem, "StopDate")) Then Me.dp_StopDate.SelectedDate = CDate(DataBinder.Eval(DataItem, "StopDate").ToString) End If If Not IsDBNull(DataBinder.Eval(DataItem, "StopTime")) Then Me.tp_StopTime.SelectedTime = ts_ExtractTime(DataBinder.Eval(DataItem, "StopTime").ToString) End If End Sub Function ts_ExtractTime(TimeFromDB_s As String) As TimeSpan Dim Hours_l As Long Dim Minutes_l As Long Dim ColonPos_l As Long ColonPos_l = InStr(TimeFromDB_s, ":") If ColonPos_l > 0 Then Hours_l = Left(TimeFromDB_s, ColonPos_l - 1) Minutes_l = Right(TimeFromDB_s, Len(TimeFromDB_s) - ColonPos_l) Else Hours_l = Hour(Now) Minutes_l = Minute(Now) End If ts_ExtractTime = New TimeSpan(Hours_l, Minutes_l, 0) End FunctionEnd Class
