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

[Solved] Odd visual behavior in timeline view (Spanning multiple cells)

4 Answers 121 Views

Scheduler

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

D asked on 13 Feb 2009, 03:36 PM

So far the entire controll set has been functioning like a dream.
However, when nearing the end of the PoC we tested with larger appointments spanning a lot more cells and got a rather annoying result.
** Tested in both Firefox and IE

http://greynet.nl/images/telerik/annoying.png

The online demo http://demos.telerik.com/aspnet-ajax/scheduler/examples/timelineview/defaultcs.aspx also displays the same odd behavior when 7 slots are selected, and the appointment is dragged over all 7 sets.

http://greynet.nl/images/telerik/alsoindemo.png

Pretty sure on what causes it to.
When using the property "width" in percentage mode, it only uses the actual cell width, it does not take into account the width of the border line.
A simple explanation would be, say you have a grid of 50 columns, each column beeing 10px long devided by a default (1px) solid border. Now to span all those 50 columns, the scheduler simply says "width: 5000%".
So it draws a appointment of 50*34px = 1700px.
I trust you see the issue, the border is not taken into the calculation here, thus the appointment is 50px short.
The problem becomes more prominent with larger border values.
Here is a screenshot of the same screen with the border-style disabled through CSS.

http://greynet.nl/images/telerik/borders-disabled.png

Any thoughts on how to effectivly solve this without having to to recalculate the effective width's of each appointment?

Made myself a quick patch (Though this really is not the way Id like to resolve it)

    
            function fixAppointmentWidth() { 
        
                // retrieve all the divs in the page (A lot) 
        
                var divs = document.getElementsByTagName("div"); 
        
                // loop the divs 
        
                for (i in divs) { 
        
                    // retrieve the divs class name 
        
                    divclass = divs[i].className; 
        
                    // check if the classname matches an appointment class (For some reason IE needs a space behind the class name, no clue as to why) 
        
                    if((divclass == "rsApt ") || (divclass == "rsApt")) { 
        
                        // get the current cell width (Which is going to be a percentage) 
        
                        var cellwidth   = divs[i].style.width; 
        
                        // strip the % and devide the remainder by 100 to fetch the ammount of cells the appointment is supposed to span 
        
                        var cells       =   (cellwidth.substr(0,(cellwidth.length -1 )) / 100); 
        
                        // fetch the current (real) pixel value clientwidth 
        
                        var clientwidth = divs[i].clientWidth; 
        
                        // Reset the width to clientWidth + cellcount. (This offcourse assumes the border is 1px as it generally is) 
        
                        divs[i].style.width = (clientwidth + cells) + "px"; 
        
                    } 
        
                } 
        
            }

Adding this to the page bottom as well as registering it as the "ClientEvents-OnResponseEnd" of the ajaxmanager auto fixes the issue.
still, not the way i like to resolve it :)

4 Answers, 1 is accepted

answered on 19 Feb 2009, 03:05 PM

Hi D!

Try AllDayAppointmentControl.cs -> GetWidth().
Based on your js, i modified the control. It works, but, as i saw, only the timelineview have this bug.
Other views rendered correctly.
protected override Unit GetWidth()
{
      if (Appointment.Owner.SelectedView == SchedulerViewType.TimelineView)
      {
                int width = Convert.ToInt32(Appointment.Owner.ColumnWidth.Value * AppointmentColSpan);
                return Unit.Pixel(width);
      }
      return Unit.Percentage(100 * AppointmentColSpan);

      //return Unit.Percentage(100 * AppointmentColSpan);    <-- Original code
}