12182 comments found.
Hi there! how do I connect this dashboard to a database to add content with a form into a table?
- Thanks, Yan.
Hi,
Thanks for your interest in Metronoc.
This question is related to server side programming which is not covered by our support. Our support here covers only frontend part related questions for the theme. If you are backend developer you can easily generate the pages by using Metronic templates and feed metronic components with the data retrieved from your backend. If you are a frontend developer then you will need a backend developer’s help in your project.
Thanks.
Hi, we recently bought metronic theme. We are using Angular 6 framework. Login screen of Angular version of metronic theme doesn’t support mobile version. Could you help us about this situation? (File directory of demo2 : \metronic_v5.5.4\metronic_v5.5.4\angular\dist\demo\demo2)
Hi, Thanks for your interest in Metronic. Can you please send the screenshot of the issue?
Thanks
hi, here the link: https://ibb.co/mKKZqK if something goes wrong with shared image, pls let me know. Thanks
We will check it and provide the fix soon.
Thanks
Well, I am trying the newest version, and I tried add my own style.css, but not working.
And I read the doc. In the Stylesheets, it mentions I might add my own style.scss.
But, I am not well in scss:|
Is there a way to add a style.css and is working?
Oops, it works now. I missed something.
Hi,
Great. All the best with your project.
Just a reminder: If you like to continue using the theme support please consider extending your support subscription as it is expired now.
Thanks.
Please, how can I do for the datatable when I order any column go to the first page of the datatable Thanks!
Hi,
Can you please clarify your requirement? Do you want the datatable go to the first page, when click column order?
Thanks.
m-widget2 when use loop foreach in(m-widget2__item m-widget2__item—) m-widget2__text out of m-portlet__body
Hi,
Please double check your code to follow the HTML markup as per original demo examples. Your generated HTML code should follow the markup. If you need any further help please contact support at support@keenthemes.com and provide your license key.
Thanks.
<div class=”m-portlet” >
<div class=”m-portlet__head”>
<div class=”m-portlet__head-caption”>
<div class=”m-portlet__head-title”>
<h3 class=”m-portlet__head-text”>
<?php echo $this->lang->line('to_do'); ?> <?php echo $this->lang->line('list'); ?>
</h3>
</div>
</div>
<div class=”m-portlet__head-tools”>
<?php
if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_add’)) {
?>
<ul class=”nav nav-pills nav-pills-brand m-nav-pills-align-right m-nav-pills-btn-pill m-nav-pills-btn-sm” role=”tablist”>
<li class=”nav-item m-tabs__item”>
<a class=”nav-link m-tabs__link active” data-toggle=”tab” href=”#m_widget2_tab1_content” role=”tab”>
Today
</a>
</li>
<li class=”nav-item m-tabs__item”>
<a class=”nav-link m-tabs__link” data-toggle=”tab” href=”#m_widget2_tab2_content1” role=”tab”>
Week
</a>
</li>
<li class=”nav-item m-tabs__item”>
<a class=”nav-link m-tabs__link” data-toggle=”tab” href=”#m_widget2_tab3_content1” role=”tab”>
Month
</a>
</li>
<li class=”m-portlet__nav-item”>
<button class=”btn btn-accent m-btn m-btn-custom m-btn-icon m-btn-pill m-btn-air” onclick=”add_task()”>
<i class=”la la-plus”></i>
</button>
</li>
</ul>
<?php } ?>
</div>
</div>
<div class=”m-portlet__body ”>
<div class=”tab-content”>
<div class=”tab-pane active” id=”m_widget2_tab1_content”>
<div class=”m-widget2 ”>
<?php
$widget_color = array(‘success’, ‘warning’, ‘danger’, ‘info’, ‘primary’, ‘brand’, ‘accent’, ‘focus’, ‘metal’);
$x = 0;
?>
<?php
foreach ($tasklist as $taskkey => $taskvalue) {
$class = $widget_color[$x % 9];
$titels = $taskvalue[“event_title”];
?>
<div class=”m-widget2__item m-widget2__item-<?php echo $class; ?> ” >-solid m-checkbox-
<div class=”m-widget2__checkbox”>
<label class=”m-checkbox m-checkboxsingle m-checkbox-brand”>
<input type=”checkbox” <?php
if ($taskvalue[“is_active”] 'yes') {
echo "checked";
}
?>
id="check<?php echo $taskvalue["id"]; ?>" onclick="markcomplete('<?php echo $taskvalue["id"]; ?>')" name="eventcheck" value="<?php echo $taskvalue["id"]; ?>">
<span></span>
</label>
</div>
<div class="m-widget2__desc ">
<span class="m-widget2__text" <?php if ($taskvalue["is_active"] ‘yes’) { ?> style=”text-decoration: line-through;color: #4f881d;” <?php } ?>> <?php echo $titels; ?> </span>
<br>
<span class=”m-widget2__user-name” >
<?php echo date("m/d/Y", strtotime($taskvalue["start_date"])); ?>
</span>
</div>
<div class=”m-widget2__actions”>
<div class=”m-widget2__actions-nav”>
<div class=”m-dropdown m-dropdown-inline m-dropdown-arrow m-dropdown-align-right m-dropdown-align-push” data-dropdown-toggle=”hover”>
<a href=”#” class=”m-dropdown__toggle”>
<i class=”la la-ellipsis-h”></i>
</a>
<div class=”m-dropdown__wrapper”>
<span class=”m-dropdown__arrow m-dropdown__arrow-right m-dropdown__arrow-adjust”></span>
<div class=”m-dropdown__inner”>
<div class=”m-dropdown__body”>
<div class=”m-dropdown__content”>
<ul class=”m-nav”>
<li class=”m-nav__item”>
<?php
if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_delete’)) {
?>
<a href=”#” onclick=”deleteevent(’<?php echo $taskvalue[“id”]; ?>’, ‘Task’); return false;” class=”m-nav__link”>
<i class=”m-nav__link-icon flaticon-delete-1”></i>
<span class=”m-nav__link-text”>
</span>
</a>
<?php } ?>
</li>
<li class=”m-nav__item”>
<?php
if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_edit’)) {
?>
<a href=”#” onclick=”edit_todo_task(’<?php echo $taskvalue[“id”]; ?>’); return false;” class=”m-nav__link”>
<i class=”m-nav__link-icon flaticon-edit-1”></i>
<span class=”m-nav__link-text”>
</span>
</a>
<?php } ?>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
</div>
<div class=”tab-pane” id=”m_widget2_tab2_content”>
</div>
<div class=”tab-pane” id=”m_widget2_tab3_content”>
</div>
</div>
</div>
</div>
<div class=”m-portlet” >
<div class=”m-portlet__head”>
<div class=”m-portlet__head-caption”>
<div class=”m-portlet__head-title”>
<h3 class=”m-portlet__head-text”>
<?php echo $this->lang->line(‘to_do’); ?> <?php echo $this->lang->line(‘list’); ?>
</h3>
</div>
</div>
<div class=”m-portlet__head-tools”>
<?php
if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_add’)) {
?>
<ul class=”nav nav-pills nav-pills-brand m-nav-pills-align-right m-nav-pills-btn-pill m-nav-pills-btn-sm” role=”tablist”>
<li class=”nav-item m-tabs__item”>
<a class=”nav-link m-tabs__link active” data-toggle=”tab” href=”#m_widget2_tab1_content” role=”tab”>
Today
</a>
</li>
<li class=”nav-item m-tabs__item”>
<a class=”nav-link m-tabs__link” data-toggle=”tab” href=”#m_widget2_tab2_content1” role=”tab”>
Week
</a>
</li>
<li class=”nav-item m-tabs__item”>
<a class=”nav-link m-tabs__link” data-toggle=”tab” href=”#m_widget2_tab3_content1” role=”tab”>
Month
</a>
</li>
<li class=”m-portlet__nav-item”>
<button class=”btn btn-accent m-btn m-btn-custom m-btn-icon m-btn-pill m-btn-air” onclick=”add_task()”>
<i class=”la la-plus”></i>
</button>
</li>
</ul>
<?php } ?>
</div>
</div>
<div class=”m-portlet__body ”>
<div class=”tab-content”>
<div class=”tab-pane active” id=”m_widget2_tab1_content”>
<div class=”m-widget2 ”>
<?php
$widget_color= array(‘success’,’warning’,’danger’,’info’,’primary’,’brand’,’accent’,’focus’,’metal’);
$x=0; ?>
<?php foreach ($tasklist as $taskkey => $taskvalue) {
$class = $widget_color[$x%9];
$titels= $taskvalue[“event_title”] ;
?>
<div class=”m-widget2__item m-widget2__item-<?php echo $class; ?> ” >-solid m-checkbox-
<div class=”m-widget2__checkbox”>
<label class=”m-checkbox m-checkboxsingle m-checkbox-brand”>
<input type=”checkbox” <?php
if ($taskvalue[“is_active”] == ‘yes’) {
echo “checked”;
}
?> id=”check<?php echo $taskvalue[“id”]; ?>” onclick=”markcomplete(’<?php echo $taskvalue[“id”]; ?>’)” name=”eventcheck” value=”<?php echo $taskvalue[“id”]; ?>”>
<span></span>
</label>
</div>
<div class=”m-widget2__desc ”>
<span class=”m-widget2__text” <?php if ($taskvalue[“is_active”] == ‘yes’){?> style=”text-decoration: line-through;color: #4f881d;” <?php } ?>> <?php echo $titels; ?> </span>
<br>
<span class=”m-widget2__user-name” >
<?php echo date("m/d/Y", strtotime($taskvalue["start_date"])); ?>
</span>
</div>
<div class=”m-widget2__actions”>
<div class=”m-widget2__actions-nav”>
<div class=”m-dropdown m-dropdown-inline m-dropdown-arrow m-dropdown-align-right m-dropdown-align-push” data-dropdown-toggle=”hover”>
<a href=”#” class=”m-dropdown__toggle”>
<i class=”la la-ellipsis-h”></i>
</a>
<div class=”m-dropdown__wrapper”>
<span class=”m-dropdown__arrow m-dropdown__arrow-right m-dropdown__arrow-adjust”></span>
<div class=”m-dropdown__inner”>
<div class=”m-dropdown__body”>
<div class=”m-dropdown__content”>
<ul class=”m-nav”>
<li class=”m-nav__item”>
<?php
if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_delete’)) {
?>
<a href=”#” onclick=”deleteevent(’<?php echo $taskvalue[“id”]; ?>’, ‘Task’); return false;” class=”m-nav__link”>
<i class=”m-nav__link-icon flaticon-delete-1”></i>
<span class=”m-nav__link-text”>
</span>
</a>
<?php } ?>
</li>
<li class=”m-nav__item”>
<?php
if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_edit’)) {
?>
<a href=”#” onclick=”edit_todo_task(’<?php echo $taskvalue[“id”]; ?>’); return false;” class=”m-nav__link”>
<i class=”m-nav__link-icon flaticon-edit-1”></i>
<span class=”m-nav__link-text”>
</span>
</a>
<?php } ?>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php $x++; } ?>
</div>
</div>
<div class=”tab-pane” id=”m_widget2_tab2_content”>
</div>
<div class=”tab-pane” id=”m_widget2_tab3_content”>
</div>
</div>
</div>
</div>
$tasklist query mysql task table if text constant with loop no problem but with query mysql and text long come out m-portlet__body
Hi,
Can you please contact our support at support@keenthemes.com and explain your problem with more details ? Please send us generated HTML code only. PHP code and logic we are not able to debug or verify. Please provide more info what is the issue. Also screenshots will be helpful.
Thanks.
thanks for replay i solve… the problem i put in (m-widget2__text) long word without space like ssssssssssssssssssssssssssssssssssssssss….. in mysql for text…......sory for my languge very i speak arabic
Great! Glad to hear that you have resolved it. All the best with your project 
Hi, Can you please delete all the layout builder things in the skeleton ? We really don’t need it in the skeleton as we already have it in the demo app. All the subject/observer to track the CSS config change make the base app very heavy. Again, please focus the skeleton on the very basic need.As a developper, we know how to search in the demo app to get the right components. We really would like to have a lightwheight app to begin a fresh dev. Actually, i can’t imagine to develop my app inside metronic template because the basic skeleton take more than 6 seconds to start. It is sad because i really love the theme just keep up the great work guys! Thanks
Hi,
Thanks for your feedback. We are working on this and we will try to implement this in the next update(within the next week)
Thanks.
Thanks, waiting for more release!
Thanks. Sure, we will do our best
Hi, there is a performance problem with Firefox and Amcharts, you can try on the demo and move hover the serial chart your mouse, there is big lag. If I delete the scripts.bundle.js it’s works fine. On Chrome there is no problem. Thank you.
Hi,
Thanks for your feedback. Amchart is a 3rd party plugin and we can not control its issues. You can report this bug through the product page: https://www.amcharts.com/
Thanks.
Hi, like I said, it’s coming from your bundle file (scripts.bundle.js), if I delete this file there is no lag.
If Metronic isn’t compatible with Amchart, please delete Amchart from your template or can you check you code that can cause lag with Firefox? Thank you
Ok after one hour of trying many different settings, I finally found the problem: body,.m-smooth-scroll{scroll-behavior:smooth}
Change smooth to auto and it’s fixed, no more Firefox lag with Amchart.
Please for the next updates can you improve the performance of the V5, the V4 was better, specially on Firefox, thank you 
Hi,
Great job. We will check this further.
Thanks for sharing this finding.
Hello,
I’m using your template with Angular 6. I want to remove all scripts and leave only the necessary files. How can I reduce these files: vendors.bundle.js scripts.bundle.js
The problem is, that one of these rewrites my angular included scripts to jQuery, which cause to that some functions are not available anymore.
Hi,
In Angular 6, it does not have any jQuery dependencies in it.
vendors.bundle.js and scripts.bundle.js can be reduce by removing some optional 3rd party plugins. Please check in the directory tools/theme/metronic/angular.conf.json.
You have to rebuild the assets to regenerate the bundle.
Thanks
Hi, You say that your angular native version dosn’t need JQuery dependency. But why in the themes/metronic/metronic.conf.json you have in the src/mandatory/jquery ? Thanks
Hi,
Can you please check the latest version?
tools/themes/metronic/angular.conf.json file does not have jQuery related plugins.
Thanks
Thanks you are right abour the angular.conf.json. But what about these dependency, it seems to be js/jquery and not typescript “{$config.path.src}/js/framework/base/util.js”, “{$config.path.src}/js/framework/components/general/header.js”, “{$config.path.src}/js/framework/components/general/menu.js”, “{$config.path.src}/js/framework/components/general/dropdown.js”, “{$config.path.src}/js/framework/components/general/offcanvas.js”, “{$config.path.src}/js/framework/components/general/portlet.js”, “{$config.path.src}/js/framework/components/general/toggle.js”, “{$config.path.src}/js/framework/components/general/quicksearch.js”, “{$config.path.src}/js/framework/components/general/scroll-top.js”
Hi,
Those are the JS files and not jQuery codes. It used to run the core theme.
Thanks
<?php echo $this->lang->line(‘to_do’); ?> <?php echo $this->lang->line(‘list’); ?>
<?php if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_add’)) { ?>- brand m-nav-pills-align-right m-nav-pills-
- Today
- Week
- Month
-
<button class=”btn btn-accent m-btn m-btn-
custom m-btn-icon m-btn-pill m-btn-air” onclick=”add_task()”> </button>
<?php echo date(“m/d/Y”, strtotime($taskvalue[“start_date”])); ?> inline m-dropdown-arrow m-dropdown-
- <?php if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_delete’)) { ?> ’, ‘Task’); return false;” class=”m-nav__link”> <?php } ?>
- <?php if ($this->rbac->hasPrivilege(‘calendar_to_do_list’, ‘can_edit’)) { ?> ‘); return false;” class=”m-nav__link”> <?php } ?>
Hi,
Sorry, we do not provide support for backend integration issues. If you have theme related questions please contact our support and provide more details.
Thanks.
Nice work gud luck
Thanks a lot
Hi keenthemes,
Is there a reason why in demo3 you are using “Montserrat”:
"families": ["Montserrat:300,400,500,600,700", "Roboto:300,400,500,600,700"]
and the default metronic you are using “Poppins”:
"families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"]
Or I may paste something wrong ?? is this OK. ?
Hi,
Yes, you can remove “Poppins”. “Montserrat” is used as primary font for this demo design.
Thanks.
I’m not sure about your answer !!. I’m using Demo 3. Wich font should I use ?
Hi,
You can remove “Roboto” and use “Montserrat”. The demo3’s design uses “Montserrat” font by default.
Thanks.
Thank you
Hi,
I removed Roboto as you said :
...
google: {
"families": ["Montserrat:300,400,500,600,700"]
},
...
But here’s the render : https://ibb.co/ifMtL9
The tab title fonts is messed, should I leave it , or should I hack the Css for it, or maybe there’s not just this dependencies of Roboto, maybe another compenents are dependent from it ?
any idea,
cause I don’t wanna heavy load the page.
tahnk you
Hi,
You will need to reassign the heading font in the SCSS config in: src\sass\demo\demo3\_framework-config.scss>
//== Font families
$m--font-families: (
regular: 'Montserrat',
heading: 'Montserrat'
);
Then compile the theme and the Roboto font will be replaced with Montserrat font globally. If you need any further clarifications please let us know.
Thanks.
1 – Is there any other dependencies in Metronic for Roboto that I should be aware of ? or this is the only one (Tab title) ????
2 – Will you add this modification in the next releases in Metronic or will you still use Roboto for Tab Title as usual ??
Thank you keenthemes,
I meant dependencies in demo 3 for Roboto ??
I”m sorry I didn’t see : “replaced with Montserrat font globally”.
thank you keenthemes, consider it closed.
Great! All the best with your project
I am trying to implement Accordions into a project I’m working on, but whenever I paste in the section code, for some reason the tool tips are positioned miles away from where they should be and there’s a long line to them. See the below image:
Can you tell me what’s going on? I’ve copied/pasted the whole Below Pills section verbatim and it still does this no matter where in my page layout I position it.
https://pasteboard.co/HAv0o8M.jpgHi,
May I know which Metronic version are you using ? Also you will need to renew your support subscription(now its expired) in order to request a theme support.
Thanks.
do you have this template cut in a python-flask format ? we can pay extra for it
Hi,
Unfortunately we do not have that. But you should be able to use Metronic as HTML template with any server side language. If you need any further clarifications please let us know.
Thanks.
Hello! I’m using this template for sometime and I have to say its great. It would be very useful if you provide a VueJS version of this template for Laravel development. Thank you!
Hi ,
Thanks for your feedback. We will consider it.
Can you tell me where to find the Chat Module?
Hi,
Metronic has basic Chat UI example(open the quick sidebar panel from the topbar) but its not fully functional module. It is just a demo.
Thanks.
Yes, I’ve been looking for it in the sidebar, but there are too many options to look for. Can you point out the menu item I should be looking for?
Hi,
The chat design demo is at here
https://ibb.co/hgfNoUTo show it, you need to click on the topbar header, the button at the right top.
Thanks
What’s the best practice for development with Metronic? I’m current using git’s subtree merge strategy for receiving updates from Metronic on github. However, I’m debating whether I should be developing directly in /default-skeleton, or adding my own “dist” output folder for building assets with gulp.
I like having my own directory, however, think it may be a challenge to cherry pick updates done to any of the demo projects or default-skeleton.
Is there a recommended approach?
Hi,
Handling the updates is quite tricky task and the strategy depends on the end developer’s coding standards and project structure as well. Every update can bring changes in HTML, SASS and JS so it’s technically impossible to automate the merging process. However the git merge can make it easier if you keep the theme base code untouched. You can have your own custom code for overriding the styles around the base code but it’s recommended that the base code should put isolated and do override and extend instead according to your requirements.
If you need any further clarifications please let us know.
Thanks.
Or how to use individualy all plugin? I dont want to use bundle.js and bundle.css.
Hi,
You can pull the plugins assets from node_modules folder after you run “yarn” package manager. For more info please refer to the documentation and the build config. You can include the plugins individually by referring to the build config.
Thanks.
I am beginner developer and i was not able to get the values. Request you to send me all the files in zipped folder on my email id.
Hi,
You can refer to the documentation. Basically you will need to install the build tools first and install the dependency plugins. The installation steps are explain in the documentation: https://keenthemes.com/metronic/?page=docs Once you installed the plugins you can refer to the build config and and pull the plugin’s css/js files individually.Unfortunately we do not provide with customized version of the theme per user requests. This is not covered by our support. So every user handles the theme his own after the purchase.
For more info about our support policy please check: http://keenthemes.com/theme-support/ Thanks.Do you have video tutorial?
Unfortunately we do not have a video tutorial. However the documentation is quite detailed and you can spend some time you will be able to get started.
I am using html-table.js and i want to change tbody html onclick. How to do?
Hi, Are you want to change the whole tbody via html?
Thanks
Yes? Please Do reply fast.
Hi,
mDatatable does not allow that. As workaround, you can destroy the existing mDatatable initialization to the original state, and try to change the tbody content. Then reinit the mDatatable using the same options.
Thanks
how to use dropzone for file upload? When i trying to upload then mouseover on file icon show error server responded with 0 code.
Hi,
Please check on dropzone official documentation for the server side implementation. https://www.dropzonejs.com/#server-side-implementation
Thanks
I have need to use toast plugin and css. How to use it?
Hi,
As explained in the previous reply you should install the build tools and run “yarn” task to install all 3rd party plugins including toast. Then you will be able to include toastr plugin from “node_modules” folder.
Thanks.
@clooneywang Same question, I’m stuck, and I don’t like the way mdatatable behave towards regular actions, I mean, why can’t execute regular button clicks inside the mdatatable, I’ve been strugling the whole night and more than that I don’t really now javascript or jQuery, AAANNNDDD I don’t wanna learn them. well not now.
I’m desperate. thinking about leaving Metronic. If I found that can’t excute something now, I may foud some barriere next time, because It is the way Metronic is build, A lots of JS and hacks … here and there… It pushs you to use their .js code and get towards that way … It is not maintenanble.. I don’t wanna do HTML code inside a .js File, I’m talking about Actions list. you should’ve think about that, I don’t wann do :
<button type="button" class="update-vehicule btn btn-sm btn-primary"
data-id="{% url 'vehicule:read_vehicule' obj.pk %}">
<i class="fa fa-eye" />
</button>
<button type="button" class="update-vehicule btn btn-sm btn-warning" data-id="{% url 'vehicule:update_vehicule' obj.pk %}">
<i class="fa fa-pencil-alt" />
</button>
<button type="button" class="delete-vehicule btn btn-sm btn-danger" data-id="{% url 'vehicule:delete_vehicule' obj.pk %}">
<i class="fa fa-trash" aria-label="Delete" />
</button>
inside “html-table.js”, yes you read it right, it is a .js
Yes I’m talking about Actions List, It works everywhere, except in metronic, ...
I’m pissed off, really … I know after this line you’ll tell me to go for a refund, well you right.. but still didn’t get a help ..
I tried with other templates the code inside a table works fine.. but what keeps me on metronic, is the Design…
Ohh.. anayway I’m just saying ..it’s been more than a year now.. and nowing that you are stuck like that, is … and no help …
And guess what I broke the computer … man. is .js can do much damage.. LoL, Yes sir.
I may go for the Forum, Maybe, I said maybe … my issue gonna be fixed ..
Don’t bother guys, I dropped Metronic datatable.
Sorry.
Don’t bother guys, I dropped Metronic datatable.
Sorry.
Hi,
Sorry that Metronic is heavily depended on javascript.
There is another way to construct mDatatable without javascript at all. But its not a part of the Metronic official way to do it. You will strip all the functions in mDatatable javascript. It’s like reusing the mDatatable design.
The mDatatable SCSS file can be found here; /src/sass/framework/components/general/datatable/_datatable.scss
And the plain HTML for mDatatable structure can get from the browser view source. https://ibb.co/e8ZOOK Using this way, you can avoid all the javascript for mDatatable. And by reusing mDatatable style, you are free to build your own datatable using your own framework, which is Django (I assumed).
Thanks
Hi pixelDots, thank’s for the replay,
well, I dropped Metronic datatable.
Euhh I get it work in datatables.net in desktop, it is well. but if I resize the windows in the desktop to the mobile size it won’t work,
But in mobile smartphones, my modals don’t fire up if the plus icon in the row appears = responsive mode, it wont work. I debug the thing and I figured out that inside my datatables.net initialisation .js script :
....
table.DataTable({
responsive: true,
columnDefs: [
{
targets: -1,
title: 'Actions',
orderable: false,
},
....
if I remove the line : responsive: true;
it will work in mobile, it good , but the render is bad , no estetic…
coold you help on this one.
This call of the custom initialization script :<script src="{% static "custom/js/vehicule_datatables-sources-html.js" %}" type="text/javascript"></script>
is exactly the same as yours :
<script src="../../../assets/demo/default/custom/crud/datatables/data-sources/html.js" type="text/javascript"></script>
Except that I took off the actions button inside that .js and put my own list buttons actions inside my html, and save that custom .js “vehicule_datatables-sources-html.js” and call it as you can see above
my table html file : https://file.io/vOIL35 my .js datatablse.net init : https://file.io/Nnu5A8
there’s another thing : I made some research on datatables.net initialization and I did stop calling your .js init file, telling myself that It came from there., so I init the datatables from the html file like and delete the line calling the .js , I did init the datatables.net like so :
$('#m_table_1').DataTable( {
responsive: true
} );
It render great / responsive , but with no action list button effect 
PS : Please I already broke my PC, I don’t wanna break my loptop. It getting me crazy, I’m seeing 1 year go vanish…
thank you
Hi,
I can’t open your “html file : https://file.io/vOIL35" file.
I think in datatables.net also is same, you have to reinitialize your modal js after datatable is completed. https://datatables.net/reference/option/initCompleteAre you using bootstrap modal? Please check on this site for the bootstrap modal. https://getbootstrap.com/docs/4.0/components/modal/#live-demo
Thanks
Hi, you can’t open the files because it last few hours that’s why.
Here’s my table html file : https://a.uguu.se/Ygxcv5fsFB5X_vehicule_list.html my .js datatablse.net init : https://a.uguu.se/jGkABmOIHNmk_vehicule_datatables-sources-html.js
you said : “I think in datatables.net also is same, you have to reinitialize your modal js after datatable is completed.”, HOW I’m GONNA DO THAT, I know that this is not what support is, but COULD YOU drop me a SCRIPT snippet example based on files that I sent you above,
Please.
Those Modal are the pillar of the entire project, if there’s no Modal init ,there’s no project, I’ve be struglling for 1 year.
Help PixelDots.
Hi PixelDots,
I was plying arround since you gave the initComplete link of the datatables.net, I read that page and I came up with this : I delete the call of the init script “vehicule_datatables-sources-html.js” and replace it with a script inside the html file : “vehicule_list.html” it means now we got 1 file.
I made this to initialise and post my code when the datatables complete initialisation :
<script type="text/javascript">
$('#m_table_1').dataTable( {
"initComplete": function() {
//alert( 'DataTables has finished its initialisation.' );
$(".create-vehicule").modalForm({formURL: "{% url 'vehicule:create_vehicule' %}", successURL: "{% url 'vehicule:vehiculeList' %}"});
$(".update-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
$(".delete-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
}
} );
</script>
But here the weired thing, This is a desktop window resized to push responsive to take action (not full responsive = not mobile size, just what need to responsive take a action) take a closer look a this screen shot : https://ibb.co/kTduyK
Now I put 2 exact buttons to show modal, at different places, one in the middle of table number “1”, the other in the action list box number “2”.
If click on the button “1” it show the modal dialog related to the vehicule, wonderfull
But if I click on ”+” to display the responsive side of the table (the missing one) and the action list appears, I click then on the button number “2”, nothing happens.
All the above are made in desktop
This is the same on the smartphone, if the smartphone is in landscape position and the button number “1” appear and you click on it, it show the modal dialog.
If the smartphone is in the portrait position = the button number 1 don’t display now, you click on plus ”+” to show the responsive missing view, you got the 2 buttons, the button number “1” and number “2” they don’t display the modal dialog.
Wich mean if the button is outside the responsive rendreness it will show the dialog otherwise nothing.
I thought this may help you to unserstand better the situation.
Thank you.
Found it !
I googled init, and all stuff, and it is like everybody has the same problem… it’s like everybody was tearing down their ears for that.. not just me … It is like a bug or something inside a datatable.js
you have to call the responsive.display in order for the actions list to work, I did so :
<script type="text/javascript">
var table = $('#m_table_1').DataTable( {
responsive: true
} );
table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
//console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
$(".create-vehicule").modalForm({formURL: "{% url 'vehicule:create_vehicule' %}", successURL: "{% url 'vehicule:vehiculeList' %}"});
$(".update-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
$(".delete-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
} );
</script>
so when the page are reginerated for the first time nothing works. but once you change to the responsive mode (resizing to mobile in desktop) or even view it inside smartphone and press ”+” then when teh event gets called, and if you click on the actions button, everything work, even if you get back to normal size in desktop it stills work.
I’m looking for a way to make function to call it in the datatable init and call it in the responsive mode. hope I get it done, if not you can help me to write that code.
could you help to make that function so that we can call it in both situation, normal and responsive display ??
thank you PixelDots.
Hi PixelsDots,
how to create those lines (Modal Init) inside a function :
$(".create-vehicule").modalForm({formURL: "{% url 'vehicule:create_vehicule' %}", successURL: "{% url 'vehicule:vehiculeList' %}"});
$(".update-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
$(".delete-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
And call it inside (datatable init) :
var table = $('#m_table_1').DataTable( {
responsive: true
} );
and inside (dataTable responsive display init) :
var table = $('#m_table_1').DataTable( {
responsive: true
} );
Please help ?
Hi PixelDots I got it , now it is working, in default and responsive display mode, works like a charm , here’s the script that I made, tell me what you think :
<script type="text/javascript">
//Our custom callable modalEvents function
function modalEvents() {
$(".create-vehicule").modalForm({formURL: "{% url 'vehicule:create_vehicule' %}", successURL: "{% url 'vehicule:vehiculeList' %}"});
$(".update-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
$(".delete-vehicule").each(function () {
$(this).modalForm({formURL: $(this).data('id'), successURL: "{% url 'vehicule:vehiculeList' %}"});
});
}
modalEvents(); //A call for the default datatables.net Display
// Initit / default datatables.net Display
var table = $('#m_table_1').DataTable( {
responsive: true
} );
// Responsive event handler
table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
//console.log( 'Details for row '+row.index()+' '+(showHide ? 'shown' : 'hidden') );
modalEvents(); //A call for the responsive datatables.net Display
} );
</script>
I’m not a javascript advanced dev, but could you tell me if it is the correct way of making this king of script ?? can you refactor or tell me what is wrong with it ??
thank you ?
Hi reterix,
Your code is good! Glad you have found the solution
All the best with your projects.
Thanks
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
