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>
1 Answer, 1 is accepted
Hello Shashwat,
Thank you for the image, code snippet, and the details provided.
In order to resolve the described issue, I would recommend isolating the Scheduler of all custom logic and additional scripts.
The Developer Tools Console should not have any errors.
Here is a REPL example of the Scheduler:
The fastest route to getting you up and running is you could provide a runnable, isolated, sample project without additional scripts. Examining this project will let us replicate the issue locally and further troubleshoot it.
Looking forward to hearing back from you.
Kind Regards,
Anton Mironov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.