I see Telerik provides open source version of Kendo UI at following URL
http://www.telerik.com/download/kendo-ui-core
I downloaded it but not able to make it work in ASP.NET MVC application.
I am not sure what i am missing. I make a call to CSS and JS files as mentioned in below link:
http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-4
Although I am missing one step Add reference to Kendo.Mvc.dll because Telerik don't provide installer in free version and I need JavaScript version of Kendo UI not with MVC selector.
Any idea here?
If you go to: http://dojo.telerik.com/
The default page contains everything you will need to get up and running and in what order:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
</body>
</html>
If it is still not working after you put this in your page then something else is going on.
Comment out the following line in _layout.cshtml page
##Scripts.Render("~/bundles/jquery")#
and add the below lines at the end of the head section :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
Related
I installed bootstrap-material-design as instructed on the github website and everything said it was installed successfully:
I have inserted the recommended code into my application header:
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-material-design/dist/css/ripples.min.css">
<!-- Material Design Scripts -->
<script src="bower_components/bootstrap-material-design/scripts/index.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/material.js"> </script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"> </script>
and
<script type="text/javascript">
$(document).ready(function() {
$.material.init();
});
</script>
However, when I try a sample element (e.g. "jumbotron" or "well") it still appears the way normal bootstrap does, not the way your material design website says it should.
Any ideas on how to get it to appear? I didn't get any error message, so I don't really have anything to go on, and I don't want to manually download the files for fear of duplicates.
Apparently you do not have a reference to the correct JS files. Trying adding these to you code in the head section
<script src="scripts/index.js"> </script>
<script src="scripts/material.js"> </script>
<script src="scripts/ripples.js"> </script>
You seems to be missing references to jQuery and bootstrap's .js file. You should include both before material design script in that order.
I have a simple typescript game(using Phaser.io) that i what to run from an ASP.net MVC application in an MVC 5 View page with Layout (Razor)
I have added the view and the controller
/Views/Home/About.cshtml
#{
ViewBag.Title = "About";
}
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="~/phaser.js"></script>
<script src="~/app.js"></script>
<div id="game"></div>
The game starts but it does not show any images. It looks like the reference to the image is wrong.
http://asskicker3.azurewebsites.net/Home/About
I reference the images as follows in the app.ts:
preload() {
this.game.load.image('background',"assets/background.jpg");
If i add an HTML page to the root of my folder it all work perfect.
http://asskicker3.azurewebsites.net/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body style="margin:0px; padding: 0px;">
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="phaser.js"></script>
<script src="app.js"></script>
<div id="game"></div>
</body>
</html>
Answer:
James Skemp solutions works. Just by adding the / it all works. Perfect!
Your asset references are relative.
So if you look at the network tab in a browser you'll notice that it's trying to load the graphics relative to the URL. For example, http://asskicker3.azurewebsites.net/Home/assets/background.jpg
One way to fix this would be to change your preload so that the asset URLs are absolute instead of relative. So
this.game.load.image('background', "assets/background.jpg");
would become
this.game.load.image('background', "/assets/background.jpg");
Trying to learn webix (and javascript at all). Usually the common practice is loading javascript libraries at the end of the body.
The webix quick start doc says:
<!DOCTYPE HTML>// specifies document type
<html>
<head>
<link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
<script src="../../codebase/webix.js" type="text/javascript"></script>
</head>
<body>
e.g. it loads the library in the head.
Questions:
the webix lib should be loaded in the <head>?
if yes, where should be loaded jQuery and twitter bootstrap?
and in what order?
You can place webix.js anywhere on the page. Just be sure that JS code that uses Webix API is used after webix.js loading
Normally scripts are placed at the end of HTML file as they only add some interactivity to the page. In case of Webix UI, without webix.js you will not see any content on page at all, so there is no benefits from putting webix.js at the end of page.
As for jQuery - if you plan to use webix-jquery integration you need to load webix.js AFTER loading the jQuery ( at the head, or at the end of file, doesn't matter )
You need to follow the below syntax or process for using the webix.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Raleway|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" >
webix.ui({
view:"calendar",
id:"calendar1"
})
</script>
</body>
</html>
Any dependencies must load on top webix.js, so that you can use them in your JS file.
I am facing problem of stabilizing styles in my html page.
Whenever I am using datepicker (jqmobile UI datepicker), the look and feel is affected terribly. The icons on the header, the icons for closing dialog, the icons for type dropdown all vanishes.
Here is my header portion,
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="styles/datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" />
<script src="cordova.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
<script src="scripts/Common.js"></script>
<script src="scripts/FlightServices.js"></script>
</head>
If I comment out the line:
link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
then the icons appear properly but datepicker style is spoiled.
If I put this line:
script src="scripts/datepicker.js"
instead of :
script src="scripts/jquery-ui.js"
Datepicker is completely disabled.
Is there any mistake I am making in this above mentioned portion?
Any wrong file included?
Anyone any suggestion, I shall be thankful.
Thanks
santu ghosh
The order of style sheets is important.
Change the order of style sheets instead of keeping one or the other. Usually, the themes style sheet template should be added first and then, your own style sheet(main.css) which adds in your own modifications to the base template. Edit your main.css to super-impose major conflicts.
I would also recommend putting the mobile style sheets conditionally for mobile platforms only unless this page is strictly for mobile anyways.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />
When I try to set the title of a view page using the title tag I got this title on the page body and I found the head tag to be empty. Here is the head of the page:
<head>
<meta name="layout" content="main">
<title>Implementation Error</title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'errors.css')}" type="text/css">
<r:require modules="bootstrap"/>
</head>
When the page get rendered I got the following:
<body>
Implementation Error
<script src="/accountcontrol/static/plugins/jquery-1.7.2/js/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="/accountcontrol/static/bundle-fixtaglib_head.css" type="text/css" rel="stylesheet" media="screen, projection">
<link href="/accountcontrol/static/bundle-bundle_bootstrap_head.css" type="text/css" rel="stylesheet" media="screen, projection">
<link href="/accountcontrol/css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/accountcontrol/static/js/lputil.js"></script>
</body>
what is going wrong with that?
Thanks,
I had this exact same issue with Grails 2.2 and it brought me here. After a lot of yak shaving, I found out that you need to look in your main.gsp layout file and actually wrap the layout title tag in a title tag like so:
<title><g:layoutTitle/></title>
Once I did this, the problem went away. I must have looked at this page a million times and not seen that.
Check your "main" layout and make sure that "g:layoutTitle" tag defined in head section. For more info see layoutTitle docs.