Checkbox event in Custom editor

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

    Posted 21 Oct 2015 Link to this post

    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

  2. Kevork
    Kevork avatar
    39 posts
    Member since:
    May 2015

    Posted 22 Oct 2015 in reply to Kevork Link to this post

    I solved it like this

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

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