hi iam use kendo ui grid but dont compile .iam use mvc with two arrye
this code use Areas name profile .
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.rtl.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/kendo/angular.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.fa-IR.js"></script>
<link href="~/Content/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
<div data-ng-app="app" data-ng-controller="MyCtrl">
<kendo-grid options="gridOptions"></kendo-grid>
</div>
<div id="window"></div>
<script type="text/javascript">
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope) {
$scope.gridOptions = {
Related
I follow instruction on https://datatables.net/examples/styling/bootstrap5.html
And I have setup in the style as sequence here
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome Icons -->
<link href="~/lib/fontawesome/css/all.css" rel="stylesheet" />
<!-- Theme style bootstrap 5.1 -->
<link href="~/css/soccer/soccer.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!--icheck-bootstrap v3.0.1-->
<link href="~/lib/icheck-bootstrap/icheck-bootstrap.css" rel="stylesheet" />
<!-- Custome Site csss Style-->
<link rel="stylesheet" href="~/css/site.css" />
<link href="~/css/layerslider.css" rel="stylesheet" />
<!-- For Custom External Login Button -->
<link href="~/css/externalLogin.css" rel="stylesheet" />
<!-- Theme style admin LTE 3.1 -->
<link href="~/css/adminlte.css" rel="stylesheet" />
<link href="~/css/footballMatch.css" rel="stylesheet" />
And the sequence of the script here
<!-- jQuery 3.6-->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 5.1 bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery-->
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>
<script src="~/lib/datatables/datatables.js"></script>
<script src="~/lib/datatables/DataTables/js/dataTables.bootstrap5.js"></script>
<!-- AdminLTE App 3.1 -->
<script src="~/js/adminlte.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/js/tables/table.js" asp-append-version="true"></script>
And in the view
#model IEnumerable
#{
ViewData["Title"] = "ViewAllMatch";
}
<h3>View All Match</h3>
<script>
$(document).ready(function () {
$('#ViewAllMatchTbl').DataTable();
});
</script>
<div class="table table-responsive-sm">
<table id="ViewAllMatchTbl" class="table table-striped table-hover">
//Remove to clear
</table>
</div>
How can I know and debug the right order of style or the script.
Thanks
Try to use the following scripts：
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0-rc/js/adminlte.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
I use the scripts and do not get error:
I need to inject material.js in my angularJS but I have this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24%24HashMapProvider%20%3C-%20%24%24HashMap%20%3C-%20%24%24animateQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24mdUtil%20%3C-%20%24mdTheming%20%3C-%20%24%24animateQueue
This is my code in :
<link rel="stylesheet" href="SRC/Bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="SRC/Bootstrap/css/font-awesome.css" />
<script src="SRC/AngularJs/AngularJs.js"></script>
<script src="SRC/JQuery/JQuery.js"></script>
<script src="SRC/Bootstrap/js/bootstrap.min.js"></script>
<script src="SRC/AngularJs/Angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css" rel="stylesheet">
And this is my module:
var routeApp = angular.module('myApp', ['ngRoute','ngSanitize','ngMaterial']);
If someone can help me.
The problem came from my versions, resolved :D
it works like this
<link rel="stylesheet" href="SRC/Bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="SRC/Bootstrap/css/font-awesome.css" />
<script src="SRC/JQuery/JQuery.js"></script>
<script src="SRC/Bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-aria.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.layouts.css" rel="stylesheet">
i want to use ngAnimate but somehow it doesn't work and i don't know why.
i have added everything to my page and have injected them in my app but still i am getting nothing.
here is my index and my app;
var app = angular.module('iranfile', ['ngAnimate','ngRoute','mgcrea.ngStrap']);
<html ng-app="iranfile">
<!-- ye lahze khafe sho-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> home page </title>
<!-- Add Jquery and bootstrap -->
<script src="js/jQuery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.rtl.min.css"/>
<link rel="stylesheet" href="css/bootstrap/bs-additional/bootstrap-additions.min.css"/>
<!-- / Add Jquery and bootstrap -->
<!-- Angular CSS -->
<link rel="stylesheet" href="js/angular/ng-animation.css"/>
<link rel="stylesheet" href="css/angular/angular-motion.min.css"/>
<!-- Angular CSS -->
<link rel="stylesheet" href="js/toastr/toastr.min.css"/>
<!-- Narvan CSS DOCs -->
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/singup.css"/>
<link rel="stylesheet" href="css/estate.css"/>
<link rel="stylesheet" href="css/favor.css"/>
<link rel="stylesheet" href="css/account.css"/>
<!-- Narvan CSS DOCs -->
</head>
<body>
</body>
<!-- ADD AngularJs -->
<script src="js/angular/angular.min.js"></script>
<!--<script src="css/angular/angular-animate.min.js"></script>-->
<script src="js/angular/angular-1.4.4/angular-animate.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/tooltip.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/parse-options.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-route.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-sanitize.min.js"></script>
<script src="js/client-connection.js"></script>
<script src="js/app.js"></script>
I've ran into lots of issues when using angular-strap & bootstrap-rtl
Try removing bootstrap rtl and check...
I have downloaded the demo for mobileangularui. Upon loading in chrome I get error for loading mobile-angular-ui-hover.min.css, dist/css/mobile-angular-ui-base.min.css, dist/css/mobile-angular-ui-desktop.min.css and mobile-angular-ui.gestures.min.js. Am not able to understand what am I missing.
Here's my code:
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="/dist/css/mobile-angular-ui-desktop.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
Why are there duplicate names in my dropdown list? Also how do I turn the dropdown toggle into a dropdown button without having a black bullet on the left
http://test.shibagames.com/
Here's the code:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link href="menu_source/styles.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/chromeSafari.css" type="text/chrome/safari" />
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css" type="text/css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="music.js"></script>
<script src="example.js"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.10/angular.js" data-semver="1.2.10"></script>
<script src="app.js"></script>
<script src="javascript/main.js"></script>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.min.js"></script>
</head>
<body>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a>{{choice}}</a>
</li>
</ul>
</li>
</body>
</html>
app.js
var app = angular.module('myApp', []);
function myCtrl($scope) {
$scope.active = { val : '' };
$scope.Activate = function(buttonVal) {
$scope.active.val = buttonVal;
};
}
example.js
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"The first choice!",
"And another choice for you.",
"but wait! A third!"
];
}
There is very simple explanation: you are including AngularJS 3 times (!):
2 times from http://code.angularjs.org/1.2.10/angular.js
1 time from angular.min.js
Generally speaking it looks like dependencies of this test page are not well managed:
you are including Bootstrap's JavaScript which is not needed to make directives from the Angular.UI.Bootstrap work properly
if you want to use Bootstrap's JavaScript you would need jQuery as well and this is not included.