IE8 redraw problem

[julie kagan]

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. 

[Peter]

Hello julie,

Which version of Telerik controls do you use? There were indeed issues under IE8, but we have fixed all that we are aware of with Q1 2009 SP1:
http://www.telerik.com/products/aspnet-ajax/whats-new/release-history/q1-2009-sp1-version-2009-1-402.aspx



Kind regards,
Peter
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.

[julie kagan]

I am using the latest Q2 2009 , version of dll is 2009.2.701.35

[T. Tsonev]

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.

[julie kagan]

Hello,
Here are results of you solution:

1. applying "zoom: 1"  doesn't help, as you suppose
2. script block helps to redraw page, but it looks not nice with both vertical and horisontal scrollbars

It's seems that this issue reproduce only when RadScheduler has the property OverflowBehavior="Expand". 
So my temporary solution is not to set this property.  

[T. Tsonev]

Hello,

Great to hear that the workaround has helped. We'll try to find a CSS-only solution to this problem and if that fails we'll include the workaround in our code.

We plan to fix the scrollbar issue and hide them when they're not needed even when OverflowBehavior is set to Scroll.

Regards,
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.

[julie kagan]

Hello,

I try the latest version of Telerik Radscheduler (dll and css files), but my problem still exist - i can't use property  OverflowBehavior="Expand" - it absolutely doesn't work under IE8. Both vertical and horisontal scrollbars are on the sceduler + ie8 doesn't redraw scheduler content after you change month, for example, until you move mouth poiner over the cells of scheduler. Only after that the appointmets shows on their dates.

Can you suggest any solution? I extremely need scheduler WITHOUT scrollbars and properly work under IE8.

[Peter]

Hi julie,

Can you isolate the problem in a simple working demo and send it to us via a support ticket? We cannot reproduce the issue with the scrollbars in our local tests using the RadScheduler definition you provided in the first post above.


Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[wima]

Is there a solution about this problem?

thank you
wima

[Carlos garza]

For me is not working, not assigning the property and still not redrawing properly, is there any fix to this?
I am using version 2009, 3, 1208, 35

Thanks

[Helen]

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

[Markus]

Hi !

I have a similar problem. The CSS of the scheduler is not laoded (no gridlines, no css specific display) in timelimeview,
in combination of IIS 6.0 and IE 8.0.

i'm using Telerik AJAX Q3 2010

Is there any solution ?

regards
Markus

[Helen]

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

[Markus]

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

[Helen]

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

[Markus]

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

[Helen]

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

[Markus]

Hi Helen !

Thanks again.

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

i've added it this way and know it works without errors in the debugging environment.
We will deploy it on saturday in our special environment and then i can tell if it works for IE8/IIS6 combination.

3.Try with the following selector:

That worked great in every browser, thank you very much

best regards
Markus

[Markus]

HI Helen !

Thanks, the workaround worked very well on IIS 6 & IE 8 combination !

regards
Markus

[Helen]

Hi Markus,

We are happy to hear that everything works fine now.
Don't hesitate to contact us if other problems pop up.

Greetings,
Helen
the Telerik team

[Mikiya Sato]

Hello,

I have a similar problem in IE8 and IE9.
I am using Q3 2011(2011.3.1115). 
So this workaround works well.

However, I did not have a problem, when Q2  2010(2010.2.929.20) was used. 
I would like to you to add the solution of this problem to a latest product. 

Mikiya Sato

 

[Helen]

Hi Mikiya Sato,

Could you please open a support ticket and describe the exact problem you experience and which of the mentioned workarounds below fixed it? A sample code which demonstrates the issue will be helpful too.

The current thread is quite old. We should determine the exact problem in order to fix it.

Kind regards,
Helen
the Telerik team