I had a few minutes to spare so I though why not give some more info ? I double checked the differences between the code changes. Here is a synposis.
Web.Mvc\Startup\Startup.cs
using Newtonsoft.Json.Serialization
.......
//MVC
services.AddMvc(options =>
{
options.EnableEndpointRouting = false;
options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
}).SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddMvc().AddJsonOptions(options =>
options.SerializerSettings.ContractResolver = new DefaultContractResolver());
services.AddKendo();
Web.Mvc\Areas\App\Views_ViewImports.cshtml
.......
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
Web.Mvc\Areas\App\Views\Layout\Default\Layout.cshtml (Other layout files were updated as well)
@section Styles{
......
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
.......
}
@section Scripts{
.......
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
.......
}
I understand your pain @dev_frontrush it was a pain in the arse to get it all working. I suspect the issue isn't the framework version but something you missed.
Go back through my list and re-check everything, if you missed some parts you will either get the error like you described or the control won't render. Sorry that I can't give you more feedback but I came to a working solution via trial and error. Also it was for the Demo project.
Sadly I think we are dropping Telerik since some of the advice we have been given was that Telerik can be a major hassle to implement.
Again thanks for the awesome support, sadly I'm lacking knowledge with of JQuery and the JQuery validator. The documentation is a bit hard to follow sometimes.
The key item was onfocusout which was the reason why hitting the enter key on a element was causing the modal validation form to appear. Sadly I tried lots of things and I could get the animate method to work.
So if anyone else wants a quick and dirty solution to a muti-page modal form then this is your answer. Works quite well and will handle user pressing Enter on elements or clicking the Save button at the bottom of the modal form.
this.init = function (modalManager) {
......
_$employeeInformationForm.validate({
onfocusout: false,
invalidHandler: function (form, validator) {
if (!validator.numberOfInvalids()) return;
$(validator.errorList[0].element).focus();
}
});
I checked the forum posts and only found something about Angular and Core (I'm using Core and JQuery) https://support.aspnetzero.com/QA/Questions/5582
I did a bit of reading with regards to JQuery Validation and it leads me to believe that it should focus to the first element that failed validation.
We have a very large Modal form which is a few pages long (the boss wants it this way) my solution doesn't focus to the first invalid element.
I found an answer or sorts. https://stackoverflow.com/questions/9392133/when-form-is-validated-how-to-scroll-to-the-first-error-instead-of-jumping
Problem is I can't get it to work, if I replace the animate method with focus it works, but only when I click the "Save" button. If I push the "Enter" key on any other element it sets focus but also displays the modal validation error form.
_$employeeInformationForm.validate({
focusInvalid: false,
invalidHandler: function (form, validator) {
if (!validator.numberOfInvalids()) return;
$(validator.errorList[0].element).focus();
//$('html, body').animate({
// scrollTop: $(validator.errorList[0].element).offset().top
//}, 2000);
}
});
What do I need to do to get the solution to focus to the first element that failed validation ? To be honest the focus method isn't suitable since it can trigger other things like a dropdown opening of the datepicker opening the date selector.
Not sure if this is any use to anyone else but I might as well post it here, if it helps one person then it was worth my time.
Important the links below are the reference documents supplied by Telerik. You MUST read and understand these before continuing. Some of the steps required are NOT covered in this guide. This guide is mainly to explain what is needed to get the Telerik datepicker control working with a _CreateOrEditModal.cshtml modal form
https://docs.telerik.com/kendo-ui/intro/installation/getting-started#download https://docs.telerik.com/devtools/aspnet-ajax/installation/installing-the-telerik-controls-from-nuget-package https://docs.telerik.com/aspnet-mvc/getting-started/nuget-install#set-up-nuget-package-source https://docs.telerik.com/aspnet-core/getting-started/getting-started https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources#manual-installation
Please refer to https://docs.telerik.com/aspnet-core/getting-started/getting-started
using Newtonsoft.Json.Serialization;public IServiceProvider ConfigureServices(IServiceCollection services)
{
//MVC
services.AddMvc(options =>
{
options.EnableEndpointRouting = false;
options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
}).SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddMvc().AddJsonOptions(options =>
options.SerializerSettings.ContractResolver = new DefaultContractResolver());
services.AddKendo();
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
..Web.Mvc\wwwroot\lib\kendo-ui\js
..Web.Mvc\wwwroot\lib\kendo-ui\styles
@section Styles{
…
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
@RenderSection("Styles", false)
}
Note jquery MUST be before the other scripts
@section Scripts{
<script abp-src="/metronic/src/js/demo/default/base/layout.js" asp-append-version="true"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
@RenderSection("Scripts", false)
}
7. Finally add the actual Kendo datepicker to your page
@(Html.Kendo().DatePicker()
.Name("dob")
.Value(Model.Person.DOB)
)
If the control doesn't render at all check the client-side assets as well as the stylesheet and scripts in _Layout.cshtml page
If you get something like **IHtmlHelper<CreateOrEditCatModalViewModel>' does not contain a definition for 'Kendo' ** check to make sure you have updated the correct _ViewImports.cshtml page. You don't need to register another dll or anything like that contrary to what you find elsewhere.
Again thanks for the keyword @maliming ! You guys are awesome so glad we bought this framework !
I will do some more research, keep in mind my knowledge is limited in some regards. On the plus side we are getting in a part time contractor to assist us with the more complicated problems.
To get a custom HTML Title to any index page I need to add RenderSection("Title", true) to the _Layout.cshtml pages. And then Title to the Index.cshtml pages.
If I don't add RenderSection("Title", true) to the _Layout.cshtml page it give me nice exception error.
We got all the pages loading except the Theme8 _Layout.cshtml page is a LOT different to the others and we can't work out where to add RenderSection("Title", true)
So my question is either where do we add the RenderSection("Title", true) to the Theme8 _Layout.cshtml page, OR are we doing something we shouldn't and the framework handles custom titles and we just need to update the framework code ?
We are attempting to add a HTML title to all the Index pages when they are loaded.
So in all the _Layout.cshtml pages for the Default, Theme11 .... the code
@section Title{
@RenderSection("Title", true)
}
was added, then for each Index.html page the code
@section Title{
@L("Settings")
}
was added which works correctly.
We are having an issue with Theme8 which has a _Layout.cshtml page with a different layout. So I get an exception since it finds a title in an Index page which shouldn't be there (because it isn't picking up the boolean switch).
Is this the correct way to achieve this ? Or is there a better method for added a title to each Index.html page ?
Thanks again for the awesome support. I saw the Layout.cshtml page but wasn't sure it was the one to edit since there were heaps of them. Still struggling with getting the Telerik controls to actually work. Still waiting for an answer from their support people.
So we are looking at using Telerik with ASP.NET Zero and their guide details how to setup a ASP.NET Core project and get it all working. https://docs.telerik.com/aspnet-core/getting-started/getting-started#configuration Which is fine and works great, they also supply a demo project which shows everything working.
I used the manual process for adding the Client Side resources. https://docs.telerik.com/aspnet-core/getting-started/getting-started-copy-client-resources#manual-installation
Step 4. Register the Kendo UI styles and scripts in ~/Views/Shared/_Layout.cshtml
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - TelerikSetup</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
@* Place Kendo UI scripts after jQuery *@
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
@* Place Kendo UI scripts after jQuery *@
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>
<link rel="stylesheet" href="~/css/site.css" />
</head>
So how do I acheive that using the ASPNET.Core framework ?
/.Web.Mvc does have anything that is similar to a _Layout.cshtml page.