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

Custom editor template using Angularjs directive

5 Answers 66 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nithin
Top achievements
Rank 1
Nithin asked on 02 Jun 2018, 11:45 AM

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?

5 Answers, 1 is accepted

Sort by
0
Nithin
Top achievements
Rank 1
answered on 02 Jun 2018, 11:57 AM
0
Nithin
Top achievements
Rank 1
answered on 02 Jun 2018, 11:57 AM
0
Dimitar
Telerik team
answered on 05 Jun 2018, 11:51 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nithin
Top achievements
Rank 1
answered on 05 Jun 2018, 12:45 PM

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...

0
Dimitar
Telerik team
answered on 06 Jun 2018, 12:04 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Nithin
Top achievements
Rank 1
Answers by
Nithin
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or