12202 comments found.
Hi!
any chance to have a real layout example for Datatables.net ajax server with that button Filtereing options. like in normal datatables.net in the next update
+1
The layout with datatables.net AJAX should look similar to Demo 5/dark mode here: https://preview.keenthemes.com/metronic8/demo5/dark/apps/customers/list.html
HTML, Demo 5, dark mode
Best regards!
Hi
,
Regards, Sean
Hello, I have plan to make a application as Fiverr, is there a ready made API to use it in the application? or I must develop the API?
Hi
,
Thanks for your interest in Metronic.
Metronic will be a great helper for the design and frontend part and the backend part you will need to implement by yourself. You can use PHP Laravel version of Metronic that can be a perfect foundation for your application:
https://preview.keenthemes.com/metronic8/laravel/login?demo=demo1Regards, Sean
Hi keenthemes,
As there any chance to have a real layout example for Datatables.net ajax server with that button Filtereing options. like in normal datatables.net in the next update ??
would like also Calendar diffrenet entries with color.
Thank you.
Hi
,
Sure, these features are in our TODO and we will release them soon.
Regards, Sean
thank you
Hello, i downloaded metronic, however, there was no dark theme in the template.
Hi
,
Thanks for your interest in Metronic.
The dark mode’s css files are generated using gulp or webpack tools as explained here: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.htmlStay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Of course, my fault. Thanks for the feedback.
No problem, you are most welcome 
Hi I want to use Demo 4 of version 7 for my Angular project as it already shown in your theme demo that will support angular but after purchasing and downloading, I can’t find that just the first three demos for angular. https://preview.keenthemes.com/metronic/demo4/index.html#
Please help me with this, I really want that demo4 that why I purchased your theme.
Hi,
Thanks for your interest in Metronic.
As can be seen in our preview of Metronic v7 https://keenthemes.com/metronic/?page=metronic7 and Metronic 8 https://keenthemes.com/metronic/ the Demo 4 Angular version is not available yet. We will release it for the new Metronic 8 version with Bootstrap 5 and Angular 12 soon and you can download it for free along with all future updates.
For any further clarifications please contact our support via support@keenthemes.com
Regards, Sean
Hi Dears,
I have few questions: - I want to use local fonts instead of online font like google, how can i do it? - I want to have diffrent font so in ltr version i want font x and in rtl version i want font b how can i acheive that?
Thanks
Hi
,
Thanks for your interest in Metronic.
You can refer to https://www.youtube.com/watch?v=zJwx3Iw6iHc tutorial to learn how to include local font files into your build. Thus you can have 2 bundles for LTR and RTL versions generated separately with different font family files.
For any further assistance please contact our support via support@keenthemes.com
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Hi keenthemes,
I follow the doc for drawer, but wasn’t able to fire an event for a kt_drawer, here’s my drawer html :
<!--begin::Current Patients drawer-->
<div id="kt_current_patients" class="bg-white" data-kt-drawer="true" data-kt-drawer-name="current_patients" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'320px', 'md' : '375px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_current_patients_toggle" data-kt-drawer-close="#kt_current_patients_close">
<!--begin::Card-->
...
...
<!--end::Card-->
</div>
<!--end::Current Patients drawer-->
here’s my javascript : ``` <script>
var drawerEl = document.querySelector("#kt_current_patients");
var drawer = KTDrawer.getInstance(drawerEl);
drawer.on("kt.drawer.toggled", function() {
console.log("kt.drawer.toggled event is fired");
});
</script> ```
Here’s my browser console error, telling me : Uncaught TypeError: drawer is null
:
NB : The drawer toggle just fine, but I want to execute a function when the drawer toggle.
Any idea ?
Thank you
Hi,
We just tested this KTDrawer API with following code for the latest Metronic v8.0.21:
var drawerEl = document.querySelector("#kt_activities");
var drawer = KTDrawer.getInstance(drawerEl);
drawer.on("kt.drawer.toggled", function() {
console.log("kt.drawer.toggled event is fired");
});
The result:
https://imgur.com/urpBP2c
Can you please double check if the drawer element kt_current_patients in DOM exits during the call?
Regards, Sean
Hi Sean, thank’s for the reply.
Used your code, for exactly activities drawer
to make sure that I wont miss a a thing
here the code :
<script>
var drawerEl = document.querySelector("#kt_activities");
var drawer = KTDrawer.getInstance(drawerEl);
drawer.on("kt.drawer.toggled", function() {
console.log("kt.drawer.toggled event is fired");
});
</script>
here’s the browser console :https://ibb.co/Y8XyWwY Obviously if the drawer toggle, there’s the ”#kt_activities” in the DOM.
any idea ??? or should I update to 8.0.21
NB : I also used it on a fresh new, Metronic 8.0.17 (the original downloaded Metronic), I put the drawer script in index.html after all other JS script (at the end), the same error, “Uncaught TypeError: drawer is null”
thank you
Hi,
You will need to run the code on document ready event when all js scripts and DOM is fully loaded. For you can you jquery ready event handler or Metronic’s own solution:
// On document ready
KTUtil.onDOMContentLoaded(function () {
// run any code here once DOM is ready.
});
Please give a try and let us know if you need any further help.
Regards, Sean
Hi Sean,
Thank you for the Last snippet, It Does work
witht the Original Metronic Bare demo HTML.
But unfortunetly it doesn’t play well with htmx (My Ajax Drawer body load content).
for example I added this to the Activities toggle (hx-? attribute to load the activities content), and it doesn’t init the toolip :
<!--begin::Drawer toggle-->
<div class="btn btn-icon btn-active-light-primary w-30px h-30px w-md-40px h-md-40px" id="kt_activities_toggle" hx-get="{% url 'patients:current_patient_drawer_hx' current_patient.pk %}" hx-target="#kt_activities_scroll" hx-swap="innerHTML">
<i class="bi bi-bell fs-2" />
</div>
<!--end::Drawer toggle-->
and here’s the javascript :
KTUtil.onDOMContentLoaded(function () {
// run any code here once DOM is ready.
var drawerEl = document.querySelector("#kt_activities");
var drawer = KTDrawer.getInstance(drawerEl);
drawer.on("kt.drawer.toggled", function() {
console.log("kt.drawer.toggled event is fired");
KTApp.init();
});
});
The console log indeed display “kt.drawer.toggled event is fired”, but TOOLIPS ARE NOT RE-INITIALIZED ???
Here’s the screen shot : https://ibb.co/g9Xrh3J
but here without hx-? attribute it works (No Ajax loading content of the Drawer): https://ibb.co/CP7YNgZ
So are you suggesting from now on to put all my EventListner inside this “KTUtil.onDOMContentLoaded” when it has to do with Metronic Components ? (like drawers, ...)
thank you
Hi
,
In a few hours we will release a new update with Bootstrap 5.1 and you can easiliy update your Metronic version.
The idea is to call the KTApp.init() for all tooltips, popovers initiazation and KTDrawer.createInstances(‘[data-kt-drawer=”true”]’), KTMenu.createInstances(‘[data-kt-menu=”true”]’), etc to initialize Metronic custom components once their reference HTML elements are populated in DOM. If you use ajax based method to load the page content or partials you should call the above initializers in when your ajax call is complete, upon the HTML is live.
If you need any further clarifications please let us know.
Regards, Sean
Thank you sooo much Sean,
It’s like a relieve, LoL
I will download it and open another fresh post, and we ill take it from thre.
sounds super interesting this new version.
thank you.
Hi
,
Sure, if you need any further help please do let us know.
Regards, Sean
Do you have the typeahead functionality implemented in the html version?
Hi
,
Thanks for your interest in Metronic.
The typeahead plugin is no longer maintained by the author. Current we have following relevant components:
https://preview.keenthemes.com/metronic8/demo1/documentation/forms/select2.html https://preview.keenthemes.com/metronic8/demo1/documentation/forms/tagify.htmlIf you need any further clarifications please do let us know.
Regards, Sean
Hello, there is a bug in Metronic 8 Laravel version, if you delete demo3 from public folder while using demo1 the icons from the aside menu dissapears because it’s looking for them in public/demo3/media instead of public/demo1/media
Hi 
Thank for your feedback. We will check it the provide the necessary fix for it.
Thanks
Will the Metronic 8 for angular be ready until August 15th?
Hi,
Thanks for your interest in Metronic.
At the moment we are working on it but can not confirm the ETA yet. We will do our best to release it ASAP.
Regards, Sean
Hello,
I am trying to use version 8.0.21 as it has the
BlockUI 
But when compiling the project and trying to use the BlockUI (Even within the documentation), displays the following error in console.log
Uncaught ReferenceError: KTBlockUI is not defined
at example1 (blockui.js:10)
at Object.init (blockui.js:97)
at HTMLDocument.<anonymous> (blockui.js:108)
Another detail is that when compiled with Webpack, several warnings are appearing
And congratulations to the team, the project is sensational!
Thank you!
Hi 
We will if it in the next update. This is the workaround.
Please add the blockui.js file in this as example below.
tools/webpack/scripts.demo1.js
window.KTBlockUI = require('@/src/js/components/blockui.js');
Thanks
Perfect, thanks!
Your welcome 
Sorry for the typo. We will include this fix in the next update. Let us know if you need any more help.
Thanks
Hi , In Metronic 8 , Demo 1 , Where can I find , Datatables Forms
I am unable to find them in nav
Hi
,
Thanks for your interest in Metronc
You can check the Metronic 8 DataTables.net integration here https://preview.keenthemes.com/metronic8/demo1/documentation/general/datatables/basic.html All form widgets and validation examples are here https://preview.keenthemes.com/metronic8/demo1/documentation/forms/formvalidation/advanced.htmlif you need any further clarifications please do let us know.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Thanks for your great reply
You are most welcome 
I want to integrate Metronic 8 (HTML version) with VueJS 3 manually (because I`m not familar with TypeScript)
But I dont know how to include yours script (plugins.bundle.js / scripts.bundle.js)
Please help me
Hi,
We highly recommend you to use our default Vue version of Metronic. Actually, any javascript code should be valid for typescript.
These are a bundled files, in vue better is to use the source files. html_bootstrap5/theme/tools/webpack/plugins/plugins.js for plugins.bundle.js html_bootstrap5/theme/tools/webpack/scripts.demo1.js for stripts.bundle.js
Regards,
Lauris
Hi,
Please I would like to use the Semantic UI for the datatables on the metronic template – https://datatables.net/examples/styling/semanticui both for styling and responsiveness.
How do I go about that please?
Appreciate your help.
Kind regards.
Hi
,
Thanks for your feedback.
I suppose this requires Semantic UI framework included while Metronic is based on Bootstrap 5.
Please let us know if you need any further clarifications.
Regards, Sean
Hello, First i just got this theme.
How can i make use of this theme in my existing laravel 8 project? If not avaliable.
How can i build my own theme from reading the docs eg I can’t find anything about aside and menus and etc
Hi 
For the existing laravel 8 project, you may use the HTML version. You can integrate the assets (js/css) and make the layout base from HTML file.
You can also use partial files by download it from layout builder page;
https://preview.keenthemes.com/metronic8/demo1/layout-builder.htmlThanks
Hi
,
This is amazing. We will have a look further. Thanks for sharing this.
Regards, Sean
Where is the Tree Js in the last release i could not find it !!!
Hi
,
Thanks for your feedback. We will add jsTree plugin integration in the upcoming update.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Could you share date please , I have release this Friday ,
Please we need the Js Tree ASAP !!!
Hi
,
Sure, we will try.
Regards. Seam
Hi, I am integrating metronic 8 + vue 3 + laravel 8. I got this error during install vuex-module-decorators via npm. How I can resolve this issue?
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: undefined@undefined npm ERR! Found: vuex@4.0.2 npm ERR! node_modules/vuex npm ERR! vuex@”^4.0.0” from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vuex@”3” from vuex-module-decorators@1.0.1 npm ERR! node_modules/vuex-module-decorators npm ERR! vuex-module-decorators@”*” from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with—force, or—legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /root/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-08-02T01_39_33_883Z-debug.log
Hi,
Have you followed our Vue+Laravel integration doc?
You do not need to install all dependencies manually, actually, you can just copy the example of package.json in doc and paste it into package.json in your app.
Delete your current node_modules folder and pacakge-lock.json and then execute npm install again.
Regards,
Lauris
hi, laravel + vue error ” Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. – configuration.optimization.splitChunks.cacheGroups[‘styles-public/css/app’] has an unknown property ‘type’. These properties are valid: object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? } – configuration.stats has an unknown property ‘preset’. These properties are valid: object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? ” It gave such an error even though I made the same document. Can you help me?
Hi,
Can you please attach the configuration of your webpack.mix.js?
It looks like you have errors in it. You can copy a valid configuration from our doc:
const mix = require('laravel-mix');
const path = require('path');
mix
.ts("resources/ts/app.ts", "public/js")
.vue({ version: 3 })
.webpackConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'resources/ts/src/')
}
}
});
Also please make sure that you have installed all required dependencies.
Regards,
Lauris
I added it but still the same error, can you support via email(yilmazoktay124@gmail.com)?
Sure, we will reach you shortly via your email address. Thanks.
Theme demo do not work with angular!. Support service very slow!!!
Hi,
May I know what is your Metronic version and demo ? If you contacted our support via email please let us know your email address so we can double check your request. As per current we have related to all cases related to Angular.
Regards, Sean