or
1 answer
81 views
I'm trying to figure out how to customize scheduler event action controls like edit and delete. By default events are edited by double-click and deleted by an 'x' button that appears on hover. Is there a straight-forward way to have controls in the custom event template to have that functionality and disable the default method?
Eyup
Telerik team
answered
on
19 Oct 2024
1 answer
78 views
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>
<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#;'> #= VendorNo# #= PODisplayInfo# </div>#} else{# <div> Location: #= locationCode#</div> #}# #}else{# <div class='background-lighter' style='background-color : grey;'></div>#}#")
//.EventTemplate("#if('" + IsInternalUser + "'=='True') {#<div style='font-weight: 600'> PO- #= POHeader#</div><div> Supplier- #= VendorNo# </div><div> Pallet- #= TotalNoOfPallets#</div>#} else{# <div style='font-weight: 600'> PO- #= POHeader#</div><div> Location- #= locationCode#</div><div> Pallet- #= TotalNoOfPallets#</div> #}#")
//.EventTemplate("<div style='font-weight: 600'>PO- #= POHeader#</div><div> 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
Anton Mironov
Telerik team
answered
on
05 Jun 2024
0 answers
120 views
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);
}
}
1 answer
113 views
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>
@using Axtrum.Framework.Helpers
@using Microsoft.Web.Mvc
@using Anics.FrontEnd.Controllers
@using Anics.FrontEnd.Helpers
<!DOCTYPE html>
<html lang="en">
<head>
<title>@ViewBag.Title</title>
@{
var token = (System.Web.HttpContext.Current.Session["loginToken"] == null) ? "" : System.Web.HttpContext.Current.Session["loginToken"] + ""; //
}
<!-- BEGIN META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="your,keywords">
<meta name="description" content="Orion Freight Management Cloud Portal">
<!-- END META -->
<!-- BEGIN STYLESHEETS -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css' />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/materialadmin.css" />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/material-design-iconic-font.min.css" />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/bootstrap-datepicker/datepicker3.css" />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/multi-select/multi-select.css?1424887857" />
<link type="text/css" rel="stylesheet" href="/assets-vendor/css/theme-default/libs/dropzone/dropzone.css" />
<link href="~/assets-vendor/js/libs/intl-tel-input/build/css/intlTelInput.css" rel="stylesheet" />
<script src="~/Scripts/canvasjs.min.js"></script>
<!-- END STYLESHEETS -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type="text/javascript" src="/assets-vendor/js/libs/utils/html5shiv.js?1403934957"></script>
<script type="text/javascript" src="/assets-vendor/js/libs/utils/respond.min.js?1403934956"></script>
<![endif]-->
@*<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">*@
@*<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">*@
<link href="~/assets/css/flatpickr.min.css" rel="stylesheet" />
<link href="~/assets/js/plugins/jquery.combogrid-1.6.3/resources/css/smoothness/jquery.ui.combogrid.css" rel="stylesheet" />
<link href="~/assets/js/plugins/jquery.combogrid-1.6.3/resources/css/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<link href="~/assets/js/plugins/lobibox-master/dist/css/Lobibox.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="/assets/css/app.css" />
<link href="https://kendo.cdn.telerik.com/themes/7.2.0/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.130/js/kendo.aspnetmvc.min.js"></script>
@* Add the bootstrap.min.js script: *@
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="~/images/js/cachedetect.js"></script>
<script>
var offset= @SessionHelper.TimeZone;
</script>
<script src="https://maps.alk.com/api/1.2/ALKMaps.js?key=c2327b98fa0fa244aab3ee1c51ea772e" type="text/javascript"></script>
@Styles.Render("~/bundles/all-css")
@RenderSection("head", required: false)
<style>
.floatingBtn {
width: 40px;
height: 40px;
z-index: 100;
font-size: 8px;
line-height: 8px;
text-align: center;
color: white;
text-decoration: none;
position: fixed;
right: 30px;
bottom: 30px;
background: #0aa89e;
padding: 9px 0px;
display: flex;
align-items: center;
flex-direction: column;
border-radius: 50%;
transition: 0.2s ease-in-out;
box-shadow: 0 0 10px rgb(0 0 0 / 25%);
);
}
.floatingBtn:hover {
background: #066660;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.30);
}
.floatingBtn img {
width: 25px;
height: 25px;
object-fit: contain;
display: block;
margin: 0 0 -5px;
}
</style>
</head>
<body class="header-fixed menubar-hoverable menubar-pin" id="@SessionHelper.OrgName" ng-app="axtrumApp" ng-controller="GlobalController as gm">
<!-- menubar-first menubar-visible -->
@*<iframe src="@ConfigKeys.IframeURL/autologin.aspx?token=@token" frameborder="0" style="display:none"></iframe>*@
<iframe ng-src="@ConfigKeys.IframeURL/autologin.aspx?token=@token" frameborder="0" style="display:none"></iframe>
@{
if (System.Web.HttpContext.Current.Session["loginToken"] == null)
{
if (System.Web.HttpContext.Current.Request.CurrentExecutionFilePath != "/OutsideCarrier/Index")
{
Response.Redirect("~/Account/Login");
}
}
else
{
System.Web.HttpContext.Current.Session["loginToken"] = System.Web.HttpContext.Current.Session["loginToken"].ToString().Replace("~~1~~", "");
}
}
<!-- BEGIN HEADER-->
@if (System.Web.HttpContext.Current.Session["loginToken"] != null && HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString() != "Unauthorised")
{
Html.RenderAction("Menu", "Account");
}
@if (System.Web.HttpContext.Current.Session["loginToken"] != null && HttpContext.Current.Request.RequestContext.RouteData.Values["action"].ToString() == "Unauthorised")
{
@Html.Partial("_TopNavBar")
}
@*@Html.Partial("~/Views/Shared/_AddContactForm.cshtml",new Anics.FrontEnd.Models.Contacts.ContactPrimaryInfoModel())*@
@*@Html.Partial("_TopNavBar")*@
<!-- END HEADER-->
<!-- BEGIN BASE-->
<div id="base">
<!-- BEGIN OFFCANVAS LEFT -->
<div class="offcanvas"></div><!--end .offcanvas-->
<!-- END OFFCANVAS LEFT -->
<!-- BEGIN CONTENT-->
<div id="content">
<section class="has-actions style-default-bright">
<div class="section-header height-auto">
<div class="row">
<div class="col-sm-6">
<ol class="breadcrumb">
<li><a href="javascript:void(0)" ng-click="gm.getDefaultUrlValue()">Home</a></li>
@RenderSection("breadcrumb", required: false)
</ol>
</div>
<div class="col-sm-6" id="PageTopActionBar">
@RenderSection("actionbartop", required: false)
</div>
</div>
</div>
<div class="section-body hidden" id="appBody">
<div class="margin-bottom-lg">
@*<center>
<div data-loading style="display: block;position: absolute;width: 100%;line-height: 50;z-index: 99999999;"></div>
</center>*@
@*<div loading-indicator style="display: block;position: absolute;width: 100%;line-height: 50;z-index: 99999999;"><span>Please wait...<img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" /></span></div>*@
@RenderBody()
</div>
<div id="PageActionBar" class=" style-primary">
@RenderSection("actionbarbottom", required: false)
</div>
</div>
<div class="section-action style-primary hidden" id="pageActionBar">
</div>
<div id="EnlargedImageModal" class="modal draggable fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header style-primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<header class="text-lg">Image Rotation</header>
</div>
<form novalidate name="vm.formSaveRotatImageModal">
@Html.Partial("_ContactAlertsAreaInForm", "vm.formSaveRotatImageModal")
<div class="modal-body">
<div class="container-fluid bd-example-row">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div id="imageViewContainer">
<img id="BOLImage" ng-src="{{gm.enLargefileUrl}}" class='img-responsive' style="margin: 12% auto;transition: .2s ease-in-out" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" id="rotateImage" style="margin:0 37%" ng-click="gm.rotateImage();">
<i class="fa fa-rotate-right" aria-hidden="true"></i>
</button>
<button ng-show="gm.isFromPro == true" type="submit" class="btn btn-primary btn-sm" ng-click="gm.saveRatetedImage(gm.imageName)"><i class="fa fa-save"></i> save</button>
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</form>
</div>
</div>
</div>
<div id="globleConfirmationModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleteModal" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header style-primary">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<header class="text-lg">Confirmation</header>
</div>
<div class="modal-body">
<h4>{{gm.confirmationMessage}}</h4>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</section>
</div><!--end #content-->
<!-- END CONTENT -->
<!-- BEGIN MENUBAR-->
@Html.Partial("_LeftNavBar")
<!--end #menubar-->
<!-- END MENUBAR -->
<!-- BEGIN OFFCANVAS RIGHT -->
@Html.Partial("_OffCanvasRight")
<!--end .offcanvas-->
<!-- END OFFCANVAS RIGHT -->
<a id="floatingBtnBot" class="floatingBtn">
<img src="~/assets/images/arrow-ic.svg" style="margin-left:8px;margin-top:-2px" />
</a>
<a class="floatingBtn" id="floatingBtnTop" style="display:none">
<img src="~/assets/images/up-arrow-ic.svg" style="margin-left:8px;margin-top:-2px" />
</a>
</div><!--end #base-->
@Html.Partial("_FooterLayout")
<!-- END BASE -->
<!-- BEGIN JAVASCRIPT -->
@Scripts.Render("~/bundles/app-js")
<script src="~/assets-vendor/js/ng-tags-input.min.js"></script>
<script>
// include kendo.timezones.js
var version = kendo.version;
$('<script/>', {
type: 'text/javascript',
src: 'https://kendo.cdn.telerik.com/' + version + '/js/kendo.timezones.min.js'
}).appendTo('head');
</script>
<script type="text/javascript">
function onError(e) {
this.cancelChanges();
var errorMessage = "";
if (e.errors) {
for (var error in e.errors) {
errorMessage += e.errors[error].errors[0] + " ";
}
}
alert(errorMessage);
}
$(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>
@RenderSection("scripts", required: false)
<script>
var getContactUrl = '@(Html.BuildUrlFromExpression<ScheduleRideController>(c => c.GetContactDetail(0)))';
var getMasterData = '@(Html.BuildUrlFromExpression<CommonController>(c => c.GetMasterDataForCreateContactPopup(null)))';
var getSelectedColumnUrl = '@(Html.BuildUrlFromExpression<CommonController>(c => c.GetSelectedColumn(0)))';
var saveSelectedColumnUrl = '@(Html.BuildUrlFromExpression<CommonController>(c => c.SaveSelectedColumn(0,"")))';
window.app.constant('globalConfig', {
getContactUrl: getContactUrl,
getMasterData: getMasterData,
getSelectedColumnUrl: getSelectedColumnUrl,
saveSelectedColumnUrl: saveSelectedColumnUrl
});
@Html.Angular().MasterDataForModel("")
$(window).on('scroll', function () {
$('.cg-autocomplete').hide();
});
$('.modal-body').on('scroll', function () {
$('.cg-autocomplete').hide();
});
$('.close').on('click',function(){
$('.cg-autocomplete').hide();
});
$("#floatingBtnBot").on('click',function(){
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
$("#floatingBtnBot").css("display","none");
$("#floatingBtnTop").css("display","block");
});
$("#floatingBtnTop").on('click',function(){
$('html,body').animate({scrollTop: 0},"fast");
$("#floatingBtnTop").css("display","none");
$("#floatingBtnBot").css("display","block");
});
$("#floatingBtnTop").click();
window.onscroll = function(ev) {
if ((window.innerHeight + window.pageYOffset) >= document.body.scrollHeight) {
$("#floatingBtnBot").css("display","none");
$("#floatingBtnTop").css("display","block");
}
if(Math.round(window.pageYOffset) <= 1){
$("#floatingBtnTop").css("display","none");
$("#floatingBtnBot").css("display","block");
}
};
</script>
@*
<script src="/assets/js/lib/jquery-2.1.4.min.js"></script>
<script src="/assets-vendor/js/libs/bootstrap/bootstrap.min.js"></script>
<script src="/assets/js/app.jQuery.js"></script>
@*<script src="/assets-vendor/js/uploader.js"></script>
<!--begin angular controllers js-->
<script src="/assets/js/controllers/ContactController.js"></script>
<script src="~/assets/js/controllers/ContactGroupController.js"></script>
<script src="/assets/js/controllers/ScheduleController.js"></script>
<script src="~/assets/js/controllers/UserController.js"></script>
<script src="~/assets/js/controllers/roleController.js"></script>
<script src="/assets/js/controllers/contentCtrl.js"></script>
<script src="~/assets/js/controllers/HubController.js"></script>
<script src="~/assets/js/controllers/AssetsController.js"></script>
<!--end angular controllers-->
<script src="~/assets/js/directives/customPagination.js"></script>
<script src="/assets/js/directives/pagination.js"></script>
<script src="/assets/js/services/ContentData.js"></script>
<script src="/assets/js/utility/ArrayExtensions.js"></script>
<script src="/assets/js/utility/FormGroupValidationDirective.js"></script>
<script src="/assets/js/utility/InputValidationIconsDirective.js"></script>
<script src="/assets/js/utility/MvcGridDirective.js"></script>
<script src="/assets/js/utility/ParseDateFilter.js"></script>
<!--begin plug-in js-->
<script src="/assets-vendor/js/libs/jquery-ui/jquery-ui.min.js"></script>
<script src="/assets-vendor/js/libs/spin.js/spin.min.js"></script>
<script src="/assets-vendor/js/libs/autosize/jquery.autosize.min.js"></script>
<script src="/assets-vendor/js/libs/moment/moment.min.js"></script>
<script src="/assets-vendor/js/libs/nanoscroller/jquery.nanoscroller.min.js"></script>
<script src="/assets-vendor/js/libs/skycons/skycons.js"></script>
<script src="/assets-vendor/js/libs/select2/select2.min.js"></script>
<script src="/assets-vendor/js/libs/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="/assets-vendor/js/libs/multi-select/jquery.multi-select.js"></script>
<script src="/assets-vendor/js/libs/inputmask/jquery.inputmask.bundle.min.js"></script>
<script src="/assets-vendor/js/libs/bootstrap-datepicker/bootstrap-datepicker.js"></script>
<script src="/assets-vendor/js/libs/dropzone/dropzone.js"></script>
<script src="/assets-vendor/js/libs/intl-tel-input/build/js/intlTelInput.js"></script>
<script src="/assets-vendor/js/libs/intl-tel-input/build/js/intlTelInput.min.js"></script>
<!--end plug-in js-->
<script src="/assets-vendor/js/core/source/App.js"></script>
<script src="/assets-vendor/js/core/source/AppNavigation.js"></script>
<script src="/assets-vendor/js/core/source/AppOffcanvas.js"></script>
<script src="/assets-vendor/js/core/source/AppCard.js"></script>
<script src="/assets-vendor/js/core/source/AppForm.js"></script>
<script src="/assets-vendor/js/core/source/AppNavSearch.js"></script>
<script src="/assets-vendor/js/core/source/AppVendor.js"></script>
<script src="~/assets/js/directives/ngEnter.js"></script>
<!-- Calendar -->
<script src="/assets-vendor/js/libs/fullcalendar/fullcalendar.min.js"></script>
<!-- /Calendar -->
<!----User Controller-->
<!---/-User Controller-->
<script src="/assets-vendor/js/core/demo/Demo.js"></script>
<script src="/assets-vendor/js/core/demo/DemoUISkycons.js"></script>
<script src="~/Scripts/dragdrop.js"></script>*@
<!-- END JAVASCRIPT -->
@*<script src="https://unpkg.com/flatpickr"></script>*@
<script src="~/assets/js/flatpickr.min.js"></script>
</body>
</html>
Anton Mironov
Telerik team
answered
on
07 Feb 2024
1 answer
84 views
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
1 answer
85 views
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?
Eyup
Telerik team
answered
on
12 Dec 2023
3 answers
259 views
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
1 answer
96 views
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..
@(Html.Kendo().Scheduler<Inspire.Web.ViewModels.Scheduler.EventViewModel>().Name("scheduler")
.HtmlAttributes(new { @class = "global-schedule" })
.Date(date)
.Min(date)
.Max(date)
.EventTemplate(
"<div id='event-#= Id #' class='row scheduled-event-template'>" +
@eventTemplate +
"</div>")
.Editable(e => e.Destroy(false))
.MajorTick(480)
.ShowWorkHours(true)
.WorkDayStart(9, 0, 0)
.WorkDayEnd(17, 0, 0)
.Events(e => e.Edit("onEdit")
.Resize("scheduler_OnMove")
.ResizeStart("scheduler_OnMove")
.ResizeEnd("scheduler_OnMove")
.Move("scheduler_OnMove")
.MoveStart("scheduler_OnMove")
.MoveEnd("scheduler_OnMove")
// .Remove("scheduler_OnRemove")
.DataBound("scheduler_dataBound")
.Save("scheduler_save"))
.Views(views =>
{
views.TimelineMonthView(weekView => weekView.Selected(true));
//views.CustomView("MyCustomTimelineView");
})
.Group(group => group.Resources("TeamMembers").Orientation(SchedulerGroupOrientation.Vertical))
.GroupHeaderTemplateId("groupHeaderTemplate")
.Resources(resource =>
{
resource.Add(m => m.UserId)
.Title("Team Members")
.Name("TeamMembers")
.DataTextField("FullName")
.DataValueField("Id")
.DataColorField("Color")
.Multiple(true)
.DataSource(s => s
.Read(read => read.Action("action", "controller")));
resource.Add(m => m.EventTypeId)
.Title("Event Types")
.Name("EventTypeNames")
// .Multiple(true)
.DataTextField("Text")
.DataValueField("Value1")
.DataColorField("Value2")
.DataSource(s => s
.Read(read => read.Action("action", "controller")));
})
.AutoBind(false)
.DataSource(d => d
.Events(e => e.Sync("sync_handler"))
.Model(m =>
{
m.Id(f => f.Id);
m.Field(f => f.UserIds);
m.Field(f => f.EventTypeId);
m.Field(f => f.Title);
// m.Field(f => f.Title).DefaultValue("No title");
})
.Read(r => r.Action("action", "controller", new
{
IsTermReleased = Model.IsTermReleased,
upcomingYear = Model.UpcomingYear
}))
.Create("action", "controller")
.Destroy("action", "controller")
.Update("action", "controller")
)
)
Anton Mironov
Telerik team
answered
on
17 Oct 2023
1 answer
76 views
I use the scheduler to give the user an overview of which days in the year he has appointments.
I would like to achieve two things now:
When the user clicks on a date in the year view, I want to make an Ajax call to the server to load additional information for that day. Is there an event that is called when the user clicks on a date?
Can I prevent the detail box from opening in the year view when a date is clicked?
I would like to achieve two things now:
When the user clicks on a date in the year view, I want to make an Ajax call to the server to load additional information for that day. Is there an event that is called when the user clicks on a date?
Can I prevent the detail box from opening in the year view when a date is clicked?
Eyup
Telerik team
answered
on
10 Oct 2023
1 answer
94 views
is there a "number of weeks" property in the kendo.mvc scheduler month view? - I'd like to show 10 weeks rather than 6
Anton Mironov
Telerik team
answered
on
13 Jul 2023
