Custom editor template using Angularjs directive

[Nithin]

Hi,
I'm trying to create a custom editor template for the scheduler using angularjs. But I'm facing some issues while using ng-model  inside the script tag for editor.

I also tried implement a custom editor using a custom directive in Angularjs but on doing so I was able to get the data first time on the editor and when closing the editor and clicking another event for editing I get the same error and even the editor won't display. Can you guys identify what is causing this error ?

Error I'm getting while using ng-model inside script tag for custom editor
 How can I overcome this?

[Nithin]

Another example I tried but with directive this time

[Nithin]

Another example I tried but with directive this time

[Dimitar]

Hello Nithin,

The Kendo UI Scheduler's edit template is not available as nested directive. Therefore, using it requires specifying a template inside the widget options. However, regular templates are not being evaluated against the AngularJS scope, thus leading to the observed error.

In this case, binding the event data to the editor template could be achieved by binding the input elements via the data-bind attribue to the name of name field of the event model:

<div data-container-for="title" class="k-edit-field">
  <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
</div>

The above is also demonstrated in the Customize Edit and Events Templates HowTo article.

Regards,
Dimitar
Progress Telerik

[Nithin]

Hi,
Thanks for clearing that up.
So, I have started using the way described above but one issue I'm facing is that on first edit of the event all the input of custom editor are coming as null and no error is showing and from second click things are working fine as expected.

FYI-I'm using a custom directive from which I'm loading this editor...

[Dimitar]

Hello Nithin,

On the following Dojo example you can find an updated version of the last example that you have attached (suing custom directive to insert the markup inside the Scheduler's edit template). With it, the title, start and end fields of the event are correctly bound to the form and display the saved results accordingly.

In order to be able to bind a value to the form correctly, it has to be part of the event model:

1) In the current scenario, the event data is received in the following format:

{
  "TaskID":1,
  "RoomID":1,
  "Title":"Say Hello",
  "Description":"Reminder For Saying Hello",
  "firstname":"Nithin",
  "lastname":"P H",
  ...
}

2)Then, the Scheduler event fields are described and mapped to the fields returned from the source in the dataSource schema:

schema: {
  model: {
    id: "taskId",
    fields: {
      taskId: { from: "TaskID", type: "number" },
      title: { from: "Title", defaultValue: "No title", validation: { required: true } },
      start: { type: "date", from: "Start" },
      end: { type: "date", from: "End" },
    }
  }
}

The SchedulerEventObject that is available in the template is built using the fields defined in the schema (e.g taskId, title, start, end). Therefore, when modifying the template, the described field names in the schema have to be used.

Regards,
Dimitar
Progress Telerik