Integrating KendoUI on an existing Angular application
I'm quite new to Angular, I've inherited a project made with angular 1.4.7 and trying to add missing features that the previous dev left missing.
Basically what happens is that the KendoUI widget is not showing. For simplicity, I've added a kendo numeric textbox as this sample shows. The main difference is that in my existing application I have a page that renders the content instead of the snippet code of the dojo with HTML, body tags.
My cshtml page is simple as
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<div>Calendario</div>
<div flex> </div>
<md-button class="md-raised" ng-click="nuovoEventoCalendario($event);"><i class="fa fa-plus"></i> Crea evento</md-button>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
});
Now the result is the following
As you can see there's no kendoui in there...
I've checked and the kendo js/css file are loaded correctly
I've added those bundles inside my BundleConfig.cs
private static void AddKendoBundles(BundleCollection bundles)
{
var stylebundles = new StyleBundle("~/bundles/kendo/css").Include(
"~/Content/kendo/2017.3.1026/kendo.common.min.css",
"~/Content/kendo/2017.3.1026/kendo.rtl.min.css",
"~/Content/kendo/2017.3.1026/kendo.silver.min.css",
"~/Content/kendo/2017.3.1026/kendo.mobile.all.min.css"
);
bundles.Add(stylebundles);
var scriptbundle = new ScriptBundle("~/bundles/kendo/js").Include(
// "~/Scripts/kendo/2017.3.1026/angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.all.min.js",
// "~/Scripts/kendo/2017.3.1026/kendo.angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.timezones.min.js",
"~/Scripts/kendo/2017.3.1026/js/jszip.min.js"
);
scriptbundle.Orderer = new FileOrderBundleOrderer();
bundles.Add(scriptbundle);
}
I think for some reason that the kendo-directive is not applied.
Any suggestion from where I should start looking at?
Is there a way I can check if kendo.directives are correctly loaded?
Thanks in advance
angularjs asp.net-mvc kendo-ui kendo-angular-ui
edited Nov 13 '18 at 23:52
georgeawg
33k104968
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
add a comment |
I'm quite new to Angular, I've inherited a project made with angular 1.4.7 and trying to add missing features that the previous dev left missing.
Basically what happens is that the KendoUI widget is not showing. For simplicity, I've added a kendo numeric textbox as this sample shows. The main difference is that in my existing application I have a page that renders the content instead of the snippet code of the dojo with HTML, body tags.
My cshtml page is simple as
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<div>Calendario</div>
<div flex> </div>
<md-button class="md-raised" ng-click="nuovoEventoCalendario($event);"><i class="fa fa-plus"></i> Crea evento</md-button>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
});
Now the result is the following
As you can see there's no kendoui in there...
I've checked and the kendo js/css file are loaded correctly
I've added those bundles inside my BundleConfig.cs
private static void AddKendoBundles(BundleCollection bundles)
{
var stylebundles = new StyleBundle("~/bundles/kendo/css").Include(
"~/Content/kendo/2017.3.1026/kendo.common.min.css",
"~/Content/kendo/2017.3.1026/kendo.rtl.min.css",
"~/Content/kendo/2017.3.1026/kendo.silver.min.css",
"~/Content/kendo/2017.3.1026/kendo.mobile.all.min.css"
);
bundles.Add(stylebundles);
var scriptbundle = new ScriptBundle("~/bundles/kendo/js").Include(
// "~/Scripts/kendo/2017.3.1026/angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.all.min.js",
// "~/Scripts/kendo/2017.3.1026/kendo.angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.timezones.min.js",
"~/Scripts/kendo/2017.3.1026/js/jszip.min.js"
);
scriptbundle.Orderer = new FileOrderBundleOrderer();
bundles.Add(scriptbundle);
}
I think for some reason that the kendo-directive is not applied.
Any suggestion from where I should start looking at?
Is there a way I can check if kendo.directives are correctly loaded?
Thanks in advance
angularjs asp.net-mvc kendo-ui kendo-angular-ui
edited Nov 13 '18 at 23:52
georgeawg
33k104968
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
add a comment |
I'm quite new to Angular, I've inherited a project made with angular 1.4.7 and trying to add missing features that the previous dev left missing.
Basically what happens is that the KendoUI widget is not showing. For simplicity, I've added a kendo numeric textbox as this sample shows. The main difference is that in my existing application I have a page that renders the content instead of the snippet code of the dojo with HTML, body tags.
My cshtml page is simple as
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<div>Calendario</div>
<div flex> </div>
<md-button class="md-raised" ng-click="nuovoEventoCalendario($event);"><i class="fa fa-plus"></i> Crea evento</md-button>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
});
Now the result is the following
As you can see there's no kendoui in there...
I've checked and the kendo js/css file are loaded correctly
I've added those bundles inside my BundleConfig.cs
private static void AddKendoBundles(BundleCollection bundles)
{
var stylebundles = new StyleBundle("~/bundles/kendo/css").Include(
"~/Content/kendo/2017.3.1026/kendo.common.min.css",
"~/Content/kendo/2017.3.1026/kendo.rtl.min.css",
"~/Content/kendo/2017.3.1026/kendo.silver.min.css",
"~/Content/kendo/2017.3.1026/kendo.mobile.all.min.css"
);
bundles.Add(stylebundles);
var scriptbundle = new ScriptBundle("~/bundles/kendo/js").Include(
// "~/Scripts/kendo/2017.3.1026/angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.all.min.js",
// "~/Scripts/kendo/2017.3.1026/kendo.angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.timezones.min.js",
"~/Scripts/kendo/2017.3.1026/js/jszip.min.js"
);
scriptbundle.Orderer = new FileOrderBundleOrderer();
bundles.Add(scriptbundle);
}
I think for some reason that the kendo-directive is not applied.
Any suggestion from where I should start looking at?
Is there a way I can check if kendo.directives are correctly loaded?
Thanks in advance
angularjs asp.net-mvc kendo-ui kendo-angular-ui
edited Nov 13 '18 at 23:52
georgeawg
33k104968
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
I'm quite new to Angular, I've inherited a project made with angular 1.4.7 and trying to add missing features that the previous dev left missing.
Basically what happens is that the KendoUI widget is not showing. For simplicity, I've added a kendo numeric textbox as this sample shows. The main difference is that in my existing application I have a page that renders the content instead of the snippet code of the dojo with HTML, body tags.
My cshtml page is simple as
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<div>Calendario</div>
<div flex> </div>
<md-button class="md-raised" ng-click="nuovoEventoCalendario($event);"><i class="fa fa-plus"></i> Crea evento</md-button>
</div>
<script>
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) {
});
Now the result is the following
As you can see there's no kendoui in there...
I've checked and the kendo js/css file are loaded correctly
I've added those bundles inside my BundleConfig.cs
private static void AddKendoBundles(BundleCollection bundles)
{
var stylebundles = new StyleBundle("~/bundles/kendo/css").Include(
"~/Content/kendo/2017.3.1026/kendo.common.min.css",
"~/Content/kendo/2017.3.1026/kendo.rtl.min.css",
"~/Content/kendo/2017.3.1026/kendo.silver.min.css",
"~/Content/kendo/2017.3.1026/kendo.mobile.all.min.css"
);
bundles.Add(stylebundles);
var scriptbundle = new ScriptBundle("~/bundles/kendo/js").Include(
// "~/Scripts/kendo/2017.3.1026/angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.all.min.js",
// "~/Scripts/kendo/2017.3.1026/kendo.angular.min.js",
"~/Scripts/kendo/2017.3.1026/kendo.timezones.min.js",
"~/Scripts/kendo/2017.3.1026/js/jszip.min.js"
);
scriptbundle.Orderer = new FileOrderBundleOrderer();
bundles.Add(scriptbundle);
}
I think for some reason that the kendo-directive is not applied.
Any suggestion from where I should start looking at?
Is there a way I can check if kendo.directives are correctly loaded?
Thanks in advance
angularjs asp.net-mvc kendo-ui kendo-angular-ui
angularjs asp.net-mvc kendo-ui kendo-angular-ui
edited Nov 13 '18 at 23:52
georgeawg
33k104968
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
edited Nov 13 '18 at 23:52
georgeawg
33k104968
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
edited Nov 13 '18 at 23:52
georgeawg
33k104968
edited Nov 13 '18 at 23:52
georgeawg
33k104968
edited Nov 13 '18 at 23:52
georgeawg
33k104968
33k104968
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
asked Nov 13 '18 at 23:46
advapiadvapi
1,04111131
1,04111131
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291126%2fintegrating-kendoui-on-an-existing-angular-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291126%2fintegrating-kendoui-on-an-existing-angular-application%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
