12183 comments found.
@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
How can i execute a code after mDataTable is completed
Hi,
You could use datatable event to execute after mDatatable init is completed.
datatable.on(‘m-datatable—on-init’, function() { });
Thanks
Hi, Can you make the angular version (and its skeleton) for Demo 12 – Metronic Classic Reborn soon? I think this is also a basic demo that a lot users love to have. Thanks
Hi ,
Sure, we will consider it in the next update.
Thanks.
Hello Sir ! Just got a new license to have more support ! What is the best way (faster) to get support ? By Here ? By Forum ? By email ? I have a problem: Is there a know BUG in validation plugin ? I am trying to validade my form using inline sintaxe, just following their website example. The problem is that only the first empty field gets validated ! When I type something on it and press the form button, the next field gets validated… but always, only one ! The weird is that if I set the validation rules in javascript the validation will work as expected… just the inline syntaxe is not working…. Is that a know BUG ? Is there a work around ? THANK YOU !
Just found the problem in validation plugin… it was no bug…. I was missing the “m-form__group” class in the previous div… Thanks a lot !
Great! All the best with your project
Your layout exporter is broken: https://keenthemes.com/metronic/tools/builder/exporter.php 500 (Internal Server Error)
Hi,
Thanks for your feedback. We will check it ASAP.
Thanks
Please let me know when it’s fixed. Thanks.
Hi
We have fixed it. Can you retry again?
Thanks
Yes, I tried but the export is always not reflecting the Options selected especially the “Expandable Search” in place of the “Dropdown”
Thank you for feedback. We will check and fix it soon.
change log
When you have time, can you please push the 5.5.4 update to github. I prefer to pull latest source from there. Thank you!
Already done. Sorry for the delay
Please update a dashboard for medical/health application
Hi ,
Noted. We will consider it . Thanks for the suggestion.
Hi, I wanted to change the template menu icons in the sketch. even installed the line-awesome font continued with the problem and I can not access the support area of the theme
Hi,
Are you having an issue with the theme itself or with the provided Sketch files ? Could you please explain your issue with more details ? Please note our support mainly focuses on the theme related issues.
Thanks.
dropdown buttons cover profile menu, Is this an expected behavior? When we click on dropdown button, it should close profile menu, shouldn’t it?
Hi ,
Thanks for the feedback. By right, the topbar dropdown menu(the user profile) must be on top. We will fix it in the next update.
Thanks.
mQuicksearch we need full example
Hi,
Working server side examples is provided already. Please check the documentation folder to see the server side demo scripts.
Thanks.
Hello Sir ! Great Theme ! I am upgrading from old metronic to this new one. Is there a reference for what plugins are used in the new theme ? A url for that plugins documentation… anything… like Input Mask, what is the used plugin ? Where is its documentation ? The validation plugin ? THANK YOU !
Hi ,
Please check the documentation https://keenthemes.com/metronic/?page=docs. The reference is provided.
If you like to continue using the theme support please consider renewing your support subscription as it is already expired.
Thanks.
Thank you ! I will buy another license… not just renew support… just need to show this to my client and confirm that he will use it ! Also, after I buy another license, can you help me compile the javascripts without the plugins I don´t use ? I dont really know how to do it ! Or this is not included in the support you give ? THANKS IN ADVANCE !
Hi ,
Yes, you can exclude unused plugins from the build. Its very easy. Just refer to the documentation. All steps are documented.
Thanks.
How do you specify the mPortlet component? e.g. best-seller.component.html contains <m-portlet> component. But you can’t specify class=”m-portlet—skin-dark” and get the desired result.
Am I not understanding how to style reusable metronic angular components?
I’m sorry … I’m going to stop asking questions here because I always keep finding the answer 10min later. Solution is to use options.. <m-portlet [options]=”{class: [‘m-portlet—skin-dark’]}”>
There is a bug / typo in your portlet.directive.ts Line 19. Should read headOverlay?: boolean; not headOverflay?: boolean;
Hi
Thanks for your feedback. We will fix the typo.
Thanks
mQuicksearch we need full example ajax return page not avilable when use codegniter conttroller:
............................................................................................................................................. function search() { $data[‘title’] = ‘Search’; $search_text = $this->input->post(‘search_text’); $data[‘search_text’] = trim($this->input->post(‘search_text’)); $userdata = $this->customlib->getUserData(); $carray = array(); if ($userdata[“user_type”] == “Teacher”) { $rec= $this->load->view(‘admin/search.php’,$data, TRUE); echo $rec;
}Hi,
Working server side examples is provided already. Please check the documentation folder to see the server side demo scripts.
Thanks.
hi I want to report a bug in RTL version but i don’t find the right place so mUtil.scrollerInit does not work correctly in RTL i commented this and its been worked in the correct way
mUtil.addClass(element, 'm-scroller');
ps = new PerfectScrollbar(element, {
wheelSpeed: 0.5,
swipeEasing: true,
wheelPropagation: false,
minScrollbarLength: 40,
//...... this line >>>>>>>>> suppressScrollX: true ......
});mUtil.data(element).set('ps', ps);Hi,
Thanks for your feedback. We will double check this.
Thanks.
Hi keenthemes,
I just finished cutting, setting, creating forms, using Metronic templates …. and the developpement project it is allready working (CRUD Stuff), I’ve been struglling for 1 year now.
But I’m running into some sort of an issues that bugging me for a while, I mean I tried to add a Bootstrap Modal for the 20% CRUD remaining operations of the projects. I did make that sub-project of CRUD Work fine in separate Django/jQuery/CSS/HTML project.
After integrated that sub-project into my main Django / Metronic project, it failed, it wont work.
Here’s screenshot : https://ibb.co/hfQqxe
I set the actions buttons in the list and the above the table to illustrate you that, the ones in the list don’t work, but the above of table works, not just even table, I made them one outside the actions list place, they worked.
here’s the Update button modal in action (Update-Modal) : https://ibb.co/bCVLVz
and Delete-Modal : https://ibb.co/c7Psce
even Create/ View (blue one works).
Now my Javascript code responsible for firing-up Bootstrap Modal is below :
/*
django-bootstrap-modal-forms
version : 1.2.1
Copyright (c) 2018 Uros Trstenjak
https://github.com/trco/django-bootstrap-modal-forms
*/
(function ($) {
// Place the form at formURL to modalContent element of modal with id=modalID
var newForm = function (modalID, modalContent, modalForm, formURL, successURL, errorClass) {
$(modalContent).load(formURL, function () {
$(modalID).modal("show");
$(modalForm).attr("action", formURL);
ajaxSubmit(modalID, modalContent, modalForm, formURL, successURL, errorClass);
});
};
// Add AJAX validation to the modalForm
var ajaxSubmit = function (modalID, modalContent, modalForm, formURL, successURL, errorClass) {
$(modalForm).submit(function (event) {
// Prevent submit and POST form to url using AJAX
event.preventDefault();
$.ajax({
type: $(this).attr("method"),
url: $(this).attr("action"),
// Serialize form data
data: $(this).serialize(),
success: function (response) {
// Update form with errors after unsuccessful POST request
// Django form.is_valid() = False
if ($(response).find(errorClass).length > 0) {
$(modalID).find(modalContent).html(response);
$(modalForm).attr("action", formURL);
ajaxSubmit(modalID, modalContent, modalForm, formURL, successURL, errorClass);
}
// Hide modal after successful POST request when & redirect to successURL
else {
$(modalID).modal("hide");
window.location.href = successURL;
}
}
});
});
};
$.fn.modalForm = function (options) {
// Default settings
var defaults = {
modalID: "#modal",
modalContent: ".modal-content",
modalForm: ".modal-content form",
formURL: null,
successURL: "/",
errorClass: ".invalid"
};
// Extend default settings with provided options
var settings = $.extend(defaults, options);
return this.each(function () {
$(this).click(function (event) {
newForm(settings.modalID,
settings.modalContent,
settings.modalForm,
settings.formURL,
settings.successURL,
settings.errorClass);
event.preventDefault();
});
});
};
}(jQuery));
Here’s the thing, if I remove the class=”m-datatable” from “table …> the actions list icons inside the table work just fine. I suppose that the js file : <script src=”../../../assets/demo/default/custom/crud/metronic-datatable/base/html-table.js” type=”text/javascript”></script>
conflict with my Javascript code responsible for firing-up Bootstrap Modal that I gave you above. I think it is ajQuery conflict. But I did use it and it works fine in a separate jQuery Project. Wich I suspect a Metronic custom javascript function, not a jQuery related stuff.
I was pulling my hair out for almost 21 days now, I did enen start from scratch cutting and setting Metronic tempaltes, until I found out that It came from Metronic cumized jQuery.
This is qualified as a final stage project, If I will not find a solution or a fix about this, I may drop Metronic … thing that would be the last in the planet. Pleassssssssssse Help
If it’s too tech, I may go to post in Metronic Forum.
Let me know.
Thank you keenthemes.
I forget to tell you that I can’t use my Action buttons inside your Js file as usually actions list button are in Metronic, because I can’t access my django variables inside a js file and I don’t want to go for a little hack to do that. Tthat’s why I did use my own Actions list inside a template/table.
Tahnk you
Here’s the Hml Actions list buttons :
<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>
And here’s the javascript snippet to load Modal inside the HTML page that hold that table :
<script type="text/javascript">
$(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' %}"});
});
});
</script>
Let me know if you need any other piece of code or …
PS : here’s the file containing all the code above, the whole thing : https://files.fm/u/94wq46zg
Thank’s
Hi
Are you not using any javascript code to initialize your own datatable? Maybe this file vehicule_html-table.js? Can you send it?
You said, by removing “m-datatable” from “table …> the actions list icons inside the table worked fine. What is the issue with “m-datatable” class? You can remove it.
Thanks
Hi PixelDots, Thank’s for the reply,
1 – The file that I’m using to initialise the m-datatable is the vehicule_html-table.js, it is the same file that metronic used to initialise the m-datatable on its HTML version, I just renamed to “vehicule_html-table.js”, it was oriinaly named to : “assets/demo/demo3/custom/crud/metronic-datatable/base/html-table.js” so it is the same file jsut I renamed inside of it the Filter selects (Status, Agence) this is not an issue,
Honestly I choose m-datatable over the datatable.net because of its amazing looking, and If I remove the the class “m-datatable” from the table ..> My list actions inside table > works fine everything as expected, BUT the metronic datatable looks UGLY (no padding, no cute bg color of the head table, no .. like raw and the filter option “Status”, “Agence” and “Search” will not work.
here’s a screenshot of the Ugly table without class=”m-datatable” of the table with my actions list working : https://ibb.co/mpNXdK
Hope to hear from you very soon, ‘casue I’m stuck can’t go forward without this, because this is a piece that the entire project is based on, there’s list and modals everywere in the project. I wanted to get it work with Vehicle and once it is done I’m gonna make a model to aplly it to every part of the project, like (Customers, Drivers,...).
PS : Here’s the file code that fire’s up my modals once the action list are clicked : https://files.fm/u/yj63qjta mybe you should take a look at it. maybe it conflict with your m-datatable inistializing javascript code "vehicule_html-table.js" since if I disabled your initializing m-datatable my list actions work.
Thank you
Here’s "vehicule_html-table.js" :
//== Class definition
var DatatableHtmlTableDemo = function() {
//== Private functions
// demo initializer
var demo = function() {
var datatable = $('.m-datatable').mDatatable({
data: {
saveState: {cookie: false},
},
search: {
input: $('#generalSearch'),
},
columns: [
{
field: '#',
//type: 'number',
sortable:true,
width:40,
},
{
field: 'Type.V',
//type: 'number',
sortable:true,
width:60,
},
{
field: 'Véhicule',
//type: 'number',
sortable:true,
width:300,
},
{
field: 'Deposit Paid',
type: 'number',
},
{
field: 'Order Date',
type: 'date',
format: 'YYYY-MM-DD',
},
/*
{
field: 'Status',
title: 'Status',
// callback function support for column rendering
template: function(row) {
var status = {
1: {'title': 'Pending', 'class': 'm-badge--brand'},
2: {'title': 'Delivered', 'class': ' m-badge--metal'},
3: {'title': 'Canceled', 'class': ' m-badge--primary'},
4: {'title': 'Success', 'class': ' m-badge--success'},
5: {'title': 'Info', 'class': ' m-badge--info'},
6: {'title': 'Danger', 'class': ' m-badge--danger'},
7: {'title': 'Warning', 'class': ' m-badge--warning'},
};
return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>';
},
},
{
field: 'Type',
title: 'Type',
// callback function support for column rendering
template: function(row) {
var status = {
1: {'title': 'Online', 'state': 'danger'},
2: {'title': 'Retail', 'state': 'primary'},
3: {'title': 'Direct', 'state': 'accent'},
};
return '<span class="m-badge m-badge--' + status[row.Type].state + ' m-badge--dot" /> <span class="m--font-bold m--font-' +
status[row.Type].state + '">' +
status[row.Type].title + '</span>';
},
},
*/
],
});
$('#m_form_status').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'Status');
});
$('#m_form_agence').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'Agence');
});
$('#m_form_status, #m_form_agence').selectpicker();
};
return {
//== Public functions
init: function() {
// init dmeo
demo();
},
};
}();
jQuery(document).ready(function() {
DatatableHtmlTableDemo.init();
});
Hi
Thanks for your feedback.
The datatable use javascript to render the html DOM and the modal init before datatale fully rendered.
Can you try to reinitialize your modal after datatable has been fully init.
var datatable = $('.m-datatable').mDatatable(...);
datatable.on('m-datatable--on-init', function() {
// init modal after datatable DOM fully rendered
});
Thanks
Hi PixelDots, thank’s for the reply,
Euhh, fact that I’m not a jQuery and Javascript guy ..
1 – I didn’t understand where to put this code. 2 – Now this is how the init of mdatatable looks like, I made this :
//== Class definition
var DatatableHtmlTableDemo = function() {
//== Private functions
// demo initializer
var demo = function() {
var datatable = $('.m-datatable').mDatatable({
data: {
saveState: {cookie: false},
},
search: {
input: $('#generalSearch'),
},
columns: [
{
field: '#',
//type: 'number',
sortable:true,
width:40,
},
{
field: 'Type.V',
//type: 'number',
sortable:true,
width:60,
},
{
field: 'Véhicule',
//type: 'number',
sortable:true,
width:300,
},
{
field: 'Deposit Paid',
type: 'number',
},
{
field: 'Order Date',
type: 'date',
format: 'YYYY-MM-DD',
},
/*
{
field: 'Status',
title: 'Status',
// callback function support for column rendering
template: function(row) {
var status = {
1: {'title': 'Pending', 'class': 'm-badge--brand'},
2: {'title': 'Delivered', 'class': ' m-badge--metal'},
3: {'title': 'Canceled', 'class': ' m-badge--primary'},
4: {'title': 'Success', 'class': ' m-badge--success'},
5: {'title': 'Info', 'class': ' m-badge--info'},
6: {'title': 'Danger', 'class': ' m-badge--danger'},
7: {'title': 'Warning', 'class': ' m-badge--warning'},
};
return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>';
},
},
{
field: 'Type',
title: 'Type',
// callback function support for column rendering
template: function(row) {
var status = {
1: {'title': 'Online', 'state': 'danger'},
2: {'title': 'Retail', 'state': 'primary'},
3: {'title': 'Direct', 'state': 'accent'},
};
return '<span class="m-badge m-badge--' + status[row.Type].state + ' m-badge--dot" /> <span class="m--font-bold m--font-' +
status[row.Type].state + '">' +
status[row.Type].title + '</span>';
},
},
*/
{
field: "Actions",
width: 110,
title: "Actions",
sortable: false,
overflow: 'visible',
template: function (row, index, datatable) {
var dropup = (datatable.getPageSize() - index) <= 4 ? 'dropup' : '';
return '\
<div class="dropdown ' + dropup + '">\
<a href="#" class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown">\
<i class="la la-ellipsis-h" />\
</a>\
<div class="dropdown-menu dropdown-menu-right">\
<a class="dropdown-item" href="#"><i class="la la-edit" /> Edit Details</a>\
<a class="dropdown-item" href="#"><i class="la la-leaf" /> Update Status</a>\
<a class="dropdown-item" href="#"><i class="la la-print" /> Generate Report</a>\
</div>\
</div>\
<button type="button" class="update-vehicule btn btn-sm btn-primary" data-id="/vehicule/update/5" >\
<i class="la la-edit" />\
</button>\
';
}
}
],
});
// PixelDot After datatable init
datatable.on('m-datatable--on-init', function() {
// My init modal after datatable DOM fully rendered
$(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' %}"});
});
});
});
$('#m_form_status').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'Status');
});
$('#m_form_agence').on('change', function() {
datatable.search($(this).val().toLowerCase(), 'Agence');
});
$('#m_form_status, #m_form_agence').selectpicker();
};
return {
//== Public functions
init: function() {
// init dmeo
demo();
},
};
}();
jQuery(document).ready(function() {
DatatableHtmlTableDemo.init();
});
Is this correct, if yes, It didn’t work, nothing happend
Please I’m stuck.
Thank you.
Hi,
Can you check your browser console log? If there is any javascript error?
Are you using Type and Actions column?
Thanks
Hi, is that the correct way of doing what you told me to to, to place my init modal after the table render completley, is my javascript above is correct ????
No Console javascript Error;
Yes I’m using Actions column “Your own Javascript list actions” added one button to show modal, you can take a look at the last script above. here’s the button snippet :
\
<button type="button" class="update-vehicule btn btn-sm btn-primary" data-id="/vehicule/update/5" >\
<i class="la la-edit" />\
</button>\
but it doesn’t want to fire Modal, it is like you didn’t click on nothing.
Please help.
.Hi,
Sorry for the late response.
https://themeforest.net/comments/20224293Refering to your latest comment. Please check my latest comment for the how to initialize bootstrap modal.
Thanks
Finally RTL Thank you !
Your welcome
All the best for your projects
Thanks
Ok i found a problem in vendors.bundle.css>
body.swal2-height-auto { height: auto !important; }
This dont work for small content
Hi ,
We are releasing a new update in a few hours and this issue will be fixed. Actually this is a feature that can be disabled globally.
Thanks.
Hi keenthemes,
I restart from scratch due to an incompatibility of an third party in jQuery, and I decided to pick the latest 5.5.3 but I found that the index.html of demo3 even default html was not indented, it was a mess inside the index.html, not like the ones before like 5.2 or … well indented, it is not possible to cut that file into header, a-side menu, footer, top menu, I don’t wanna re-arrange the indentation; do you guys have an index.html which is well indented if not, could the next update will have one ??? or try to fix this … ??
Thank you ?
Hi,
We will check the indentation and fix it.
Thanks
Hope is gonna be in the next update, I’m on hold.
thank you
We are working on it and this fix will be included in the next updates.
Thanks
Hi keenthemes,
You said you will fix the arrow icon fro the RTL support in the next update, but since then 3 updates have been .. and no fix at all
I know that you are pulling you hair out for the major bugs and fxes big things, but this is not gonna take you 5 min.
that arrow has to be inverted .
Hope it is gonna be added in the next update.
Thank you
Hi,
Yes, we will add this in the next update. Stay tuned!
Thanks.
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
