aspnet-core, angular 5.4.1 I am trying to use Metronic's portlet tools. I believe that to get the expand/collapse close etc functionality to work I need to include the portlet.js library. How do i go about including this for an individual page in Zero? If i can't do it for an individual page how do i import across the board?
12 Answer(s)
-
0
Let me put this another way. When I copy the code below from the Metronic template why don't toggle, reload, fullscreen and remove work? I am getting no errors in the browser.
<div class="m-portlet m-portlet--accent m-portlet--head-solid-bg m-portlet--head-sm" data-portlet="true" id="m_portlet_tools_1"> <div class="m-portlet__head"> <div class="m-portlet__head-caption"> <div class="m-portlet__head-title"> <span class="m-portlet__head-icon"> <i class="flaticon-placeholder-2"></i> </span> <h3 class="m-portlet__head-text"> Action Tools </h3> </div> </div> <div class="m-portlet__head-tools"> <ul class="m-portlet__nav"> <li class="m-portlet__nav-item"> <a href="" data-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon"> <i class="la la-angle-down"></i> </a> </li> <li class="m-portlet__nav-item"> <a href="" data-portlet-tool="reload" class="m-portlet__nav-link m-portlet__nav-link--icon"> <i class="la la-refresh"></i> </a> </li> <li class="m-portlet__nav-item"> <a href="" data-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon"> <i class="la la-expand"></i> </a> </li> <li class="m-portlet__nav-item"> <a href="#" data-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon"> <i class="la la-close"></i> </a> </li> </ul> </div> </div> <div class="m-portlet__body"> <div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true" data-max-height="300" style="overflow:hidden; height: 300px"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. <div class="m-separator m-separator--space m-separator--dashed"></div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. <div class="m-separator m-separator--space m-separator--dashed"></div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. </div> </div> </div>I have searched the Metronic forms to no avail, I believe these functions should just work????
-
0
You might need to include script below into your page;
<a class="postlink" href="http://keenthemes.com/metronic/preview/assets/demo/default/custom/components/portlets/tools.js">http://keenthemes.com/metronic/preview/ ... s/tools.js</a>
-
0
@ismcagdas, thanks for getting back, always a pleasure working with you guys. You make this sound easy but I have a few questions having tried to get this to work. I created a new file "angular\src\assets\metronic\src\js\framework\components\general\portlet-tool.js". I copied and pasted the contents of the file you directed me to. I add the path for the new file toangular.json for the build and test nodes: "src/assets/metronic/src/js/framework/components/general/portlet-tools.js". I rebuild and serve and still nothing. There's a few things I don't understand here:
- The file you pointed me to, where is that in the metronic documentation?
- We use metronic for angular, why do we have a jquery file to load?
- How do I load a jquery file for a specific page or must I add it to the entire bundle (as I have done above, although without success).
- Most importantly, how do I actually get this to work, if you could supply step-by-step instructions I would be forever in your debt....
-
0
Hi,
I haven't look into the content of this file, sorry. In order to make it work;
- you need to add below line into <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/typings.d.ts">https://github.com/aspnetzero/aspnet-ze ... pings.d.ts</a>.
declare var PortletTools: any; // Related to Metronic- Then, you need to call "PortletTools.init()" in the ngAfterView init of app component or any component you are using the portlets.
For your questions;
- The file you pointed me to, where is that in the metronic documentation?
I haven't seen it in Metronic's documentation. Most of the Metronic tools/components are not included in Metronic's documentation. We are reading the code in order to learn it most of the time.
- We use metronic for angular, why do we have a jquery file to load?
Metronic is actually a jQuery based theme. It's Angular version also uses lots of jQuery components. But as far as I know they are very close to release a fully Angular 6 based template soon.
- How do I load a jquery file for a specific page or must I add it to the entire bundle (as I have done above, although without success).
You need to add it into entire bundle. It is possible to create separate chuncks as far as I know but I don't know how to do it. You can check angular-cli's documentation for that.
- Most importantly, how do I actually get this to work, if you could supply step-by-step instructions I would be forever in your debt....
Explained above. I hope it works for you.
-
0
Hi @ismcagdas, @jizhongdi - thanks for your input.
I've drawn a blank on this one and it seems very messy with all the changes to angular.json and typings.d.ts and package.json. These are not files i like to mess with because they cause all kinds of problems when trying to merge an upgrade to the latest Zero version (something for which I have set aside one or two days). Here's the steps, in case anyone can point to a quick fix.
I create a new file "angular\src\assets\metronic\src\js\framework\components\general\portlet-tool.js". I copy and paste the contents of the file @ismcagdas directed me to. I add the path for the new file to angular.json for the build and test nodes: "src/assets/metronic/src/js/framework/components/general/portlet-tools.js". I add the line "declare var PortletTools: any; // Related to Metronic" to typings.d.ts. I implement AfterViewInit in my component and call
ngAfterViewInit() { PortletTools.init(); }I run yarn and ng serve and have the error message "Uncaught ReferenceError: mPortlet is not defined" which is an error from my "portlet-tool.js" file. I take that file out of angular.json and the functions do not work so I put them back in and follow the instructions pointed out by @jizhongdi (thanks) at: [https://forum.aspnetboilerplate.com/viewtopic.php?f=5&t=11214&hilit=jizhongqi]). From this set of instructions I add "@types/jqueryui": "1.11.28", to my devdependencies in package.json and "node_modules/jqueryui/jquery-ui.js" in angular.json for the build and test nodes. I get the same error message "Uncaught ReferenceError: mPortlet is not defined" which is an error from my "portlet-tool.js" file.
This not a show stopper, I can live with0uot this functionality and use an accordion instead but i like the full screen expansion for the purpose of editing a large document-type data segment of the application. If anyone can point me to quick fix, great. If not, thanks for all the help.
-
0
Hi @ismcagdas - My request is to upgrade to Metronic 5.5, the full angular version: [https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469]) Can you indicate the release this will be targeted for?
-
0
I second this request, maybe it should be in github as an item?
Also, they have a number of demo templates. For now only one has angular demo: <a class="postlink" href="https://keenthemes.com/metronic/preview/angular/default/">https://keenthemes.com/metronic/preview ... r/default/</a>
I wonder if those templates are real templates and aspnetzero can offer on the fly choice of what template to use out of demo stack?
From metronic default demos, looks like the naming convention is the same, just pointing to different demo subdirectory.
This way, user/tenant admin can pick what layout they like the best!
-
0
<a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/issues/1501">https://github.com/aspnetzero/aspnet-ze ... ssues/1501</a>
-
0
@BobIngham, did you get metronic portlets working? I have the same issue when I tried to incorporate mWizard. I gave up finally. I feel Metronic is bloated to carry around in the project for limited usage overall. Wish I can completely get rid of it from ANZ and use just bootstrap.
-
0
@mmukkara - no, I didn't get portlets working. I simply don't have the time to work out what needs to be done and, having got close, I realised there were far too many changes to core files (package.json, angular.json etc) making future upgrades more difficult. Hopefully the upgrade to 5.5 should help but I'm not holding my breath! Let me know if you manage to get the wizard working because it's definitely something I would like to use.
-
0
@mmukkara, have you tried my suggestions ?
