when i double click on an boxes on scheduler on the same page duplicate of kendo multiselects gets created  right bellow the original one.

i am using the custom template for kendo template editable functionality  to create an appointment .

inside CustomeditorTemplate there is another PO template is used to select multiple POS using multiselect

Code of index file :

------------------------------------------------------------------------------------------------------------------------------------------------

    <div class="row" style="margin-bottom: 1%;">

        <div class="col-5 ">
            <div class="row " style=" float: left; padding: inherit;">
                <div class="col-4 p-2" style="padding-left:0px"><a class="k-button k-button-icontext" style="background-color: #42B0C1; color: white; width: auto; " id="ViewAppt" href="/AMS/ConfrimedDeliveries">PO - Appointment List</a></div>


                @if (IsInternalUser == true)
                {

                    <div class="col-4 p-2"> <a class="k-button k-button-icontext" style="background-color: #ECB92B; color: white; " id="LoadingDocksScreen" href="/AMS_LoadingDock/Index"><span class="k-icon k-i-building-blocks"></span>Loading Docks</a></div>

                    <div class="col-4 p-2" style=" "> <a class="k-button k-button-icontext" style="background-color: #2B58EC; color: white; " id="dc24button" href="#">Loading Docks Screen</a></div>
                }
            </div>
        </div>



        @*<div class="col-2">
                @(Html.Kendo().DropDownListFor(m=>m)
                    .Name("locations")
                    //.OptionLabel("All")
                    .OptionLabel("Select Plant")
                    .DataTextField("LocationName")
                    .DataValueField("LocationCode")
                    .Value(strLocationCode)
                    //.AutoBind(false)
                    .Events(e => e.Select("locationsChange"))
                    //.HtmlAttributes(new { style = "width: 150px;" })
                    .DataSource(ds =>
                    {
                        ds.Read("GetLocations", "AMS_LoadingDock");
                    })
                    .Deferred()
                )
            </div>*@
        @*@(Html.Kendo().MultiSelect()
                        .Name("locations")
                        .Placeholder("Please select Plant")
                        .AutoClose(true)
                        .AutoWidth(true)
                         .TagMode(TagMode.Single)
                        //.do(true)
                        //.NoDataTemplateId("noDataTemplate")
                           .DataTextField("LocationName")
                           .Value(strLocationCode)
                           .Events(events => events.Change("locationsChange"))
                                  .HtmlAttributes(new { style = "padding-right: 1%; width:13%;" })
                .DataValueField("LocationCode")
                        .Filter("contains")
                                         .DataSource(ds =>
            {
                ds.Read("GetLocations", "AMS_LoadingDock");
            })
            .Deferred())*@

        <div class="col-7">

            <div class="row" style=" padding: inherit;">

                @(Html.Kendo().DropDownListFor(m=>m)
    .Name("locations")
    //.OptionLabel("All")
    .OptionLabel("Select Plant")
    .DataTextField("LocationName")
    .DataValueField("LocationCode")
    .Value(strLocationCode)
    //.AutoBind(false)
    .Events(e => e.Select("locationsChange"))
    .HtmlAttributes(new { @class = "float-right p-2 col-3" })
    .DataSource(ds =>
    {
        ds.Read("GetLocations", "AMS_LoadingDock");
    })
    .Deferred()
)
                @(Html.Kendo().MultiSelectFor(m=>m)
                                       .Name("Docks")
                                        .Placeholder("Select Dock")
                                        //.OptionLabel("All")
                                        // .OptionLabel("Select Docks")
                                        .TagMode(TagMode.Single)

                                       .DataTextField("dockname")
                                       .DataValueField("dockid")
                                       .Enable(false)
                                          //.AutoBind(false)
                                          .Events(e => e.Change("DockChange"))

                                          // .Events(e => e.Select("locationsChange"))
                                          //.HtmlAttributes(new { style = "width: 150px;" })
                                          //.DataSource(ds =>
                                          //{
                                          //    ds.Read("GetLocations", "AMS_LoadingDock");
                                          //})
                                          .HtmlAttributes(new { @class = "float-right p-2 col-3" })
                                       //.Filter("contains")
                                       //  .Events(e => e.Select("locationsChange"))


                                       .DataSource(source =>
                                       {

                                           source.Read(read =>
                                           {
                                               read.Action("LoadingDocks_Read1", "AMS_LoadingDock")
                                               .Data("filterDocks");
                                           })
                                           .ServerFiltering(false);
                                       })
                                       //.CascadeFrom("locations")
                                       .Deferred())
                @if (IsInternalUser == true)
                {


                    @(Html.Kendo().MultiSelectFor(m=>m)
                                                .Name("Suppliers")
                                                 .Placeholder("Select Supplier")
                                                //.OptionLabel("All")
                                                //.OptionLabel("Select Vendor")
                                                .DataTextField("VendorNo")
                                                .DataValueField("VendorNo")
                                                   .Enable(false)
                                                  .TagMode(TagMode.Single)
                                                           .Events(e => e.Change("SupplierChange"))
                                                        // .Events(e => e.Select("locationsChange"))
                                                        //   .Events(e => e.Open("locationsChange"))

                                                        // .Value(strLocationCode)
                                                        //.AutoBind(false)
                                                        //.Events(e => e.Select("locationsChange"))
                                                        //.HtmlAttributes(new { style = "width: 150px;" })
                                                        //.DataSource(ds =>
                                                        //{
                                                        //    ds.Read("GetLocations", "AMS_LoadingDock");
                                                        //})
                                                        .HtmlAttributes(new { style = "", @class = "float-right p-2 col-3" })
                                                 .DataSource(source =>
                                                 {
                                                     source.Read(read =>
                                                     {
                                                         read.Action("ReadSuppliers", "AMSAppointments")
                                                            .Data("filterSuppliers");
                                                     })
                                                     .ServerFiltering(false);
                                                 })
                                                //.CascadeFrom("locations")
                                                .Deferred()
                                            )
                }

                @if (IsInternalUser == true)
                {
                    <div class="p-2 col-2">
                        <a class="k-button  showConfigurations " style="background-color: white; color: grey; float: inline-end; " id="showConfigurations" href="#"><i class="bi bi-gear-fill"></i></a> &nbsp;
                        <button class="k-button k-button-icontext  " id="BlockTimeForDock" data-toggle="modal" data-target="#exampleModal" style="background-color: #E99414; color: white;" disabled>Block </button>
                    </div>


                }


            </div>


        </div>


        @*@if (canBookAppt == true)
            {
                <button class="k-button k-button-icontext"
                        style="background-color:#42B0C1; color: white;"
                        id="ExpectedDeliveryQueueBtn">
                    <i class="bi bi-calendar3"></i>Go to Expected Delivery Queue
                </button>
            }*@


    </div>

    <div id="schedulerContainer">
        @(Html.Kendo().Scheduler<Fellowship.Models.Appointmentmodel>()
                .Name("scheduler")
                .Date(DateTime.UtcNow)
                .Toolbar(x=>x.Pdf())

                //.WorkDayStart(startTM, 00, 00)
                //.WorkDayEnd(endTM, 00, 00)
                .MinorTickCount(1)

                .Views(views =>
                {
                    views.DayView();
                    views.MonthView(month =>
                    {
                        month.Selected(true);
                        month.EventsPerDay(8);
                        month.EventHeight("auto");
                        month.AdaptiveSlotHeight(true);
                        month.EventSpacing(5);
                    });
                })
                 .Messages(m => m.RecurrenceEditor(e => e.RecurrenceEditorTitle("View")))
                .Messages(m => m.Editor(e => e.EditorTitle("Book Appointment")))


                .DateHeaderTemplate("<strong>#=kendo.toString(date, 'dd<br> dddd')# </strong>")

                .Height(650)
                .AllDaySlot(false)
                .AutoBind(false)
                .EventTemplate("#if(!IsBlocked){# #if('" + IsInternalUser + "'=='True') {#<div class='background-lighter' style='background-color :#= Ldockcolorcode#;'></div><div style='height: #= BlurPercentage#% ;background-color :#= Ldockcolorcode#;'>&nbsp;#= VendorNo# &nbsp;#= PODisplayInfo# </div>#} else{# <div>&nbsp;Location: #= locationCode#</div> #}# #}else{# <div class='background-lighter' style='background-color : grey;'></div>#}#")
                //.EventTemplate("#if('" + IsInternalUser  + "'=='True') {#<div style='font-weight: 600'>&nbsp;PO- #= POHeader#</div><div>&nbsp;Supplier- #= VendorNo# </div><div>&nbsp;Pallet- #= TotalNoOfPallets#</div>#} else{# <div style='font-weight: 600'>&nbsp;PO- #= POHeader#</div><div>&nbsp;Location- #= locationCode#</div><div>&nbsp;Pallet- #= TotalNoOfPallets#</div> #}#")
                //.EventTemplate("<div style='font-weight: 600'>PO- #= POHeader#</div><div>&nbsp;&nbsp;Line- #= lineno#</div></p>")
                .Editable(editable =>
                {
                    editable.TemplateName("_CustomEditorTemplate").Window(w => w.Width(1100));

                    // if(canBookAppt == false)
                    // {
                    //editable.Create(false);
                    // }
                })
                .Views(views =>
                {
                    views.DayView();
                    //views.WorkWeekView(workWeekView => workWeekView.Selected(true));
                    views.WeekView(weekView => weekView.Selected(true)).SelectedDateFormat("{1:Y}");
                    views.TimelineView();
                    //views.CustomView("CustomDayView", view => view.Title("Day"));
                    //views.CustomView("CustomWeekView", view => view.Title("Week").Selected(true));
                    //views.TimelineView();
                })

                .DataSource(d => d
                    .Model(m =>
                    {
                        m.Id(f => f.TaskID);
                        m.Field(f => f.Title);
                        //m.Field(f => f.Duration);
                        m.Field(f => f.POHeader);
                        // m.Field(f => f.POs);
                        m.Field(f => f.LoadingDocks);
                        m.Field(f => f.appointmentType);
                    })
                .Read("Read", "AMSAppointments")
                .Create(c=>c.Action("Appointment_Create", "AMSAppointments"))
                .Destroy("Appointment_Delete", "AMSAppointments")
                .Update("Appointment_Update", "AMSAppointments")
                .Events(e =>
                {
                    e.RequestEnd("scheduler_RequestEnd");
                    e.RequestStart("scheduler_RequestStart");
                })
                )
                .Events(e =>
                {
                    e.DataBound("scheduler_dataBound");
                    e.Edit("scheduler_edit");
                    e.Save("scheduler_Save");
                    //e.Cancel("scheduler_Cancel");
                    ////e.Navigate("scheduler_Change");
                    //e.DataBinding("scheduler_DataBinding");
                    //e.Change("scheduler_Change");
                    //e.Add("scheduler_add");

                })
            .Mobile(MobileMode.Auto)
            .Deferred()


                    )
        @(Html.Kendo().Tooltip()
                .For("#scheduler")
                .Filter(".k-event:not(.k-event-drag-hint) > div, .k-task")
                .Position(TooltipPosition.Top)
                .Width(140)
                  //.ContentTemplateId("template")
                  .LoadContentFrom("scheduler_Tooltip", "AMSAppointments")
                .Events(events => events.RequestStart("tooltip_requestStart"))
                .Deferred()
            )
        <!--<script id="template" type="text/x-kendo-template">
                    <div class="template-wrapper text-left">

                            #var element = target.is(".k-task") ? target : target.parent();#
        #var uid = element.attr("data-uid");#
        #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
        #var model = scheduler.occurrenceByUid(uid);#

        #if(model) {#
                    <div>Supplier:  #= model.VendorNo#-->
        @*<a href="\#" class="editeventt" data-uid= #=uid# data-taskid= #=model.Title#> Supplier:  #= model.VendorNo#</a>*@
        <!--</div>
            <div>
                PO- #=model.POHeader#
            </div>
            <div>
                No. of pallets:  #=model.TotalNoOfPallets#
            </div>

            #} else {#
                <strong>No event data is available</strong>
            #}#
             </div>
        </script>-->
        @*<script id="template" type="text/x-kendo-template">
                        #var element = target.is(".k-task") ? target : target.parent();#
                #var uid = element.attr("data-uid");#
                #var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
                #var model = scheduler.occurrenceByUid(uid);#

                #if(model) {#
                        PO- #=model.POHeader#
                        <br> #=kendo.format('{0:t}',model.start)# to #=kendo.format('{0:t}',model.end)#

                #} else {#
                    <strong>No event data is available</strong>
                #}#
            </script>*@
    </div>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

CustomEditorTemplate :

<div id="appointmentDiv" class="container">



    <div class="form-group row" style="display: none;">
        <label class="control-label col-md-4"> Standing Appointment</label>
        <div class="col-md-8">
            @(Html.CheckBoxFor(model => model.isStandingApmnt))
        </div>
    </div>


    <div class="form-group row">
        <div class="col-md-4">
            @*@(Html.LabelFor(model => model.Title))*@
            <label>Title</label>
        </div>
        <div class="col-md-8" data-container-for="Title">
            @(Html.TextBoxFor(model => model.Title, new { @class = "appointmentTitle k-textbox", data_bind = "value:title", @style="width:100%;" , required = "required" }))

        </div>
    </div>

    <div class="form-group row d-none " id="titlecombobox">
        <label class="control-label col-md-4">Vendor</label>
        <div class="col-md-8" data-container-for="VendorNo">
            @(Html.TextBoxFor(model => model.VendorNo, new { @class = "", @style = "width:100%;" , @readonly = "readonly" }))
        </div>
    </div>

    <div class="form-group row " id="vendornamebox">
        <label class="control-label col-md-4">Vendor</label>
        <div class="col-md-8" data-container-for="VendorName">
            @(Html.TextBoxFor(model => model.VendorName, new { @class = "k-textbox", data_bind = "value:VendorName", @style = "width:100%;", @readonly = "readonly" }))
        </div>
    </div>

    <div class="tab-content">
        <div id="inComing" class=" form-group row tab-pane active">
            <div class="k-edit-field pofield">
                <div id="POsdropdowns"></div>
            </div>
        </div>

    </div>

    <div class="form-group row">
        @*@(Html.LabelFor(model => model.Start, "Start Date and Time", htmlAttributes: new { @class = "control-label col-md-4" }))*@
        <label class="control-label col-md-4">Start Date and Time</label>
        <div class="col-md-8" data-container-for="start">
            @(Html.Kendo().DateTimePickerFor(model => model.Start)
                        .Name("startDateTime")
                        .HtmlAttributes(new { data_bind = "value:start,invisible:isAllDay", @class = "appointmentDate", required = "required", onkeydown = "return false;" })
                        //.HtmlAttributes(new { data_bind = "value:start,invisible:isAllDay", @style = "z-index: inherit; width: 100%;", required = "required", onkeydown="return false;" })
                        //.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay"))

                        .Events(e =>
                        {
                            e.Change("StartChange");
                        }).Deferred()
                    )
            @*@(Html.Kendo().DatePickerFor(model => model.Start)
                   .Name("startDate")
                //.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay"))
                .Deferred())*@

            <span data-bind="text: startTimezone"></span>
            @*<span data-for="start" class="k-invalid-msg"></span>*@
        </div>
    </div>
    @*</div>*@

    <div class="form-group row" style="display:none">
        @(Html.LabelFor(model => model.Duration, "Duration (Minutes)", htmlAttributes: new { @class = "control-label col-md-4" }))

        <div class="col-md-8" data-container-for="recurrenceRule">
            @(Html.Kendo().DropDownListFor(model => model.Duration)
                            .DataTextField("Text")
                            .DataValueField("Value")
                            .OptionLabel("Select...")
                            //.HtmlAttributes(new { @style = "width:100%;"})
                            .HtmlAttributes(new { style = "width:100%", required = "required" })
                        .BindTo(new List<SelectListItem>() {
                             new SelectListItem() {
                                    Text = "5",
                                    Value = "5"
                                },
                            new SelectListItem() {
                                    Text = "10",
                                    Value = "10"
                                },
                                new SelectListItem() {
                                    Text = "15",
                                    Value = "15"
                                },
                                new SelectListItem() {
                                    Text = "20",
                                    Value = "20"
                                },
                                 new SelectListItem() {
                                    Text = "25",
                                    Value = "25"
                                },
                                new SelectListItem() {
                                    Text = "30",
                                    Value = "30"
                                },
                                // new SelectListItem() {
                                //    Text = "35",
                                //    Value = "35"
                                //},
                                new SelectListItem() {
                                    Text = "40",
                                    Value = "40"
                                },
                                new SelectListItem() {
                                    Text = "45",
                                    Value = "45"
                                },
                                 new SelectListItem() {
                                    Text = "50",
                                    Value = "50"
                                },
                                  new SelectListItem() {
                                    Text = "55",
                                    Value = "55"
                                },
                                new SelectListItem() {
                                    Text = "60",
                                    Value = "60"
                                },
                                //new SelectListItem() {
                                //    Text = "90",
                                //    Value = "90"
                                //},
                                //new SelectListItem() {
                                //    Text = "120",
                                //    Value = "120"
                                //}
                            })
                        .Value(Convert.ToString(Model.Duration))
                        .Deferred()
                    )

        </div>
    </div>

    <div class="form-group row">
        @(Html.LabelFor(model => model.LoadingDocks,"Dock Number", htmlAttributes: new { @class = "control-label col-md-4" }))


        <div class="col-md-8" data-container-for="LoadingDocks">
            @(Html.Kendo().DropDownListFor(model => model.LoadingDocks)
                .DataTextField("dockname")
                .DataValueField("dockid")
                .OptionLabel("Select...")
                //.BindTo((System.Collections.IEnumerable)ViewData["LoadingDocks"])
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("RemoteDataSource_GetLoadingDocks", "AMSAppointments");
                    });
                })
                .Events(e => { e.Open("OnLDOpen"); })
                .Template("<span style=\"background-color:\\#: data.dockcolorcode2 \\#;width:10px;height:10px;display:inline-block;border:1px solid \\#: data.dockcolorcode \\#; \"></span><span class=\"\\#: data.dockclass \\#\" > \\#: data.dockname \\#</span>")
                //.HtmlAttributes(new { @style = "width:100%;" })
                .HtmlAttributes(new { @style = "width:100%;", })
                .Deferred()
                )
        </div>
    </div>

    <div class="form-group row hideFgfCarrrer">
        <div class="col-md-4">
            @*@(Html.LabelFor(model => model.Title))*@
            <label>FGF Career</label>
        </div>
        <div class="col-md-8" data-container-for="Title">
            @(Html.TextBoxFor(model => model.Fgfcareer, new { @class = "k-textbox", data_bind = "value:title", @style="width:100%;" , required = "required" }))

        </div>
    </div>
    <div class="form-group row totalpallets firstElement">
        @(Html.LabelFor(model => model.TotalNoOfPallets, "Total Pallets", htmlAttributes: new { @class = "control-label col-md-4" }))
        <div class="col-md-8" data-container-for="recurrenceRule">
            @(Html.Kendo().TextBoxFor(model => model.TotalNoOfPallets)
        .HtmlAttributes(new { data_bind = "value:TotalNoOfPallets", @class = "", @style = "width:100%;", id = "TotalNoOfPallets", @readonly = "readonly" })
        .Deferred())
            @*<input type="text" id="TotalNoOfPallets1" class="" style="width:100%;" data-bind="value: TotalNoOfPallets" />*@

        </div>
    </div>


    <div class="form-group row reccontainer d-none">
        @*@(Html.LabelFor(model => model.RecurrenceRule, htmlAttributes: new { @class = "control-label col-md-4" }))*@
        <label class="control-label col-md-4">Frequency</label>
        <div class="col-md-8" data-container-for="recurrenceRule">
            @(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
                .HtmlAttributes(new { data_bind = "value:recurrenceRule", @style = "width:100%;" })
                .Frequency(frequency => frequency
                        .Add(RecurrenceEditorFrequency.Never)
                        .Add(RecurrenceEditorFrequency.Daily)
                        .Add(RecurrenceEditorFrequency.Weekly)
                    )
                .Deferred()
                )
        </div>
    </div>
</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------

PO Template:

<div class="form-group row" id="POcombobox">

    <label class="control-label col-md-4">PO Number</label>

    <div class="col-md-8" data-container-for="PO">
        @(Html.Kendo().MultiSelectFor(m=>m)
    .Name("selectPoDisplayInfo")
    .DataTextField("poDisplayInfo")
    .DataValueField("poDisplayInfo")
    .Placeholder("Select PO...")
    .AutoBind(false)
    .DataSource(source =>
    {
        source.Custom()
            .ServerFiltering(true)
            .ServerPaging(true)
            .PageSize(80)
            .Type("aspnetmvc-ajax").ServerFiltering(true)
            .Transport(transport =>
            {
                transport.Read(r => r.Action("PoDisplayInfo_Read", "AMSAppointments").Data("getTaskId"));
            })
            .Schema(schema =>
            {
                schema.Data("Data")
                    .Total("Total");
            });
    })
    .Filter(FilterType.Contains)

    .Virtual(v => v.ItemHeight(34).ValueMapper("selectPoDisplayInfo_ValueMapper"))
    .Events(e =>
    e.Change("addSelectPoDisplayInfoFilter")

    )
    .HtmlAttributes(new { @class = "mb-2"})
    .Deferred()
)

    </div>
</div>
<div id="gridArea" data-container-for="PO">
    @(Html.Kendo().Grid<Fellowship.Models.PODetailsMainModel>
    ()
    .Name("POGrid")
    .Events(e => e.DataBound("POList_dataBound"))
    .Events(e =>
    {
        e.Change("onPOChange")
        .DataBound("onPODatabound");
        //e.Filter("onFilter");
    })
    .AutoBind(true)
    .HtmlAttributes(new { @class = "invPOGrid" })
    .Columns(columns =>
    {
        columns.Bound(c => c.aprelid).Hidden(true).HtmlAttributes(new { @class = "aprelidVal" });
        columns.Bound(c => c.Line_UID).Hidden(true).HtmlAttributes(new { @class = "lineUIDVal" });
        columns.Bound(c => c.Buy_from_Vendor_No_).Hidden(true).HtmlAttributes(new { @class = "vendorNameval" });
        columns.Bound(c => c.PO_Number).Hidden(true).HtmlAttributes(new { @class = "POval" });
        columns.Bound(e => e.poDisplayInfo).Title("PO Number").MinResizableWidth(310).Width(310).Filterable(ftb => ftb.Multi(true).Search(true)).HtmlAttributes(new { @class = "podisplayinfo" });
        columns.Bound(c => c.line_no_).Title("Line").Filterable(false).Width(65).HtmlAttributes(new { @class = "line_no_" });
        columns.Bound(c => c.Item).Hidden(true).HtmlAttributes(new { @class = "Item" });
        //columns.Bound(c => c.noofpallets).Title("Pallets").Width(90).Filterable(false).HtmlAttributes(new { @class = "pallets" })
        //                //.ClientTemplate("<input class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#' />");
        //                .ClientTemplate("<input id='txtPallets' class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#'/>");
        columns.Bound(c => c.noofpallets).Title("Pallets").Width(90).Filterable(false).HtmlAttributes(new { @class = "pallets" })
        .ClientTemplate("#=palletsTemplate(data)#");
        // .ClientTemplate("<input id='txtPallets' class='pallet-number form-control w-100' min='1' type='number' value='#:noofpallets#'/>");

        //columns.Bound(c => c.deliverydate).Title("Date").Width(90).Filterable(false).HtmlAttributes(new { @class = "PODate" })
        //                .ClientTemplate("#= deliverydate == null ? '' : kendo.toString(kendo.parseDate(deliverydate), 'MM/dd/yyyy') #");
        columns.Bound(c => c.deliverydate).Title("Date").Width(90).Filterable(false).HtmlAttributes(new { @class = "PODate" })
        .ClientTemplate("#=deliverDateTemplate(data)#");
        //.ClientTemplate("#= deliverydate == null ? '' : kendo.toString(kendo.parseDate(deliverydate), 'MM/dd/yyyy') #");

        //columns.Bound(c => c.proposedTime).Title("Time").Width(80).Filterable(false).HtmlAttributes(new { @class = "POTime" })
        //                .ClientTemplate("#if (data.proposedTime) {# #:kendo.toString(proposedTime.Hours, '00')#:#:kendo.toString(proposedTime.Minutes, '00')# #}#");
        columns.Bound(c => c.proposedTime).Title("Time").Width(80).Filterable(false).HtmlAttributes(new { @class = "POTime" })
         .ClientTemplate("#=proposedTimeTemplate(data)#");
        //.ClientTemplate("#if (data.proposedTime) {# #:kendo.toString(proposedTime.Hours, '00')#:#:kendo.toString(proposedTime.Minutes, '00')# #}#");
        //.ClientTemplate("#=  kendo.toString(new Date(0, 0, 00,proposedTime.substring(0,2),proposedTime.substring(2,4)), 'hh:mm tt' )  #");
        //columns.Bound(c => c.apporush).Title("IsRush").Filterable(false)
        //    .HeaderTemplate("<label for='isRushHeader'>Rush</label><input name='isRushHeader' class='isRushHeader' type='checkbox' style='margin-left:0.5em;'>")
        //    .ClientTemplate("<input " +
        //                " name='isRush' " +
        //                " id='isRush' class='isRushs' " +
        //                " type='checkbox' " +
        //                " #=apporush ? checked='checked' :'' # />"
        //).Width(80).Hidden();
    })
    .Resizable(resize => resize.Columns(true))
    .Scrollable(scroll => scroll.Endless(true))
    .HtmlAttributes(new { style = "height: 30%" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(50)
    .Model(model =>
    {
        model.Id(p => p.Line_UID);
        //model.Field(p => p.poid);
        model.Field(f => f.line_no_).Editable(false);
        model.Field(f => f.Buy_from_Vendor_Name).Editable(false);
        model.Field(f => f.noofpallets).Editable(false);
        model.Field(f => f.deliverydate).Editable(false);
    })
    .Events(e => e.RequestEnd("SetTotalPallets").Change("onChanged"))
    .Read(read => read.Action("Virtualization_ReadPO", "AMSAppointments").Data("getUpdateFlag"))
    )
    .NoRecords("No Records found.")
    .AutoBind(false)
    .Deferred()
    )
</div>

------------------------------------------------------------------------------------------------------------------------

Before doubleClick

    After doubleclicking the block duplicate kendomultislect is created  

I use the following code to show the calendar:

<div class="section">
    <script id="event-template" type="text/x-kendo-template">
        <div class="item-template" title="#: title #">
            <div class="title">#: title #</div>
        </div>
    </script>
    <div class="daily-container">
        @(Html.Kendo().Scheduler<WaterFlowReadingModel>()
    .Name("Daily")
	.Events(e =>
	{
		e.Navigate("scheduler_navigate");
		e.DataBound("scheduler_databound");

	})
    .Date((DateTime)ViewBag.Month)
    .StartTime((DateTime)ViewBag.Month)
	.EventTemplateId("event-template")
    .Views(v =>
    {
        v.MonthView();
    })
	.DataSource(d =>
		d.Model(m =>
		{
            m.Id(f => f.Id);
            m.RecurrenceId(f => f.RecurrenceRule);
			m.Field(f => f.Title).DefaultValue("No title");
		}).ServerOperation(true)
		.Read(read => read.Action("GetMetricDaily", "Metric",
			new { type = 1, start = ViewBag.Month.AddMonths(-1), end = ViewBag.Month.AddMonths(1) }))
    ))
    </div>
</div>

Javascript:

    function scheduler_navigate(e) {
        var start = kendo.format('{0:d}', this.view().startDate());
        var end = kendo.format('{0:d}', this.view().endDate());

        $.ajax({
            url: "@(Url.Action("GetMetricDaily", "Metric"))",
            data: {
                start: start,
                end: end,
            }, success: function () {

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

                scheduler.refresh();
            }
        });
    }

    function scheduler_databound(e) {
        var today = e.date;
        var scheduler = $("#Daily").data("kendoScheduler");
        var newDate = scheduler.date();
        console.log(newDate, today);
		$.ajax({
			url: "@(Url.Action("GetStatistics", "Metric"))",
			dataType: "json",
			data: {
				month: kendo.format('{0:d}', newDate),
            }, success: function (data) {
				//console.log(data);
				date = new Date(data.ReportingPeriod.match(/\d+/)[0] * 1);
                $("#TotalMonthlyDischargeVolume").val(data.TotalMonthlyDischargeVolume);
                $("#NumberOfDaysOfDischargeToSewer").val(data.NumberOfDaysOfDischargeToSewer);
				$("#MaximumDailyFlow").val(data.MaximumDailyFlow);
                $("#ReportingPeriod").val(kendo.toString(date, "Y"));
            }
        });
    };

The problem is that when I select a different month, no data at all is shown unless I select the current month again, which then shows current data.

Controller code:

        public ActionResult GetMetricDaily([DataSourceRequest] DataSourceRequest request, DateTime start, DateTime end)
        {
            using (var db = new DatabaseContext())
            {
                // Water flows
                var lastMonth = db.WaterFlows
                    .Where(w => w.TimeStamp > start && w.TimeStamp < end && w.TotalizerReading >= 1)
                    .Select(x => new WaterFlowReadingModel()
                    {
                        Title = x.TotalizerReading.ToString(),
                        Start = x.TimeStamp,
                        End = x.TimeStamp,
                        Id = x.Id,
                    }).ToList();
                
                // pH Readings
                var result = db.pHReadings.Where(w => w.TimeStamp > start && w.TimeStamp < end)
                    .GroupBy(o => EntityFunctions.TruncateTime(o.TimeStamp))
                    .Select(g => new
                    {
                        Date = g.Key,
                        Min = g.Min(o => o.pHValue),
                        Max = g.Max(o => o.pHValue),
                        Avg = g.Average(o => o.pHValue)
                    })
                    .ToList();
                
                var output = new List<WaterFlowReadingModel>();
                foreach (var item in result)
                {
                    var title = $"PH - Min: {item.Min:F} / Max: {item.Max:F} / Avg: {item.Avg:F}";
                    output.Add( new WaterFlowReadingModel()
                    {
                        Title = title,
                        Start = item.Date ?? DateTime.Today,
                        End = item.Date ?? DateTime.Today,
                        Id = 0
                    });
                }

                lastMonth.AddRange(output);
                return Json(lastMonth.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
            }
        }

I am new to the kendo UI, i have followed the demo for scheduler in ASP.NET MVC and added all the code but I am stuck here.
I have added the nuget and controller and model but I am stuck at ui side, it not showing scheduler.

Console errors

below is my code.

Index.cshtml :

@using Kendo.Mvc.UI
<div id="team-schedule">
    <div id="people">
        <input checked type="checkbox" id="alex" aria-label="Alex" value="1">
        <input checked type="checkbox" id="bob" aria-label="Bob" value="2">
        <input type="checkbox" id="charlie" aria-label="Charlie" value="3">
    </div>
</div>
@(Html.Kendo().Scheduler<Anics.FrontEnd.Models.Scheduler.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2022, 6, 13))
    .StartTime(new DateTime(2022, 6, 13, 7, 00, 00))
    .Height(600)
    .Views(views =>
    {
        views.DayView();
        views.WorkWeekView(workWeekView => workWeekView.Selected(true));
        views.WeekView();
        views.MonthView();
        views.YearView();
        views.AgendaView();
        views.TimelineView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
                new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
                new { Text = "Charlie", Value = 3, Color = "#56ca85" }
            });
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskID);
            m.Field(f => f.Title).DefaultValue("No title");
            m.Field(f => f.OwnerID).DefaultValue(1);
            m.RecurrenceId(f => f.RecurrenceID);
        })
        .Read("Basic_Usage_Read", "Scheduler")
        .Create("Basic_Usage_Create", "Scheduler")
        .Destroy("Basic_Usage_Destroy", "Scheduler")
        .Update("Basic_Usage_Update", "Scheduler")
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
        })
    )
)

@*<script type="text/javascript">
$(document).ready( function () {
        $("#people :checkbox").change(function (e) {
            var checked = $.map($("#people :checked"), function (checkbox) {
                return parseInt($(checkbox).val());
            });

            var filter = {
                logic: "or",
                filters: $.map(checked, function (value) {
                    return {
                        operator: "eq",
                        field: "OwnerID",
                        value: value
                    };
                })
            };

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

            scheduler.dataSource.filter(filter);
        });
    })
</script>*@

<style>

#team-schedule {
    background: url('@Url.Content("~/Content/web/scheduler/")team-schedule.png') transparent no-repeat;
    height: 115px;
    position: relative;
}

#people {
    background: url('@Url.Content("~/Content/web/scheduler/")scheduler-people.png') no-repeat;
    width: 345px;
    height: 115px;
    position: absolute;
    right: 0;
}
#alex {
    position: absolute;
    left: 4px;
    top: 81px;
}
#bob {
    position: absolute;
    left: 119px;
    top: 81px;
}
#charlie {
    position: absolute;
    left: 234px;
    top: 81px;
}
</style>

Hello,

for a new project we're considering ASP.NET MVC, or React (Kendo React)

We like to create a scheduler with multiple users next to each other, per day.

In attachment is an drawing of the expected result.

Is this feasable with Telerik Scheduler, with drag and drop availabilities to move appointments between users?

Thanks,

Jeroen

Is there a way to create a custom viewer template for a scheduler event and have certain events be uneditable and open up in a viewer pop-up?

Hi,

I have a scheduler controle that I am showing 1 day on but I don;t want it to be a specific day I am using it to assign appointments for Monday, Tuesday, Wednesday, etc reardless of the actual date so I would like to hide the date selector, current date and the heading showing the current date as shown below:

If I could also affect the line height for the times that would be great too as they are a little tall currently.

Any help would be gratefully received.

Thanks,

Ian

I want to customise my team schedulers to identity which users have no events scheduled each day, researching I found this https://docs.telerik.com/kendo-ui/knowledge-base/customize-no-events-days-content.  I cant seem to replicate this for MVC and using the TimelineMonthView. Any help would be appreciated.

This is a copy of my scheduler code..