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

How to initialize the model in the create event popup

10 Answers 238 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 14 Jan 2017, 03:46 AM

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>

 

/* rest is left out for brevity but its stock code for event template */

 

 

10 Answers, 1 is accepted

Sort by
0
Scott
Top achievements
Rank 1
answered on 14 Jan 2017, 03:52 AM

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.

0
Scott
Top achievements
Rank 1
answered on 14 Jan 2017, 03:57 AM
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.
0
Scott
Top achievements
Rank 1
answered on 14 Jan 2017, 09:41 PM

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.

0
Veselin Tsvetanov
Telerik team
answered on 17 Jan 2017, 04:17 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott
Top achievements
Rank 1
answered on 18 Jan 2017, 01:59 AM

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();
      }
   }

 

 

0
Veselin Tsvetanov
Telerik team
answered on 19 Jan 2017, 10:14 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott
Top achievements
Rank 1
answered on 19 Jan 2017, 02:21 PM

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?

0
Scott
Top achievements
Rank 1
answered on 19 Jan 2017, 02:25 PM

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!

0
n/a
Top achievements
Rank 1
answered on 30 May 2019, 06:35 PM

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>

0
Veselin Tsvetanov
Telerik team
answered on 03 Jun 2019, 10:36 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Scheduler
Asked by
Scott
Top achievements
Rank 1
Answers by
Scott
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
n/a
Top achievements
Rank 1
Share this question
or