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

Get resource on single click

6 Answers 274 Views

Scheduler

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

Kevork asked on 03 Nov 2015, 04:09 AM

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>

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

6 Answers, 1 is accepted

answered on 05 Nov 2015, 02:56 AM

1.jpg

2.jpg

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.

answered on 05 Nov 2015, 10:09 AM

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

answered on 12 Feb 2016, 12:01 PM

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]

})