Separate AngularJS controller for Editor window

[Loeschke]

Hello.

I'm using Scheduler with AngularJS. I have custom editor template, which is defined as follows:

01.<div kendo-scheduler="main.calendar" k-options="main.schedulerOptions" id="scheduler" class="full-height">
02.
03.        <div k-event-template class='custom-event event-font-small event-left-margin'>
04.          {{dataItem.title}}
05.        </div>
06.
07.        <script id="customEditorTemplate" type="text/x-kendo-template">
08.            <div class="k-edit-label"><label for="projectNumber">Проект</label></div>
09.            <div data-container-for="projectNumber" class="k-edit-field">
10.                <select kendo-combo-box k-options="main.projectListOptions"
11.                        name="projectNumber"
12.                        required="required" data-required-msg="Код проекта обязателен для заполнения" data-bind="value:projectId" />
13.            </div>
14.
15.            <div class="k-edit-label"><label for="title">Тема</label></div>
16.            <div data-container-for="title" class="k-edit-field">
17.                <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
18.            </div>
19.
20.            <div class="k-edit-label"><label for="activityType">Вид деятельности</label></div>
21.            <div data-container-for="activityType" class="k-edit-field">
22.                <select kendo-combo-box k-options="main.activityTypeListOptions"
23.                        name="activityType" data-bind="value:activityTypeId"/>
24.            </div>
25.
26.            <div class="k-edit-label">
27.                <label for="start">Начало</label>
28.            </div>
29.            <div data-container-for="start" class="k-edit-field">
30.                <input type="text"
31.                       data-role="datetimepicker"
32.                       data-interval="15"
33.                       data-type="date"
34.                       data-bind="value:start,invisible:isAllDay"
35.                       name="start" />
36.                <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" />
37.                <span data-bind="text: startTimezone"></span>
38.                <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
39.            </div>
40.            <div class="k-edit-label"><label for="end">Окончание</label></div>
41.            <div data-container-for="end" class="k-edit-field">
42.                <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
43.                <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
44.                <span data-bind="text: endTimezone"></span>
45.                <span data-bind="text: startTimezone, invisible: endTimezone"></span>
46.                <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
47.            </div>
48.
49.            <div data-container-for="comments" class="k-edit-field">
50.                <textarea name="comments" class="k-textbox" data-bind="value:comments"></textarea>
51.            </div>
52.        </script>
53.
54.        <div k-all-day-event-template class='custom-all-day-event'>
55.            {{dataItem.title}}
56.        </div>
57.
58.        <div k-date-header-template>
59.            <strong>#=kendo.toString(date, 'd')#</strong>
60.        </div>
61.    </div>

And I have routes configured as follows:

01.function routeConfig($routeProvider) {
02.        $routeProvider
03.            .when('/', {
04.                templateUrl: 'app/main/main.html',
05.                controller: 'CalendarCtrl',
06.                controllerAs: 'main'
07.            })
08.            .otherwise({
09.                redirectTo: '/'
10.            });
11.    }

 

So the main question is: how I can place editor-specific logic in another controller?

 And another question: how I can place nested templates (such as k-event-template or custom editor template) in custom angular directives? Is there any examples or guidelines for this?

[Vladimir Iliev]

Hello,

Please check the answers of your questions below:

• how I can place editor-specific logic in another controller - this behavior is not supported out of the box (the editors are rendered inside window widget), however I would suggest to share your idea at Kendo UI UserVoice portal to allow other users vote for it. Most voted ideas are included in next Kendo UI releases.
• how I can place nested templates (such as k-event-template or custom editor template) in custom angular directives - nesting templates in custom angular directives is not supported out of the box and custom solution would be required (which falls outside the scope of our support service).

Regards,
Vladimir Iliev
Telerik

 

 

[Loeschke]

Hello, Vladimir.

Thanks for your answer!