Embed scheduler in the tabstrip

[amp]

Hi,

I am using the Kendo UI Web v2013.2.716. I am trying to create the scheduler within a tabstrp. however when the page first lauched the tabstrip is not able to render the scheduler. strangely if i click the day or week view the UI will refresh and tabstrip will be able to render the scheduler properly.  even more bizzarly, if i enable developper tool in chrome or firebug tool in FF then switch off the tools, the misformed problem will go away too.

the code i am using is very basic code from the demo. code attached

01.$("#scheduler").kendoScheduler({
02.        date: new Date("2013/6/13"),
03.        startTime: new Date("2013/6/13 07:00 AM"),
04.        height: 300,
05.        views: [
06.            {type:"day",selected:true},
07.            { type: "week"},
08.            "month"
09.        ],
10.        timezone: "Etc/UTC",
11.        dataSource: {
12.            batch: true,
13.            transport: {
14.                read: {
15.                    url: "http://demos.kendoui.com/service/tasks",
16.                    dataType: "jsonp"
17.                },
18.                parameterMap: function(options, operation) {
19.                    if (operation !== "read" && options.models) {
20.                        return {models: kendo.stringify(options.models)};
21.                    }
22.                }
23.            },
24.            schema: {
25.                model: {
26.                    id: "taskId",
27.                    fields: {
28.                        taskId: { from: "TaskID", type: "number" },
29.                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
30.                        start: { type: "date", from: "Start" },
31.                        end: { type: "date", from: "End" },
32.                        startTimezone: { from: "StartTimezone" },
33.                        endTimezone: { from: "EndTimezone" },
34.                        description: { from: "Description" },
35.                        recurrenceId: { from: "RecurrenceID" },
36.                        recurrenceRule: { from: "RecurrenceRule" },
37.                        recurrenceException: { from: "RecurrenceException" },
38.                        ownerId: { from: "OwnerID", defaultValue: 1 },
39.                        isAllDay: { type: "boolean", from: "IsAllDay" }
40.                    }
41.                }
42.            },
43.            filter: {
44.                logic: "or",
45.                filters: [
46.                    { field: "ownerId", operator: "eq", value: 1 },
47.                    { field: "ownerId", operator: "eq", value: 2 }
48.                ]
49.            }
50.        },
51.        resources: [
52.            {
53.                field: "ownerId",
54.                title: "Owner",
55.                dataSource: [
56.                    { text: "Alex", value: 1, color: "#f8a398" },
57.                    { text: "Bob", value: 2, color: "#51a0ed" },
58.                    { text: "Charlie", value: 3, color: "#56ca85" }
59.                ]
60.            }
61.        ]
62.    });

I have tried to alternate the squence of creating the tabstrip and scheduler but that did not fix the problem.  on the same tabstrip (different tab) i have a grid which is linked to a remote datasource. there is no problem for the tabstrip to host the grid.


I have also attached the screenshots.

Many thanks
amp

[Rosen]

Hi amp,

The behavior you have described is caused by the fact that the Scheduler widget is not visible, thus it cannot be sized correctly. In this case you will need to manually call its refresh method when the TabStrip view is displayed. For example:

$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    $("#scheduler").data("kendoScheduler").refresh();
  }
});

Regards,
Rosen
Telerik

[Pankaj]

Hi Rosen

I am not using the Tabstrip but  I have embed it under the div tag with data-toggle="tab" and  aria-expanded="false", how can I implement the same, I have tried  both the methods on div tab click event handler but its not working.

Methods I have tried :-

 $("#scheduler").data("kendoScheduler").refresh();

   and 

var scheduler = $("#Therapistscheduler").data("kendoScheduler");
    scheduler.view(scheduler.view().name);

 

Thanks & Regards

[amp]

Hi Rosen,

Thanks for the reply. Refreshing tabstrip activation fixed the problem.

regards
amp

[amp]

Hi Rosen,

Can you please explain a little more on the sequence of event while the UI widgets are initialised? i am pretty new to Javascript in general. how is being not visible causing the format problem?

Also did you guys realize the scheduler does not render properly in chrome (or at least certain version of) see the screen print of how the demo page is rendered.

thanks
AMP

[Rosen]

Hi,

Being not visible, browser will not report scheduler elements dimensions. Thus the logic to adjust the layout will not work and a manual refresh will be required.

Regarding the issue in chrome, I'm afraid that I'm unable to observe it locally. Please at a look at the attached screenshot.

Regards,
Rosen
Telerik

[Pascal]

I have the same Problem.
Refreshing after activating will be better, but lines are shifted down.
After refreshing a second time (by changing day for example), it is good.

Is it because the activate event is call before the animation ?

See Screenshots.

[Rosen]

Hi Pascal,

In this case you may consider re-selecting the view instead using the refresh method.

$("#tabstrip").kendoTabStrip({
  activate: function(e) {
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.view(scheduler.view().name);
  }
});

Regards,
Rosen
Telerik

[Pascal]

This works.

Thx

[Martin]

I used the Expand method and called it after the duration of the expansion (default 200)

var scheduler = $("#scheduler").data("kendoScheduler");
               setTimeout(function () {
                   //scheduler.view(scheduler.view().name);
                   $("#scheduler").data("kendoScheduler").refresh();
               }, 201);