How to initialize the model in the create event popup

[Scott]

I have the custom edit template working great for my scheduler.  For updates of events, or creation of new events it works great after following all your examples.I am hung up on one item however.  In my custom template i want to show a user name.  This user name is populated in the model that is sent to the scheduler event.  This works fine for when you modify events.  however if i double click to create a brand new event, the model fields that are passed to the custom editor template are all empty.  I can add an event to the scheduler to trap the "Add" event (which is what is called when double clicking to add a BRAND NEW event).  But how do i send a filled-in model to that editor template?

FYI, using mvc5 with razor pages:

Here is the scheduler view page:

@(Html.Kendo().Scheduler<Sp.Models.TaskViewModel>()

            .Name("scheduler")

            .StartTime(new DateTime(2016, 10, 1, 7, 00, 00))

            .Height(600)

            .Editable( e => e.TemplateName( "SchedulerEditTemplate" ) )

            .Views(views =>

            {

               views.DayView();

               views.WeekView(weekView => weekView.Selected(true));

               views.MonthView();

               views.AgendaView();

            })

            .Timezone("Etc/UTC")

            .Events( e =>

            {

               e.Add( "OnAddEvent" );

            })

            .DataSource(d => d

               .Model(m =>

               {

                  m.Id(f => f.TaskID);

                  m.Field(f => f.OwnerID);

                  m.RecurrenceId(f => f.RecurrenceID);

                  m.Field( f => f.IsAllDay );

                  m.Field( f => f.OwnerName );                   

               })

               .Read(    "Tasks_Read",    "Scheduler" )

               .Create(  "Tasks_Create",  "Scheduler" )

               .Destroy( "Tasks_Destroy", "Scheduler" )

               .Update(  "Tasks_Update",  "Scheduler" )

            )

)

  

<script>

   function OnAddEvent() {

      alert("add");

   }

</script>

 

HERE is 

custom template:

@model Sp.Models.TaskViewModel

<div class="k-edit-label"><label>Event Creator</label></div>
<div class="k-edit-field" >
   <span data-bind="text: OwnerName"></span>
</div>

 

 

[Scott]

I wanted to add some more info:  when you edit an existing scheduler event, the model is populated and is sent to the event template, and the owner name IS displayed at the top of the popup window.  So, the field IS properly stored in the db, and is properly read via the Tasks_Read event.....and is properly sent to the "Tasks_Update" server side handlers.

 

It seems to me that when the Add event occurs, the client side code is just creating an empty model and sending that to the popup window.

 

In my use case, i always know the owner because they are the currently logged in user, so all events on a page will have same owner, so i would like to populate that info on the popup event window via the template and mvvm model params.

 

thx.

[Scott]

I wanted to clarify that within my view I know the owner name and want to populate that into the model upon the add event, so that it can be displayed in the Create Event template.  So if there is some magic javascript / jquery code that i can use to intercept the empty model creation prior to sending to the event template window, then that should fix it.

[Scott]

Getting a little closer.....i realize that inside the OnAddEvent() javascript, the e parameter has a field called "event" which is the data that will be used by the scheduler to create a new kendo.data.SchedulerEvent object.   That "event" object that i have access to in the javascript only has the start and end fields...which are filled in based on which time slot in the scheduler view that i selected.

I am fearing that i may not have access to the kendo data object after it is constructed and sent to the popup view.

[Veselin Tsvetanov]

Hello Scott,

To achive the desired you could handle both the add and edit events. In the add event you set a flag, that the Scheduler enters in edit mode with a new event being created, while in the edit event you could populate the actual value of the owner.

Here you could find a simple demo, implementing the above.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Scott]

Thanks Vesselin, this approach works fine.  I am wondering it is safe to use the TaskID being equal to 0 to indicate that the edit event is being called on a NEW task.  This would be a shortcut to avoid having to override the Add  event and set a flag.

 

The key issue to solve this problem was realizing the Add AND the Edit events are fired on a new task...and the add comes first, but the Edit event comes AFTER the model is initialized, so modifying the model inside the Edit event gives our code a crack at modifying the model fields prior to display.  FYI, you can get access to the model data used by the scheduler with this magic:

 

function OnEditEvent(e) {

      var ev = e.event;
      if (ev.TaskID == 0) {
         ev.OwnerName = '@Model.OwnerName';
         ev.OwnerOrgName = '@Model.OwnerOrgName';
      }
      else if (ev.OwnerID != '@Model.OwnerID')
      {
         alert("Assigned By " + ev.OwnerName);
         e.preventDefault();
      }
   }

 

 

[Veselin Tsvetanov]

Hi Scott,

You could safely avoid using the add handler, by checking the event object in the edit handler in the following way:

edit: function(e) {
  if (e.event.isNew()) {
    // The event is new
  }
}

Thank you for the Model accessing logic, that you have shared.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Scott]

Veselin,

in the edit handler, the e.event object is of type kendo.data.SchedulerEvent.  I understand that this is my scheduler model that i defined - so it has the fields in the class that i defined.  But i couldn't find in the documentation all the "base methods" available to my event object.  Methods such as isNew() that you use above.  Where would i find that document for avialable methods in the base object?

[Scott]

I answered my own question:

kendo.data.scheduler event inherits from kendo.data.model.  Documented here: http://docs.telerik.com/kendo-ui/api/javascript/data/model

kendo.data.model has the isNew() method.

 

thanks!

[n/a]

Hi Scott,
i have small doubt here i also tried like this in MVC Razor syntax,  but in your code i have small doubt can you explain me little bit more, because this complete line am not getting what your wrote here. and where i should i write this all <div> part. because i am first time using this Scheduler. so can you help me please.

.Editable( e => e.TemplateName( "SchedulerEditTemplate" ) )
@model Sp.Models.TaskViewModel
<div class="k-edit-label"><label>Event Creator</label></div>
<div class="k-edit-field" >
<span data-bind="text: OwnerName"></span>
</div>

[Veselin Tsvetanov]

Hello Ravi,

The Scheduler edit template should be defined in a separate view placed in the Views\Shared\EditorTemplates\ folder. In your case that view should be called "​SchedulerEditTemplate.cshtml" and should contain the template definition:

@model Sp.Models.TaskViewModel

<div class="k-edit-label"><label>Event Creator</label></div>
<div class="k-edit-field" >
<span data-bind="text: OwnerName"></span>
</div>
...

Regards,
Veselin Tsvetanov
Progress Telerik