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

Embed scheduler in the tabstrip

8 Answers 59 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
amp
Top achievements
Rank 1
amp asked on 17 Sep 2013, 12:31 PM
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

8 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 17 Sep 2013, 03:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
amp
Top achievements
Rank 1
answered on 17 Sep 2013, 08:43 PM
Hi Rosen,

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

regards
amp
0
amp
Top achievements
Rank 1
answered on 17 Sep 2013, 09:54 PM
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
0
Rosen
Telerik team
answered on 18 Sep 2013, 06:11 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pascal
Top achievements
Rank 1
answered on 15 Nov 2013, 08:17 AM
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.
0
Rosen
Telerik team
answered on 15 Nov 2013, 12:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pascal
Top achievements
Rank 1
answered on 15 Nov 2013, 01:33 PM
This works.

Thx
0
Martin
Top achievements
Rank 1
answered on 22 Nov 2013, 10:53 PM
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);
Tags
Scheduler
Asked by
amp
Top achievements
Rank 1
Answers by
Rosen
Telerik team
amp
Top achievements
Rank 1
Pascal
Top achievements
Rank 1
Martin
Top achievements
Rank 1
Share this question
or