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

Checkbox event in Custom editor

1 Answer 338 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Kevork
Top achievements
Rank 2
Kevork asked on 22 Oct 2015, 04:48 AM

I have a checkbox (chkRecurring) in the custom editor of the scheduler. I need to show/hide a div (divRecurring) clicking the checkbox. I wrote jquery click event but it doesn't work. And it doesn't throw any error in firebug or any other browser console.

 

@(Html.Kendo().Scheduler<TaskViewModel>()
                                    .Name("schedulerJob")
                                    .Date(DateTime.Today)
                                    .StartTime(7, 0, 0)
                                    .Height(700)
                                    .Views(views =>
                                    {
                                        views.DayView();
                                        views.WeekView();
                                        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");
                                    })
                                    .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"));
                                    })
                                )

 

<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">
                                                    <label for="Start">Job Time:</label>
                                                </td>
                                                <td>
                                                    <input type="text" id="jobTimeTextbox" class="k-input k-textbox" name="start" data-bind="value: StartViewTime">
                                                </td>
                                                <td align="right">
                                                    <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" data-bind="value: Duration">
                                                        @foreach (var dur in (List<ServicePROWeb.ServiceProWCFService.TypeMstr>)HttpContext.Current.Session["DurationList"])
                                                        {
                                                            <option value='@dur.ty_code_desc'>@dur.ty_code_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">Recurring Reservation
                                                </td>
                                            </tr>
                                        </table>
                                        <br />
                                        <div id="divRecurring" style="width: 95%; margin-left: 5px; padding: 10px;">
                                            <input type="radio" name="rdoTech" value="c" checked="checked">Current Tech
                                            <input type="radio" 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: RecurrenceNumber">
                                            <input type="radio" name="rdoRecurrenceFrequency" value="d" checked="checked" style="margin-left: 15px;">Day(s)
                                            <input type="radio" name="rdoRecurrenceFrequency" value="w" style="margin-left: 15px;">Weeks(s)
                                            <input type="radio" name="rdoRecurrenceFrequency" value="m" style="margin-left: 15px;">Month(s)
                                            <br /><br />
                                            <input type="checkbox" id="chkIncludeBusinessDays">Include Non-Business Days
                                            <span style="margin-left: 30px;">Until: </span><input type="text" id="untilDateTextbox" class="k-input k-textbox" name="until">
                                            <span style="margin-left: 15px;">(max. 3 months)</span>
                                        </div>
                                    </div>
                                </script>
 

$('#chkRecurring').click(function () {
    $("#divRecurring1").hide();
});
 

Thanks

1 Answer, 1 is accepted

Sort by
0
Kevork
Top achievements
Rank 2
answered on 22 Oct 2015, 05:42 AM

I solved it like this

<input type="checkbox" id="chkRecurring" onmouseup="toggleRecurringDiv()">

Tags
Scheduler
Asked by
Kevork
Top achievements
Rank 2
Answers by
Kevork
Top achievements
Rank 2
Share this question
or