How to initialize the model in the create event popup

9 posts, 0 answers
  1. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 13 Jan Link to this post

    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 */

     

     

  2. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 13 Jan in reply to Scott Link to this post

    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.

  3. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 13 Jan in reply to Scott Link to this post

    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.
  4. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 14 Jan Link to this post

    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.

  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    487 posts

    Posted 17 Jan Link to this post

    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.
  6. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 17 Jan in reply to Veselin Tsvetanov Link to this post

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

     

     

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    487 posts

    Posted 19 Jan Link to this post

    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.
  8. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 19 Jan in reply to Veselin Tsvetanov Link to this post

    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?

  9. Scott
    Scott avatar
    8 posts
    Member since:
    Dec 2015

    Posted 19 Jan in reply to Scott Link to this post

    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!

Back to Top