This is a migrated thread and some comments may be shown as answers.

IE8 redraw problem

21 Answers 260 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

julie kagan asked on 06 Aug 2009, 11:38 AM

Hi,
I am using Telerik Q2 2009 RadScheduler together with RadTooltip as described in LiveDemos.Here is the code of my control:

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="monthschedule.ascx.cs" Inherits="com.epam.epm3ie.uc.artist.MonthSchedule" %> 
        
            <%@ Reference Control="tooltip.ascx" %> 
        
            <asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional" > 
        
                <ContentTemplate> 
        
                    <telerik:RadScheduler runat="server" ID="radScheduler" Width="750px" DayStartTime="09:00:00" DayEndTime="22:00:00"   
        
                        DataKeyField="UniqueID" DataSubjectField="eventName" DataStartField="startTime" DataEndField="endTime" 
        
                        MonthView-VisibleAppointmentsPerDay="10" Culture="<%# UserCulture %>" FirstDayOfWeek="<%# UserFirstDayOfWeek %>" 
        
                        SelectedView="MonthView" AllowDelete="false" MonthView-AdaptiveRowHeight="true" MonthView-HeaderDateFormat="MMMM yyyy" 
        
                        OverflowBehavior="Expand" OnAppointmentDataBound="radScheduler_AppointmentDataBound" 
        
                        StartEditingInAdvancedForm="false" OnClientAppointmentInserting="OnClientAppointmentInserting" 
        
                        OnClientAppointmentEditing="OnClientAppointmentEditing" OnNavigationComplete="radScheduler_NavigationComplete"   
        
                        OnAppointmentCreated="radScheduler_AppointmentCreated" OnDataBound="radScheduler_DataBound">  
        
                        <Localization AdvancedAllDayEvent="All day"></Localization> 
        
                        <AdvancedForm Modal="true" /> 
        
                        <TimelineView UserSelectable="false" /> 
        
                    </telerik:RadScheduler> 
        
                    <telerik:RadToolTipManager runat="server" ID="radToolTipManager" Width="320" Height="170" 
        
                    Animation="None" HideEvent="LeaveToolTip" Text="Loading..." 
        
                    OnAjaxUpdate="radToolTipManager_AjaxUpdate" OnClientBeforeShow="clientBeforeShow" /> 
        
                </ContentTemplate> 
        
            </asp:UpdatePanel>

And the problrem is that when you try to navigate the scheduler in month view (change day to the another month or navigate month to next or previous using buttons < >) the content of the scheduler doesn't redraw. It looks like the month has changed, by there are no any appointment and cells of scheduler are absolutely empty even without date in the corner. But when you just move mouse pointer over the cells of scheduler, the wright appointmets draw in the cells. It is strange, but this situation take place only in Month view - in week view or day view everething is ok. Other brousers like FireFox, Opera and even IE6 alwas redraw scheduler content.

Another problem relate to the appointment style in Month View of scheduler - in the IE6 and IE8 the appointment name doesn't cut if it is longer than the cell, this looks not good - scrollbars appear in IE, and borders of the vertical columns of days are shifted relative to the week day names in the top of scheduler.

21 Answers, 1 is accepted

answered on 10 Aug 2009, 09:13 AM

Hi,

We received a few other complaints about this issue and it seems that this is a new issue with IE8. We had similar problems in IE7, but they were easily fixed by applying "zoom: 1" style on RadScheduler. It looks like this workaround no longer works in IE8, but you can give it a try:

<style type="text/css">
.RadScheduler { zoom: 1; }
</style>

If this indeed doesn't help, you can include the following script on your page:

<script type="text/javascript">
Sys.Application.add_load(function() {
    if(!$telerik.isIE8)
        return;

    var schedulerElement = $find('<%= RadScheduler1.ClientID %>').get_element();
    schedulerElement.style.cssText = schedulerElement.style.cssText;
    var $ = $telerik.$;
    $(".rsMonthView td", schedulerElement).each(function() {
       this.style.cssText = this.style.cssText;
    });
});
</script>

Let us know if this helps.

All the best,
Tsvetomir Tsonev
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.

answered on 23 Jun 2010, 10:33 AM

Hi Carlos,

Please include the following script on your page:

<script type="text/javascript">

Sys.Application.add_load(function() {

var schedulerElement = $find('<%= radScheduler.ClientID %>').get_element();

schedulerElement.style.cssText = schedulerElement.style.cssText;

var $ = $telerik.$;

$(".rsMonthView td", schedulerElement).each(function() {

this.style.cssText = this.style.cssText;

});

</script>

Regards,
Helen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 10 Feb 2011, 10:13 AM

Hi Markus,

Did you try the below workarounds:

1)

<style type="text/css">

.RadScheduler { zoom: 1; }

</style>

2)

<script type="text/javascript">

Sys.Application.add_load(function() {

if(!$telerik.isIE8)

return;

var schedulerElement = $find('<%= RadScheduler1.ClientID %>').get_element();

schedulerElement.style.cssText = schedulerElement.style.cssText;

var $ = $telerik.$;

$(".rsMonthView td", schedulerElement).each(function() {

this.style.cssText = this.style.cssText;

});

</script>

If none of them helps, could you please send us a live url or a test page which demonstrates the problem to examine it locally?

Regards,
Helen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 10 Feb 2011, 10:23 AM

Hi Helen !

Thanks for your reply

@workaround 1: does not work

@workaround 2: i get a script error that Sys.
is not defined

Currently i can't provide you a live demo, because our IIS6 & IE8 environment is just for internal use

and some more things:

1. When i'm in timelineview, resourced grouped vertically, they are cutted if they have dirrefent lanegths, until the RowHeaderWith Parameter is set to a fixed value
2. When in timeline view and i try to overwrite the css settings for the RowHeader for resrouces grouped vertically, it does not work or has strange bevahiour in IE7/IE8

you can also see this 2 points at you live demo site (demos.telerik.com)

i've updated now to the last Telerik AJAX Q3 Version (deployed on the 16.12.2010) , when i then right click on an appointment in scheduler
i will get an script error (Visual Studio 2010) that "CommandEdit" cannot be null. I have no special context menues defined, it looks like a bug in the latest release, when i roll back to the prev. Telerik AJAX Q3 Version it works.

can you please have a look at this

thanks
Markus

answered on 10 Feb 2011, 01:08 PM

InternalBuilds.jpg

Hello Markus,

Up to the problems:

1. Workaround 2: i get a script error that Sys.
is not defined:
Did you try it in an asp.net ajax enabled web site? Do you receive some error initially without the script?

2. When i'm in timelineview, resourced grouped vertically, they are cutted if they have dirrefent lanegths, until the RowHeaderWith Parameter is set to a fixed value:
You may try to include the following CSS in the page's head tag:

.rsMainHeader

{

width: auto !important;

}

3. When in timeline view and i try to overwrite the css settings for the RowHeader for resrouces grouped vertically, it does not work or has strange bevahiour in IE7/IE8
It depends on the CSS selector. Could you try with the selector above?

4. I will get an script error (Visual Studio 2010) that "CommandEdit" cannot be null.
This problem is fixed in the latest internal build. You may download it from your account - see the attached screenshot for details.

Regards,
Helen
the Telerik team

answered on 11 Feb 2011, 08:30 AM

Hi Helen !

Thanks for your fast reply.

1. Workaround 2: i get a script error that Sys.
is not defined:
Yes the asp .net website is ajax enabled, and does no throw any other errors

2. When i'm in timelineview, resourced grouped vertically, they are cutted if they have dirrefent lanegths, until the RowHeaderWith Parameter is set to a fixed value:

That one worked very well in all Browsers, thanks (you mabye should add this one to your live demos, because there the resources are also displayed in the wrong way in IE7 & IE8)

3. When in timeline view and i try to overwrite the css settings for the RowHeader for resrouces grouped vertically, it does not work or has strange bevahiour in IE7/IE8

i took the .rsMainHeader Css selector and added (eg.) padding-right: 10px (to get a little space between the last sign of the resource name and the end of the resource column), it is completely irgnored (with the width: auto !important). when i do an

.rsMainHeader

{

padding-right 10px;

}

it works very well on Visual Studio Devserver but not on IIS6/7 .. in Safari the padding is ignored, in IE7/IE8 the resource names are moved 10px more right than column with is, and the last signs are cutted.

4. I will get an script error (Visual Studio 2010) that "CommandEdit" cannot be null.

Thank you so much, that worked very well

best regards
Markus

answered on 11 Feb 2011, 10:25 AM

Hi Markus,

1. Please try to include the below script after your RadScheduler declaration:

<script type="text/javascript">

Sys.Application.add_load(function() {

var schedulerElement = $find('<%= radScheduler.ClientID %>').get_element();

schedulerElement.style.cssText = schedulerElement.style.cssText;

var $ = $telerik.$;

$(".rsMonthView td", schedulerElement).each(function() {

this.style.cssText = this.style.cssText;

});

</script>

3.Try with the following selector:

.rsMainHeader

{

padding-right: 10px !important;

white-space: normal;

}

Greetings,
Helen
the Telerik team