Within my sitefinity project I am using Kendo.Mvc.UI controls like #Html.Kendo().TextBox() and #(Html.Kendo().Grid in the view. I have also included the files in the view using the #Html.Script. But I am getting this error about the kendo.syncReady is not a function am I missing anything else?
#Html.Script(ScriptRef.JQuery, "top")
#Html.Script(Url.WidgetContent("~/Mvc/Scripts/Kendo/2020.3.1118/kendo.all.min.js"), "top")
<link rel="stylesheet" href="~/Mvc/Scripts/kendo/2020.3.1118/styles/kendo.bootstrap-v4.min.css" />
<link href="~/Mvc/Scripts/Kendo/2020.3.1118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Mvc/Scripts/Kendo/2020.3.1118/styles/kendo.default.min.css" rel="stylesheet" />
This is how you want to render kendo and jquery to avoid conflicts
https://github.com/sitefinitysteve/RandomSiteControlsMVC/blob/master/RandomSiteControlsMVC/MVC/Views/TabStrip/Kendo.cshtml
You also want to do something like this so it'll always render below jquery
https://github.com/sitefinitysteve/RandomSiteControlsMVC/blob/master/Demo/ResourcePackages/RSC/MVC/Views/Layouts/default.cshtml#L207
It's all about predictability.
Related
According to documentation these are the files that need to be added
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
// Load the Kendo Default Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
// Load the Kendo Bootstrap Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
The Error is
Cannot read properties of undefined (reading 'support') at Module. (kendo-vue-charts.js:1:28556)
The order of the script tags is wrong - we need to put the drawing script tag first, then the intl and last but not least the charts script.
As you all know, in all normal .net framework empty web site projects every asp page has a head section in which we specify the external style sheet of that asp page. But I am shifting to .core web application project where pages do not have a head section. There is a head section in shared _layout but I do not want to use it because, as far as I know, the link for style sheet is shared across all pages what I shall do.
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
To achieve your requirement of adding references to external stylesheets inside the <head> section of page from view page(s), you can try following approach.
In _Layout.cshtml, calling RenderSection to optionally reference Styles section in the section, like below.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
#RenderSection("Styles", required: false)
</head>
Then you can add reference to the external style sheet file like below in view page.
#section Styles{
<link href="#Url.Content("~/Styles/mystyle.css")" rel="stylesheet" type="text/css" />
}
Test Result
till now the easiest solution i found
(1)- prevent your page from taking style from default shared (_layout.)
by writing the following code at your page
(2)- your razor page like any other html page can accept head section tag
and can accept tag even if it is not placed in head section
so refer to your external style sheet as u normally do
write following link tag at your razor page without head section
(1)
#{
Layout = "";}
<link rel="stylesheet" href="~/css/style.css" />
I am attempting to implement paging in my simple ASP.NET Core 2.2 application.
I executed the command Install-Package NonFactors.Grid.Mvc6 to install the package and followed all the installation steps described in this page.
I can see the data displayed in grid but when I click to show the next records the paging in not moving to show the other records.
I am missing any scripts?
I made the test followed the tutorial that you provided , but it worked well. Make sure your styles and scripts are saved as follows:
Then include grid styling sheet and grid scripts to _Layout.cshtml like below:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/Content/MvcGrid/mvc-grid.css" rel="stylesheet">
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/MvcGrid/mvc-grid.js"></script>
<script>
[].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
new MvcGrid(element);
});
</script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
I am new in MVC and i was looking for by above error but a i can't find it.
I create a partial view to EDIT and CHANGE the data base. Partial View is callling from INDEX.cshtml.
When I call one specific item the program below is executed at the first time in this point:
I have one field (date) with drop down. I use the datepicker function. In debug mode at the same program below is executed again because to the datepicker function and IN THIS MOMENT i receive a warning message at the command Open as shown at the second screenshot below.
_Edit.cshtml
Im my partial view I have the code below (part) with the datepicker. Two points. Will be this the problem (two points to datepicker ?).
Does anyone can help me to solve this problem ?
Thanks in advance
#model i_Projeto.Models.Ativ_Compr_Models
#using Newtonsoft.Json
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
.
.
.
.
.
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script type="text/javascript">
$('#DeadLine').datepicker({
language: 'pt-BR',
autoclose: true,
orientation: "bottom right",
dateFormat: 'dd/mm/yyyy',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
I solved the problem!
remove it in partial view:
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
And put it in the View Father.
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
I have problems with Lightbox, what exactly I don't know. I am using Ruby on Rails 3.2.1
What I have done:
Added codes in head section:
<script src="/Livu_pamatskola/app/assets/javascripts/lightbox/js/jquery-1.7.2.min.js"></script>
<script src="/Livu_pamatskola/app/assets/javascripts/lightbox/js/lightbox.js"></script>
<link href="/Livu_pamatskola/app/assets/javascripts/lightbox/css/lightbox.css" rel="stylesheet" />
And added this code in view:
image #1
But Lightbox don't works at all.