Row Header Width decrease not showing correctly

[Meg]

     Hello, 
I have been trying to get the Row Header Width for the scheduler to be lower than the default.

The problem is that when it is lower, the column doesn't have a border for the cell, the hours run out of the cell, and the first cell for the hours (the rsSpacerCell) is sized incorrectly. This carries over with the exportToPdf function too, showing these errors on the PDF document, but they are much more prominent in the PDF version than the web page version, due to page sizes. 
I surmise that fixing the one on the page will fix the PDF document as well.

 

01.<telerik:RadScheduler
02.    ID="Timetable"
03.    runat="server"
04.    CustomAttributeNames="Courses,Lecturers,Description,EventType,Groups,Rooms,TimeSlot"
05.    DataKeyField="EventSlotID"
06.    DataSubjectField="Rooms"
07.    DataStartField="StartDate"
08.    DataEndField="EndDate"
09.    EnableCustomAttributeEditing="true"
10.    DayEndTime="21:00:00"
11.    FirstDayOfWeek="Monday"
12.    LastDayOfWeek="Friday"
13.    SelectedView="WeekView"
14.    AllowDelete="False"
15.    AllowEdit="False"
16.    AllowInsert="False"
17.    ReadOnly="True"
18.    Height="100%"
19.    ShowFooter="true"
20.    HoursPanelTimeFormat="H:mm"
21.    TimeLabelRowSpan="4"
22.    MinutesPerRow="15"
23.    RowHeight="24px"
24.    ShowAllDayRow="False"
25.    AppointmentStyleMode="Default"
26.    ShowHeader="true"
27.    Culture="en-GB"
28.    MinimumInlineFormWidth="200"
29.    MinimumInlineFormHeight="200"
30.    Font-Size="Small"
31.    RowHeaderWidth="70px"
32.    OnNavigationComplete="Timetable_NavigationComplete"
33.    >
34.
35.    <ExportSettings OpenInNewWindow="true" FileName="Timetable">
36.        <Pdf
37.
38.             Title="Timetable"
39.            Subject="Timetable"
40.            PageRightMargin="10px"
41.            PageLeftMargin="10px"
42.            PaperSize="A4"
43.            AllowPrinting="true"
44.            AllowPaging="true"
45.            PageTitle="Timetable view"
46.            PaperOrientation="Portrait"
47.            StyleSheets="/css/export.css"
48.            />
49.    </ExportSettings>

 

01.html, body, form {
02.    margin: 0;
03.    height: 100%;
04.}
05..RadScheduler {
06.    height: 600px;
07.    width: 100%;
08.}
09.
10..rsContentScrollArea {
11.    overflow-y: scroll;
12.}
13.
14..row {
15.    margin: 0px;
16.    padding: 0px;
17.}
18..bg_color {
19.    background-color: #1dbeef;
20.}
21..page-header {
22.    color: white;
23.    margin-bottom: 1rem;
24.    border-bottom: 2px solid black;
25.    padding: 12px 25px 0px 25px;
26.    margin-bottom: 11px;
27.}
28.
29..borderedGroup {
30.    border: 1px solid black;
31.    padding-top: 5px;
32.    padding-bottom: 5px;
33.    background-color: gainsboro;
34.    height: 100%;
35.}
36.
37..center-children {
38.    display: flex;
39.    justify-content: center;
40.    align-items: center;
41.}
42.
43..buttonType {
44.    width: 100%
45.}
46.
47..removePadding {
48.    padding: 0 0 0 0;
49.}
50.
51..TimetableContainer {
52.    margin-bottom: 2rem;
53.}
54.
55..row1 {
56.    margin-bottom: 11px;
57.}
58.
59..w100 {
60.    width: 100%;
61.}
62.
63..font14 {
64.    font-size: 16px;
65.}
66.
67..rsHeader {
68.    background-color: #25a0da;
69.}
70.
71..hide {
72.    visibility: hidden !important;
73.    display: none !important;
74.}
75..align-low {
76.    align-items: flex-end;
77.    align-self: flex-end;
78.}
79..removeLeftPadding{
80.    padding-left:0px;
81.}
82..fillPage {
83.    height:calc(100vh - 100px);
84.}
85..appt {
86.    padding-right:10px !important;
87.}
88..rddlDisabled{
89.    color:lightgrey !important;
90.    opacity:1 !important;
91.}
92.
93..RadScheduler .rsVerticalHeaderWrapper {
94.    text-align: center !important;
95.}

Many regards, Megan

 

[Meg]

Sorry I forgot the screenshots

[Peter Milchev]

Hello Meg,

The row header issue is fixed by removing one pixel from the width of the .rsSpacerCell element and the div inside it. 

<telerik:RadCodeBlock runat="server">
    <script>
        function fixSchedulerHeaderWidth() {
            var scheduler = $find("<%= RadScheduler1.ClientID %>");
            $telerik.$(scheduler.get_element()).find("td.rsSpacerCell, td.rsSpacerCell div").css("width", "69px")
        }
        Sys.Application.add_load(fixSchedulerHeaderWidth);
    </script>
</telerik:RadCodeBlock>

Regarding the export, the server PDF export creates a browser on the server to show the Scheduler and makes a snapshot of it. This browser has a rendering similar to Internet Explorer 5 and that is why only the Classic render mode is supported when exporting on the server and there are limited modifications you can make to the exported Scheduler appearance.

In PDF exporting cases, we recommend using the ClientExportManager controls as demonstrated in this code-library project: https://www.telerik.com/support/code-library/scheduler-client-pdf-export-with-clientexportmanager.

<style>
    .k-pdf-export .rsToolbar.rsNav .p-icon:before,
    .k-pdf-export .p-icon.p-i-recurrence:before {
        position: absolute;
        margin-top: -10px;
    }

    .k-pdf-export .p-icon:before {
        position: absolute;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.5/pako_deflate.min.js"></script>

<telerik:RadClientExportManager ID="RadClientExportManager1" runat="server">
</telerik:RadClientExportManager>

<telerik:RadButton runat="server" ID="RadButton1" Text="Export To PDF ClientExportManager" OnClientClicked="OnClientClicked" AutoPostBack="false" />

<telerik:RadCodeBlock runat="server">
    <script>
        function OnClientClicked(sender, args) {
            var scheduler = $find("<%= RadScheduler1.ClientID %>");
            var clientexportmanager = $find("<%= RadClientExportManager1.ClientID %>");
            clientexportmanager.exportPDF($telerik.$(scheduler.get_element()));
        }
    </script>
</telerik:RadCodeBlock>

Regards,
Peter Milchev
Progress Telerik

[Meg]

Thanks for your reply, unfortunately the fix for the header widths does not work, i wished it to be around 50px and adjusted the code accordingly but the sub-table just would not accommodate the widths (max widths or padding somewhere which ignores set widths)

Thank you for the Exporter code however, I had been struggling with the scheduler.ExportToPdf function for quite some time and this has solved my other (unstated) problems.

 

Although, I probably would not have struggled as much if this had been documented as much as (or at all) on the PDF Export page. Since this page is solely about the ExportToPdf function with a single link at the bottom for the RadClientExportManager. 

Thank you for your reply, sadly it didn't fix my problems and I since they are only cosmetic changes I am unlikely to spend too much more time on it. 

Meg

 

[Peter Milchev]

Hello Meg,

Thank you for the recommendations, we will improve the demos and documentation on the Scheduler Export functionality.

Regarding the misalignment issue, we have logged a bug in our feedback portal - Misalignment of hours and content columns when RowHeaderWidth property is set. You can vote for it and subscribe it to get notified when there is any progress on it.

As a small token of gratitude for helping us identify these issues, we have updated your Telerik points.

Regards,
Peter Milchev
Progress Telerik