Get resource on single click

[Kevork]

I am working on single click for ASP.NET MVC scheduler. But the problem is when the custom event editor pop ups, there is only startdate and endate. How can I get other resource such as TechName?

 

@(Html.Kendo().Scheduler<TaskViewModel>()
                                    .Name("schedulerJob")
                                    .Date(DateTime.Today)
                                    .StartTime(7, 0, 0)
                                    .Height(700)
                                    .EventTemplate("#if(title == 'Reservation') {#" +
                                                    "<div class='reservationClass' style='float: left;'>" +
                                                    "<img src='http://www.alegoo.com/images05/newyear/calendar-b11/015/calendar-icon-15.png' style='width:22px;' />" +
                                                        "#= title #" +
                                                    "</div>" +
                                                    "#}" +
                                                    "else {#" +
                                                    "<div class='jobClass' style='float: left;'>" +
                                                    "<img src='http://www.gratispos.com/wp-content/uploads/2011/06/User-Group-Home.png' style='width:22px;' />" +
                                                        "#= title #" +
                                                    "</div>" +
                                                    "#}#")
                                    .Views(views =>
                                    {
                                        views.TimelineView(v => v.Selected(true));
                                    })
                                    .Events(e =>
                                    {
                                        e.Edit("schedulerJob_edit");
                                        e.Navigate("schedulerJob_navigate");
                                        e.Remove("schedulerJob_remove");
                                        e.Save("schedulerJob_save");
                                        e.DataBinding("schedulerJob_dataBinding");
                                        e.DataBound("schedulerJob_dataBound");
                                        e.MoveEnd("schedulerJob_moveend");
                                        e.ResizeEnd("schedulerJob_resizeend");
                                    })
                                    .Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))
                                    .Resources(resource =>
                                    {
                                        resource.Add(m => m.TechName)
                                            .Title("Techs")
                                            .Name("Techs")
                                            .DataTextField("TechName")
                                            .DataValueField("emm_code")
                                            .DataSource(d => d.Read("Techs", "JOBS"));
                                    })
                                    .DataSource(d => d
                                        .Model(m =>
                                        {
                                            m.Id(r => r.emm_code);
                                        })
                                        .ServerOperation(true)
                                        .Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))
                                        .Create("JobSchedule_Create", "JOBS")
                                        .Update("JobSchedule_Update", "JOBS")
                                        .Destroy("JobSchedule_Delete", "JOBS")
                                    )
                                    .Editable(e => {
                                        e.TemplateId("schedulerJobEditor").Window(w => w.Title("Time Slot Reservation").Name("schedulerJobEditor"));
                                    })
                                )

 

 Custom editor code

<script id="schedulerJobEditor" type="text/x-kendo-template">
                                    <div>
                                        <table style="border-collapse: initial;">
                                            <tr>
                                                <td align="right">
                                                    <label for="Start">Job Date:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="jobDateTextbox" class="k-input k-textbox" name="start" data-bind="value: StartViewDate" style="border-width: 0px;" disabled="disabled">
                                                </td>
                                                <td align="right">
                                                    <label for="ReservedDate">Reserved On:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="reservedDateTextbox" class="k-input k-textbox" name="reservedDate" data-bind="value: ReservationViewDate" style="border-width: 0px;" disabled="disabled">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td align="right" width="25%">
                                                    <label for="StartViewTime">Job Time:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="jobTimeTextbox" class="k-input k-textbox" name="start" oninput="JobTimeInput()" onblur="JobTimeBlur()" data-bind="value: StartViewTime">
                                                    <input type="hidden" id="keyFlagTextbox" class="k-input k-textbox" name="keyflag" data-bind="value: KeyFlag">
                                                </td>
                                                <td align="right" width="14%">
                                                    <label for="ReservedTime">Time:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="reservedTimeTextbox" class="k-input k-textbox" name="reservedTime" data-bind="value: ReservationViewTime" style="border-width: 0px;" disabled="disabled">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td align="right">
                                                    <label for="Duration">Duration:</label>
                                                </td>
                                                <td>
                                                    <select name="duration" id="durationDropDownList" onchange="DurationChange()" data-bind="value: Duration">
                                                        @foreach (var dur in (List<ServicePROWeb.ServiceProWCFService.TypeMstr>)HttpContext.Current.Session["DurationList"])
                                                        {
                                                            <option value='@dur.ty_desc'>@dur.ty_desc</option>
                                                        }
                                                    </select>
                                                </td>
                                                <td align="right">
                                                    <label for="ReservationID">Reservation ID:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="reservationIDTextbox" class="k-input k-textbox" name="reservationID" data-bind="value: ReservationID" style="border-width: 0px;width:100%" disabled="disabled">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td align="right">
                                                    <label for="TechName">Tech:</label>
                                                </td>
                                                <td colspan="3">
                                                    <input type="text" class="k-input k-textbox" name="techName" data-bind="value: TechName" disabled="disabled">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td align="right">
                                                    <label for="Title">Reason for Reservation:</label>
                                                </td>
                                                <td colspan="3">
                                                    <input type="text" class="k-input k-textbox" name="title" data-bind="value: title" style="width: 60%;">
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>

                                                </td>
                                                <td colspan="3">
                                                    <input type="checkbox" id="chkRecurring" data-bind="value: IsRecurring" onmouseup="toggleRecurringDiv()">Recurring Reservation
                                                </td>
                                            </tr>
                                        </table>
                                        <br />
                                        <div id="divRecurring" style="width: 95%; margin-left: 5px; padding: 10px;display: none;">
                                            <input type="radio" class="rdoTech" name="rdoTech" value="c" checked="checked">Current Tech
                                            <input type="radio" class="rdoTech" name="rdoTech" value="a" style="margin-left: 15px;">All Techs
                                            <span style="margin-left: 24px;">Every: </span><input type="text" id="everyTextbox" class="k-input k-textbox" name="recurrenceNumber" data-bind="value: Frequency">
                                            <input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="d" checked="checked" style="margin-left: 15px;">Day(s)
                                            <input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="w" style="margin-left: 15px;">Weeks(s)
                                            <input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="m" style="margin-left: 15px;">Month(s)
                                            <br /><br />
                                            <input type="checkbox" id="chkIncludeBusinessDays" data-bind="value: IsNonBusinessDaysIncluded">Include Non-Business Days
                                            <label for="UntilDate" style="margin-left: 30px;">Until: </label>
                                            <input type="text" id="untilDateTextbox" class="k-input k-textbox" name="UntilDate" data-bind="value: UntilDate">
                                            <span style="margin-left: 15px;">(max. 3 months)</span>
                                        </div>
                                    </div>
                                </script>

 

Script for single click. Only startdate and endate are being passed for the new event. How can I pass other resource like "TechName" here.

 

$(function () {

    var scheduler = $("#schedulerJob").data("kendoScheduler");

    $("#schedulerJob").on("mouseup touchend", ".k-scheduler-table td, .k-event", function (e) {
        target = $(e.currentTarget);
        ee=e;
        if (target.hasClass("k-event")) {
            var event = scheduler.occurrenceByUid(target.data("uid"));
            scheduler.editEvent(event);
        } else {
            slot = scheduler.slotByElement(target[0]);

            scheduler.addEvent({
                start: slot.startDate,
                end: slot.endDate
            });
        }
    });
})

 

Thanks

[Vladimir Iliev]

Hello Kevork,

Please note that the editors inside the Scheduler edit template are bind using MVVM - that why you can add the desired editor and set the "data-bind" attribute to the field that you need to edit. For more information you can check the following help article (fields from ISchedulerEvent interface should start with lowercase): 

• MVVM overview

Regards,
Vladimir Iliev
Telerik

[Kevork]

I have already considered data-bind for the field (TechName) which I want to show on my custom popup editor.

Here is the code:

<input type="text" class="k-input k-textbox" name="techName" data-bind="value:TechName" disabled="disabled">

The I tried the below code for single click but TechName isn't coming:

$(function () {
   var scheduler = $("#schedulerJob").data("kendoScheduler");

   scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function (e) {
            var target = $(e.currentTarget);

            if (target.hasClass("k-event")) {
                var event = scheduler.occurrenceByUid(target.data("uid"));
                scheduler.editEvent(event);
            } else {
                var slot = scheduler.slotByElement(target[0]);

                scheduler.addEvent({
                    start: slot.startDate,
                    end: slot.endDate,

                           TechName: slot.TechName  

                });
            }
        });
    })

But it returns nothing.

If I don't use the above javascript code for single click, the TechName appears.

 

 

 

 

 

 

[Vladimir Iliev]

Hi Kevork,

Thank you for the last clarification - please check the example below of how to get the current group resources correctly:

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function(e) {
  var target = $(e.currentTarget);

  if (target.hasClass("k-event")) {
    var event = scheduler.occurrenceByUid(target.data("uid"));
    scheduler.editEvent(event);
  } else {
    var slot = scheduler.slotByElement(target[0]);
    var resourceBySlot = scheduler.view()._resourceBySlot(slot);

    var eventData = $.extend({}, resourceBySlot, {
      start: slot.startDate,
      end: slot.endDate,
      TechName: slot.TechName
    });

    scheduler.addEvent(eventData);
  }
});

Regards,
Vladimir Iliev
Telerik

[Kevork]

Thanks a lot. It is working.

[James]

Hi Guys,

 

sorry for bringing this topic from dead, but I have an additional question. In my case, as a parameter of the

scheduler.addEvent({
            start: slot.startDate,
            end: slot.endDate,

 I need to send a group element. I figured out that I can get that value by using 

var resourceBySlot = scheduler.view()._resourceBySlot(slot);

...

resourceBySlot.EventAgendaDayStreamId[0]

but don't know how to pass this value inside of function.

 

My view (and this works for edit) looks like this

 

@(Html.Kendo().DropDownListFor(model => model.EventAgendaDayStreamId)
          .HtmlAttributes(new { data_bind = "value:EventAgendaDayStreamId[0]" })

 I tried the following but it doesn't work

 

scheduler.addEvent({
            start: slot.startDate,
            end: slot.endDate,
            "EventAgendaDayStreamId[0]": resourceBySlot.EventAgendaDayStreamId[0]
        })

 

[James]

Please ignore the error was in 

 

data_bind = "value:EventAgendaDayStreamId[0]"

 

when I changed to

data_bind = "value:EventAgendaDayStreamId"

 

It works

 

cheers