12220 comments found.
function sayHi(){
alert("Hi!");
}
Where I have to put it in the Dashboard.js for example?
Hi 
,
Please go to “src\js\app\custom\dashboard.js” and for example right after “calendarInit” function you add your function as:
var sayHi = function(){
alert("Hi!");
}
To call it in a public function you should add below function right after “init: function() {}” in public properties “return { }” clause of the class:
return {
init: function() {
//.....
},
myPublicHello: function() {
sayHi(); // call the private function
}
}
Then you can call the public function as shown below:
Dashboard.myPublicHello();
If you need any further help please let us know.
Thanks.
<span onclick="Dashboard.myPublicHello();"> </span>Uncaught ReferenceError: Dashboard is not defined
Hi,
Yes, this should work as long as you are loaded dashboard.js script in your page where you used the above code in your HTML. Could you please double check it ?
Thanks.
Does’t work, the console throw this message:
Uncaught ReferenceError: Dashboard is not defined
Hi,
Can you check if dashboard.js is included in your page ? The error indicates that you did not include it.
Thanks.
Yes, it is included. All other widgets works fine. Its only my custom function.
Hi,
I just double tested the above code it worked well. The above error clearly indicates that the Dashboard object is not present and most probably dashboard.js script is not included. Can you put “alert(‘1’)” code in dashboard.js, run gulp and try to test if the alert message pops up in your page ?
Thanks.
jQuery(document).ready(function() {
Dashboard.init();
Dashboard.myPublicHello();
});
This doesn’t works:
<button type="button" onclick="Dashboard.myPublicHello();"></button>
Can you send us the entire HTML code of your page ?
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN: Head -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@yield('meta')
<!--BEGIN: Web font -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
<!--END: Web font -->
<!--BEGIN: Base Styles -->
<!--BEGIN: Page Vendors -->
<link href="./css/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<!--END: Page Vendors -->
<link href="./css/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="./css/style.bundle.css" rel="stylesheet" type="text/css" />
<link href="./css/app.css" rel="stylesheet" type="text/css" />
<!--END: Base Styles -->
<link rel="shortcut icon" href="assets/demo/demo2/media/img/logo/favicon.ico" />
</head>
<!-- END: Head -->
<!-- END: Body -->
<body class="m-page--wide m-header--fixed m-header--fixed-mobile m-footer--push m-aside--offcanvas-default" >
<!-- BEGIN: Page -->
<div class="m-grid m-grid--hor m-grid--root m-page">
<!-- BEGIN: Header -->
@include('templates.header')
<!-- END: Header -->
<!-- BEGIN: Body -->
@include('templates.body')
<!-- END: Body -->
@yield('modal')
<!-- BEGIN: Footer -->
@include('templates.footer')
<!-- END: Footer -->
</div>
<!-- END: Page -->
<!-- BEGIN: Quick Sidebar -->
@include('templates.sidebar')
<!-- END: Quick Sidebar -->
<!-- BEGIN: Scroll Top -->
<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
<i class="la la-arrow-up" />
</div>
<!-- END: Scroll Top -->
<!--BEGIN: Base Scripts -->
<script src="./js/vendors.bundle.js" type="text/javascript"></script>
<script src="./js/scripts.bundle.js" type="text/javascript"></script>
<!--END: Base Scripts -->
<!--BEGIN: Page Vendors -->
<script src="./js/fullcalendar.bundle.js" type="text/javascript"></script>
<!--END: Page Vendors -->
<!--BEGIN: Page Snippets -->
<script src="./js/dashboard.js" type="text/javascript"></script>
<!--END: Page Snippets -->
<!-- END: Body -->
Hi,
I need to see where you are calling the custom function. Here in your code I could not see it. The context where you calling it should have access to Dashboard object. Is not in a iframe or outside the main layout somehow ?
Thanks.
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN: Head -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
<!--END: Web font -->
<!--BEGIN: Base Styles -->
<!--BEGIN: Page Vendors -->
<link href="./css/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
<!--END: Page Vendors -->
<link href="./css/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="./css/style.bundle.css" rel="stylesheet" type="text/css" />
<link href="./css/app.css" rel="stylesheet" type="text/css" />
<!--END: Base Styles -->
<link rel="shortcut icon" href="assets/demo/demo2/media/img/logo/favicon.ico" />
</head>
<!-- END: Head -->
<!-- END: Body -->
<body class="m-page--wide m-header--fixed m-header--fixed-mobile m-footer--push m-aside--offcanvas-default" >
***HTML CODE***
<div class="m-portlet m-portlet--bordered m-portlet m-fotos">
<div class="m-portlet__head">
<span onclick="Dashboard.myPublicHello();"><img id="#fav" src="./img/ic/no_fav.svg" /></span>
<img src="./img/perro.jpg" alt="" />
</div>
</div>
***MORE HTML CODE***
<!-- END: Scroll Top -->
<!--BEGIN: Base Scripts -->
<script src="./js/vendors.bundle.js" type="text/javascript"></script>
<script src="./js/scripts.bundle.js" type="text/javascript"></script>
<!--END: Base Scripts -->
<!--BEGIN: Page Vendors -->
<script src="./js/fullcalendar.bundle.js" type="text/javascript"></script>
<!--END: Page Vendors -->
<!--BEGIN: Page Snippets -->
<script src="./js/dashboard.js" type="text/javascript"></script>
<!--END: Page Snippets -->
<!-- END: Body -->
By right it should work. Can’t see any issue with your code. Is it possible to deploy your site to your test server so we can access and check the issue in action. Also please provide us a screenshot of your browser console with the error and also your site where the layout is fully loaded and initialized. You can email any further details to our support at support@keenthemes.com
I think, the variable Dashboard should not be before the html code where it is used?
The only way to help you further is to check your site in your test server. We will need to try it to investigate the issue. Please deploy it and let us know.
i like the template very much, and using for long time already, but i found that latest version v5.0.6 didn’t included the sweet alert 2 plugin in the vendors.bundle.js, have to manually paste in the source code from sweet alert into the file to stop all javascript errors
Hi ,
Thanks for your feedback. Its included in the latest version and you can check it here: https://keenthemes.com/metronic/preview/?page=components/base/sweetalert2&demo=default
Please get the latest v5.0.6.1 version and reinstall all the dependencies with “npm install” command and you will get Sweeralert2 working.
Thanks.
We are facing two issues in the latest update:
1. When using tabs within tabs (line tabs or bootstrap tabs), it’s giving an issue while going from one tab to another. Moreover, as with the earlier version, we are not able to use tabs within tabs within tabs. In other words, tabs to the nth level.
2. Bad request error – the theme is collecting the cache in the browser on every request. After a while, when the browser cache limit is reached, it shows the bad request error which gets resolved after clearing the browser cache.
Thanks in advance.
Hi,
1) This is bootstrap 4’s known nested tab issue and hopefully it will be fixed in the next bootstrap update. We are releasing a new update in a few days with the latest bootstrap 4.beta.3 version.
2) Thanks for your feedback. Could you please let us know what Metronic version are you using ? Metronic does not collect the page cache by its own. We do know have any code or setting to control the browser cache. If you can provide more details(screenshots from the browser console) we will check it further.
Thanks.
Please find attached the screenshots from the browser console. You would notice in the two screenshots that the browser cache is less and then it increases. I have also attached a screenshot from the previous version. You would notice that the cache amount is lesser and it stays at that level only.
https://www.awesomescreenshot.com/image/3087278/cecc12f052c28efc4adeb8ee0a476216 https://www.awesomescreenshot.com/image/3087283/ab8c1e8415e54e9e821b77c24a7cb019 https://www.awesomescreenshot.com/image/3087294/8cbc7662075e16031bcdb8b84c8fa375The version of Metronic is v5.0.5
Hi ,
Thanks for the info. This issue was related to the mDatatable plugin and it was fixed in the latest v5.0.6.1 version. Please get the latest version to get many new features, improvements and bugs fixes.
Thanks.
As a 5x purchaser of your theme (and obviously fan), I have gone through a process a bunch of times, where I basically “clean” everything not needed, removing menu items, clearing out everything in the body to create a master-page/template… Go through js, to disable the unwanted features.
Then I am left with a LOT of files in the assets folders, where I probably only use a few percent – and including a LOT of css and js, that I do not need.
I don’t have a clear answer to what I am looking for, but something like a way of making this process a lot easier and ending up with a more “clean” version, that I can use as a foundation to build on. Please consider this in the future.
Hi ,
Thanks for your feedback.
Please note that with V5 you can easily minimize the bundle by removing unused resources. Then for your production usage you will just a few assets not the ones in the source folder. I would suggest you go through the documentation and get familiar with the file structure of V5. If you need any further help please contact our support at support@keenthemes.com and we will guide you further.
Thanks.
Hi, Thanks for your amazing template. I have just purchased the template and I am able to run the the demos in my local machine. The question is:
- How can I start using the template in a fresh angualr project?
Should start from theme\angular\dist\demo\default (for example)? If yes, Can I move this folder to a new place? and Is there any configuration needed to be in my own project?
Best,
Hi,
You can start with the skeleton Angular application. It is an empty project with the base layout. Yes, you can move the Angular application to other locations. But still, you need to the /theme/angular/src to be with your new place project, for the assets (js/scss) modification. And /theme/angular/tools for the build of assets (js/scss) into a bundle using “gulp”.
Check /theme/angular/tools/conf/angular.json at the config.dist option, add your new output path for the compiled bundle assets to be output.
For more info please refer to the documentation.
Thanks
good morning, I have a question before buying.
If I buy your template, can I modify it to my liking to put it in a script that I am doing and then sell?
Thank you
Hi ,
Thanks for your interest. Yes, you can modify as you want but you can not sell it to unlimited clients. One license allows you to use or sell the theme to one end client. If you are doing a SAAS service where you can have unlimited clients you will need to purchase extended license. If your end product does not charge its users then you can regular license will suffice. But each end use requires a separate license. If you need any further clarifications please let us know.
Thanks.
The demo not working
Hi,
Thanks a lot for informing us. Yeah, we are solving this issue already. it will be live shortly.
Thank you.
Hello,
Do you have example page using Metronic 5 for original Datatable Plugin? Currently your custom Datatable plugin didn’t support all Datatable plugin features.
Thank you.
Hi,
V5 does not use datatables.net plugin anymore. Instead we are focusing on our own custom mDatatable plugin. However you can install and use datatables.net one your own.
Thanks.
Hi, I can understand to config theme\default\tools\conf\default.conf to customize the bundle css and js. But where could I check out which dependencies are used in single page? Such as, in theme\default\dist\default\components\timeline\timeline-2.html, and what dependencies should I keep for minimize the bundle? thanks.
Hi,
Metronic uses central bundle css and js for all pages. You don’t need to create bundle per page since once the bundle is downloaded it will be kept in the browser cache. But if you include custom css/js files per page.
Thanks.
Yes, I can understand that. But on user first visit, it would take more time to download the css/js. for us, it is better way to separate the dependencies and bundle them for single page.
Hi,
This is a Metronic’s approach that’s preferred by the majority. Of course, each method has its own pros and cons. Also I would like to suggest you to enable gzip compression in your server side to reduce the css/js files size up to 50-70%.
Thanks.
Hi.. i have a problem when i’m using datatable in demo4 it looks like this https://prnt.sc/hw9bs2
Please help.
Hi,
Noted. We are checking this issue and will push a quick fix very soon.
Thanks.
Hi,
We have tested it and could not reproduce this issue in Demo 4. Are you using the latest Metronic v5.0.6.1 ? If not, please update to the latest version since in the recent versions we have fixed some major datatable issues.
If you are already using the latest version then please send us your code(HTML, JS) and the steps to reproduce the issue.
Thanks.
thanks for responding..
You we very welcome. Please let us know the result
i’m using the latest Metronic v5.0.6.1 I just downloaded it yesterday.
this is the html code I use. https://drive.google.com/file/d/1FEjKov7AaTq-nYd6V1mhc4cQunxyIHA_/view?usp=sharingfor the js files i use this default/assets/demo/default/custom/components/datatables/base/data-ajax.js
Hi,
You can you please try this quick fix:
1) go to “src\sass\framework\components\base\grid\_grid.scss”
2) In line #54 change
&.m-grid__item--fluid {
flex: 1;
}
to:
&.m-grid__item--fluid {
flex: 1 auto;
}
In the next update this fix will be included.
Thanks.
Thanks.. it worked.
i have another problems with demo4..
when I use Datatable and Portlet Tools: Fullscreen, The Layout become messy like this https://prnt.sc/hycgo2
I’ve also tried it with demo1 (default) and it works unlike demo4.
Noted. we will check it further and try to fix it.
is that alredy fixed in the latest update?
and in the demo4 modal z-index problem
Hi ,
Yes, the modal z-index issue has been fixed in the recent update.
Thanks.
Not able to buy “Metronic – Responsive Admin Dashboard Template”. My credit card & paypal account is getting rejected. Don’t know why. Please help!
Hi,
Thanks for your interest in Metronic and sorry to hear that.
Please contact the marketplace help as the site and payment issues are not controlled by authors. You can create a support ticket by following the below link: https://help.market.envato.com/hc/en-us/requests/newThanks.
Hi, i bought your template and i’m trying to change the brand color to my project brand color. The issue is when I use gulp inside the “tools” folder it gives the following error: Error: File to import not found or unreadable: ../../../../../tools/bower_components/bootstrap/scss/bootstrap. Parent style sheet: D:/development/webroot/metronic_v5.0.5/theme/default/src/sass/framework/vendors/bootstrap/bootstrap.scss on line 13 of ../src/sass/framework/vendors/bootstrap/bootstrap.scss >> @import ”../../../../../tools/bower_components/bootstrap/scss/bootstrap”;
Basically, in the vendors bootstrap scss file there is a reference to bower_components, and I think you guys changed to yarn right?
So, what should be written on that line 13?
Thanks!!! btw, great template
Hi,
May I know what Metronic version are you using ? We advise you to use the latest v5.0.6.1 version with yarn support. In the latest version we removed bower and used yarn instead since bower is no longer maintained anymore by its authors. For more info please refer to the documentation of the latest version.
Thanks.
I have tried tu use select2 with data-placeholder, but is not working (it works only with the placeholder defined when instantiate). How can I fix this?
Hi,
Thanks for your feedback. As you can see here this is plugin’s limitation https://github.com/select2/select2/issues/5139 We can not control such core bugs or limitations so we will wait for the official fix for the issue.
Thanks.
Hello,
This guys using your template to build a PHP script and selling on codecanyon https://codecanyon.net/item/sociomanager-a-tool-that-places-all-your-social-accounts-on-auto-pilot/21189913/commentsThanks
Thank you for informing. We will contact the author.
Just purchased, but We dont seem to the have demo2 included in the download? http://keenthemes.com/metronic/preview/?demo=demo2#
Hi,
All the demos you seen in the preview are included in your download. Please launch the documentation’s index page in your browser and you can get easy access to the demos. For more info please check the documentation and get familiar with the file structure.
Thanks.
We have purchased version 4.7.5. We want to upgrade to the latest version (5). Do we need to buy another license to get the version 5 ?
Hi ,
Thanks.
We just need an initial hand-holding to get started and to get acquainted.
Hi,
After purchase you can get the theme support with the support policy explained here: https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469/support
Thanks.
thanks so much.
You are welcome
Hi Keenthemes,
First of all “Awesomest Admin Template” and one of the best from my last 6months of research in Admin Templates. Just a quick question…I saw a discount 2days back…now it’s not there…I seriously need this template…is there any option or coupon code (if possible).
Hi ,
Thanks for your interest. Unfortunately the New Year Sale is just ended and now you can purchase it at normal price. The coupon code is not possible in this marketplace.
Thanks.
Alright…that’s fine I am purchasing it now at the normal price now. As I need the templates to build my application …would you be helping us if we need your technical help (if required)!
What I mean is just to get an initial hand-holding.
Hi,
Thanks for choosing Metronic.
Yes, after purchase you can get the theme support with the support policy explained here: https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469/support
Thanks.
Hello,
Does the new version not have the specific pages of apps? For example the ecommerce pages …?
Hi ,
Thanks.
Hello, I’m looking to purchase the theme. Does it include psd or sketch files?
Hi ,
Thanks for your interest in Metronic.
After purchase we can send a draft version of the PSD files for limited dashboard screens only. We are working on the final PSD files to add more layouts and elements with better layer structure.
Thanks.
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
