Hi

Please note that in the download package only the demo1 demo contains the pages that demonstrates the theme features and plugins. Other demos come with only their layout related pages. You can refer to the demo1 demo’s pages and reuse any feature or plugin in other demos since all those components, plugins and elements are globally available for all demos.

We did so due to the the increasing file size of the as we add more new demos.

Thanks

Hi ,

Thanks for your feedback. The avatar issue will be fixed in the next update v6.0.5 that we scheduled to release on coming Monday.

The Gmail Like multiple file upload implementation using Dropbox is coming in the next update as well.

Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos

Regards, Sean

Hi,

Yes, at the moment only these 4 examples are available for Metronic v6.x. We will add more examples in the near future. Sean

Regards,

Hi ,

We are very close to the release latest by end of this month.

Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned

Regards, Sean

Hi

We do not use jQuery in Angular. What was the error message? Could you please send the screenshot? Please check the changelog for the latest changes.

Thanks

Yes, I got a message “´Jquery could not be found…” jQuery(document).ready(function() { KTWizard1.init(); });

So I guess I copied wrong javascript files. Which javascript files do we use for Angular 8? I could not find “scripts.bundle.js” in any Angular folder.

Thanks

Hi

The angular use different bundle than the default version. Please check this documentation steps to recompile the assets for angular. https://keenthemes.com/metronic/?page=docs&section=angular-quick-start

Thanks

Hi

You have to customize it on your own. Look for the left aside menu component, you can add the title on your own, and grab from the same config as other menus. /src/app/views/themes/demo1/aside/aside-left.component.html

Let us know if you need further clarifications.

Thanks

Hi

KTDatatables plugin does not support export functionality. But Datatables.net plugin supports the exporting tools: ​ Metronic: https://keenthemes.com/metronic/preview/demo1/crud/datatables/extensions/buttons.html

But, you can use this function to get the current data in the grid and create your own export function. var data = datatable.getDataSet();

You can use javascript to create the CSV file. You can learn more about CSV text format here; https://stackoverflow.com/questions/45611674/export-2d-javascript-array-to-excel-sheet https://www.computerhope.com/issues/ch001356.htm ​ Let us know if you need further clarifications.

Thanks

Thanks for info. Is it planned in future updates? Could you tell me when?

Hi

Sorry. We have no estimation date. We will add it in the future updates.

Thanks

Hi ,

In the next update in a few days.

Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned

Regards, Sean

Hi,

Sorry, I did not get you fully. Could you please explain the issue with more details ? Can you please send us a screenshot where we can see the issue clearly ?

Regards, Sean

Hi,

Sorry for the late reply during weekend. The old v4.x and the new v6.x are completely different themes in terms of design and source code so you will need to reintegrate it from the ground. For more info please refer to https://keenthemes.com/metronic/?page=docs&section=migration

You can also check our video tutorials that shows the best practices using Metronic for real projects:

1. Installation & Getting Started: https://youtu.be/dqZLWuAEdJ8 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM​

For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs

Please follow us at http://twitter.com/keenthemes to stay updated.

Regards, Sean

Thanks Sean

Hi

Please check this setup guide for the Angular. https://keenthemes.com/metronic/?page=docs&section=angular-quick-start

Let us know if you have any more issues.

Thanks

Hi,

For our Menu plugin we use plain JS, not jquery. Where do you see $(”#testJs”).on(“click”,(function () { alert(“Clicked.”); })); code in Metronic ? By far Metronic is successfully used with all server side frameworks and we haven’t not received such bug reports. Probably this can be fixed in your end with some known workarounds.

Regards, Sean

Thanks.

this code is not in your Template, its an example of how jquery works on metronic, anyway Blazor is still in preview, so i think that’s why i’m the first reporter

Noted, let us double check this in our end. Thanks.

Hi

Thanks for your suggestion. We will add this fix in the next update soon.

Thanks

this method from metronic v4.7

metronic_v4.7.5\theme\assets\pages\scripts\table-datatables-ajax.js

i want to use this method in metronic v6

var TableDatatablesAjax = function () {

var initPickers = function () {
    //init date pickers
    $('.date-picker').datepicker({
        rtl: App.isRTL(),
        autoclose: true
    });
}

var handleDemo1 = function () {
}

var grid = new Datatable();

grid.init({
    src: $("#datatable_ajax"),
    onSuccess: function (grid, response) {
        // grid:        grid object
        // response:    json object of server side ajax response
        // execute some code after table records loaded
    },
    onError: function (grid) {
        // execute some code on network or other general error  
    },
    onDataLoad: function(grid) {
        // execute some code on ajax data load
    },
    loadingMessage: 'Loading...',
    dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options 
});

// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
    // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js). 
    // So when dropdowns used the scrollable div should be removed. 
    //"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
}

// save datatable state(pagination, sort, etc) in cookie.
"bStateSave": true, 
"fnStateSaveParams":    function ( oSettings, sValue ) {
    $("#datatable_ajax tr.filter .form-control").each(function() {
        sValue[$(this).attr('name')] = $(this).val();
    });
},

return sValue;

// read the custom filters from saved state and populate the filter inputs
"fnStateLoadParams" : function ( oSettings, oData ) {
    //Load custom filters
    $("#datatable_ajax tr.filter .form-control").each(function() {
        var element = $(this);
        if (oData[element.attr('name')]) {
            element.val( oData[element.attr('name')] );
        }
    });
},

return true;

"lengthMenu": [
],
"pageLength": 50, // default record count per page
"ajax": {
    "url": "../demo/table_ajax.php", // ajax source
},
"ordering": false,
"order": [
    [1, "asc"]
]// set first column as a default sort by asc

[10, 20, 50, 100, 150, "All"] // change per page values here

// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
    e.preventDefault();
    var action = $(".table-group-action-input", grid.getTableWrapper());
    if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
        grid.setAjaxParam("customActionType", "group_action");
        grid.setAjaxParam("customActionName", action.val());
        grid.setAjaxParam("id", grid.getSelectedRows());
        grid.getDataTable().ajax.reload();
        grid.clearAjaxParams();
    } else if (action.val()  "") {
        App.alert({
            type: 'danger',
            icon: 'warning',
            message: 'Please select an action',
            container: grid.getTableWrapper(),
            place: 'prepend'
        });
    } else if (grid.getSelectedRowsCount() = 0) {
        App.alert({
            type: 'danger',
            icon: 'warning',
            message: 'No record selected',
            container: grid.getTableWrapper(),
            place: 'prepend'
        });
    }
});

//grid.setAjaxParam("customActionType", "group_action");
//grid.getDataTable().ajax.reload();
//grid.clearAjaxParams();

var handleDemo2 = function () {
}

var grid = new Datatable();

grid.init({
    src: $("#datatable_ajax_2"),
    onSuccess: function (grid, response) {
        // grid:        grid object
        // response:    json object of server side ajax response
        // execute some code after table records loaded
    },
    onError: function (grid) {
        // execute some code on network or other general error  
    },
    onDataLoad: function(grid) {
        // execute some code on ajax data load
    },
});

dataTable: { // here you can define a typical datatable settings from http://datatables.net/usage/options 
}

// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js). 
// So when dropdowns used the scrollable div should be removed. 
//"dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",

"dom": "<'row'<'col-md-8 col-sm-12'i><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'i><'col-md-4 col-sm-12'>>",

// save datatable state(pagination, sort, etc) in cookie.
"bStateSave": true, 
"fnStateSaveParams":    function ( oSettings, sValue ) {
    $("#datatable_ajax_2 tr.filter .form-control").each(function() {
        sValue[$(this).attr('name')] = $(this).val();
    });
},

return sValue;

// read the custom filters from saved state and populate the filter inputs
"fnStateLoadParams" : function ( oSettings, oData ) {
    //Load custom filters
    $("#datatable_ajax_2 tr.filter .form-control").each(function() {
        var element = $(this);
        if (oData[element.attr('name')]) {
            element.val( oData[element.attr('name')] );
        }
    });
},

return true;

"pageLength": 10, // default record count per page

"ajax": {
    "url": "../demo/table_ajax.php", // ajax source
},
"order": [
    [1, "asc"]
],// set first column as a default sort by asc,

"language": {
    "loadingRecords": "Please wait ...",
    "zeroRecords": "No records",
    "emptyTable": "No data available in table",
    "info": "Showing START to END of TOTAL entries",
},

scrollY: 400,
deferRender:    true,
scroller: {
    loadingIndicator: true
}

// handle group actionsubmit button click
grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
    e.preventDefault();
    var action = $(".table-group-action-input", grid.getTableWrapper());
    if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
        grid.setAjaxParam("customActionType", "group_action");
        grid.setAjaxParam("customActionName", action.val());
        grid.setAjaxParam("id", grid.getSelectedRows());
        grid.getDataTable().ajax.reload();
        grid.clearAjaxParams();
    } else if (action.val()  "") {
        App.alert({
            type: 'danger',
            icon: 'warning',
            message: 'Please select an action',
            container: grid.getTableWrapper(),
            place: 'prepend'
        });
    } else if (grid.getSelectedRowsCount() = 0) {
        App.alert({
            type: 'danger',
            icon: 'warning',
            message: 'No record selected',
            container: grid.getTableWrapper(),
            place: 'prepend'
        });
    }
});

//grid.setAjaxParam("customActionType", "group_action");
//grid.getDataTable().ajax.reload();
//grid.clearAjaxParams();

return {

//main function to initiate the module
init: function () {
}

initPickers();
handleDemo1();
handleDemo2();

};

}();

jQuery(document).ready(function() { TableDatatablesAjax.init(); });

Hi

In the latest version 6, we don’t have this function. You can check the datatable official doc, https://datatables.net/examples/index

I think function is in the older version of DataTable. We suggest you to upgrade verything including the plugins.

Thanks

Hi ,

Sorry for the late reply. As long as your using theme source code has it’s properly purchased license then no issue. The license can be purchased by your client and actual work can be done by a developer. But one license is limited for one usage. So if you want to use Metronic for other client or project you will need to purchase a new license.

If you need any further clarifications please let us know.

Regards, Sean

Hi,

Apologize for the inconvenience. Usually our reply time a few hours. Could you please let us know your email address ? We will double check your email in our system.

Regards, Sean

Hi,

Just an update on your case. We apologize that we overlooked your case due to some technical issues. We will provide the reply shortly.

Regards, Sean

Hi,

What is not working for you ? The menu itself or you mean the missing template pages in demo12 ? Metronic’s main demo(demo1) contains all the pages while other demos only come with layout related pages. But you can use all the features from the demo1 in other demos. So just copy paste the code, refer to the custom css/js files to include and you are ready to go. For more info please check http://keenthemes.com/metronic/?page=docs&section=demos

Regards, Sean

Apologies if my explanation was unclear; seeing it’s the ONLY demo out of the box I have issues with I presume it’s a bug on your side. https://imgur.com/a/1XU1D9l

Hi,

Thanks for the clarifications.

You can copy paste the horizontal menu’s code from demo1 into demo12. Anyways we will fix it in the next update in by end of this week.

Regards, Sean

Hi ,

Thanks for your interest in Metronic

Metronic comes with 2 separate versions: jQuery & Angular When you use the jQuery version you do not need the Angular version and vise versa. Using Metornic requires some frontend coding knowledge(js/sass/build tools) but overall it’s quite easy to get started by reading the theme documentations and video tutorials:

1. Installation & Getting Started: https://youtu.be/dqZLWuAEdJ8 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM​

For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs

Please follow us at http://twitter.com/keenthemes to stay updated.

Regards, Sean

Hi ,

Which variables are you referring to ? The SASS or Javascript ? Could you please provide more details ?

Thanks.

HI ,

Thanks for your feedback. We may consider adding it in a future updated.

Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned

Regards, Sean

Hımmm Ok I m waiting. Thank u