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

Separate AngularJS controller for Editor window

2 Answers 76 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Loeschke asked on 18 Sep 2015, 06:31 AM


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">
03.        <div k-event-template class='custom-event event-font-small event-left-margin'>
04.          {{dataItem.title}}
05.        </div>
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>
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>
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>
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>
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>
54.        <div k-all-day-event-template class='custom-all-day-event'>
55.            {{dataItem.title}}
56.        </div>
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?

2 Answers, 1 is accepted

Sort by
Vladimir Iliev
Telerik team
answered on 22 Sep 2015, 09:47 AM

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).
Vladimir Iliev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
answered on 23 Sep 2015, 06:06 AM

Hello, Vladimir.

Thanks for your answer!

Asked by
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Top achievements
Rank 1
Share this question