Get resource on single click

7 posts, 0 answers
  1. Kevork
    Kevork avatar
    39 posts
    Member since:
    May 2015

    Posted 02 Nov 2015 Link to this post

    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

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 04 Nov 2015 Link to this post

    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): 

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kevork
    Kevork avatar
    39 posts
    Member since:
    May 2015

    Posted 04 Nov 2015 in reply to Vladimir Iliev Link to this post

    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.

     

     

     

     

     

     

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 05 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Kevork
    Kevork avatar
    39 posts
    Member since:
    May 2015

    Posted 05 Nov 2015 in reply to Vladimir Iliev Link to this post

    Thanks a lot. It is working.

  7. James
    James avatar
    9 posts
    Member since:
    Feb 2016

    Posted 12 Feb Link to this post

    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 addEvent 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]
            })

     

  8. James
    James avatar
    9 posts
    Member since:
    Feb 2016

    Posted 12 Feb in reply to James Link to this post

    Please ignore the error was in 

     

    data_bind = "value:EventAgendaDayStreamId[0]"

     

    when I changed to

    data_bind = "value:EventAgendaDayStreamId"

     

    It works

     

    cheers

Back to Top
UI for ASP.NET MVC is VS 2017 Ready