logo

Keen Admin

Bootstrap 4 Admin Dashboard Framework

Javascripts

KLayout is the most important script that handles most of the base layouts. The layout scripts are located within each demo's scripts folder; [keen]/theme/[demo]/src/assets/js/global/layout/layout.js

Function Description
Private Functions
initHeader() Initialize the header (KTHeader).
initHeaderMenu() Initialize the offcanvas toggle (KTOffcanvas) and horizontal menu (KTMenu) in the header.
initHeaderTopbar() Initialize topbar toggle (KTToggle) in the header for the mobile view display.
initAside() Initialize the left aside menu for offcanvas toggle (KTOffcanvas).
initAsideMenu() Initialize the left aside menu (KTMenu).
initAsideToggler() Initialize the left aside toggle (KTToggle).
initAsideSecondary() Initialize the secondary aside toggle (KTToggle).
initScrolltop() Initialize the page scrolltop toggle button (KTScrolltop).
initPageStickyPortlet() Initialize the page sticky portlet, if any sticky portlet on the page. (KTPortlet).
Public Functions
init() Initialize the main function.
initHeader() Initialize all the header functions.
initHeader();
initHeaderMenu();
initHeaderTopbar();
initScrolltop();
initAside() Initialize all the left aside functions.
initAside();
initAsideMenu();
initAsideToggler();
initAsideSecondary() Initialize the secondary aside toggle.
initPageStickyPortlet() Initialize the page sticky portlet, if any sticky portlet on the page.
getAsideMenu() Get the aside menu (KTMenu) instance.
onAsideToggle() Event on toggle left aside menu.
getAsideToggler() Get the aside menu toggle instance (KTToggle).
openAsideSecondary() Open secondary aside panel programatically.
closeAsideSecondary() Close secondary aside panel programatically.
getAsideSecondaryToggler() Get secondary aside panel toggler instance (KTToggle).
onAsideSecondaryToggle() Event on secondary aside panel toggle.
closeMobileAsideMenuOffcanvas() Close mobile aside menu offcanvas programatically.
closeMobileHeaderMenuOffcanvas() Close mobile header menu offcanvas programatically.

Keen comes with a globally available KTApp JS class with general purpose helper functions. The script file is located at [keen]/theme/[demo]/src/assets/js/global/components/base/app.js

Function Description
Private Functions
initTooltip(el) Initialize single tooltip.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initTooltips() Initialize all tooltips found in the page. The HTML elements must have an atrribute data-toggle="kt-tooltip"
initPopover(el) Initialize single popover.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initPopovers() Initialize all popovers found in the page. The HTML elements must have an atrribute data-toggle="kt-popover"
initFileInput() Initialize event on change to the HTML input with class .custom-file-input
initPortlet(el, options) Initialize single portlet instance.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Portlet options
initPortlets() Initialize all portlets found in the page. The HTML elements must have an atrribute data-ktportlet="true"
initScroll() Initialize all scrolls found in the page. The HTML elements must have an atrribute data-scroll="true"
initAlerts() Initialize close alerts found in the page. The HTML elements must have an atrribute data-close=alert"
initSticky() Initialize all sticky element found in the page. The HTML elements must have an atrribute data-sticky="true"
initAbsoluteDropdown(dropdown) Initialize Bootstrap dropdown.
Input Parameters
Name Type Description
dropdown HTMLElement Dropdown HTML element from jQuery object or KTUtil.get() functions.
Public Functions
init() Initialize initComponents() function below.
initComponents() Initialize all required components.
initScroll();
initTooltips();
initPopovers();
initAlerts();
initPortlets();
initFileInput();
initSticky();
initTooltips() Initialize all tooltips found in the page. The HTML elements must have an atrribute data-toggle="kt-tooltip"
initTooltip(el) Initialize single tooltip.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initPopovers() Initialize all popovers found in the page. The HTML elements must have an atrribute data-toggle="kt-popover"
initPopover(el) Initialize single popover.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
initPortlet(el, options) Initialize single portlet instance.
Input Parameters
Name Type Description
el HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Portlet options
initPortlets() Initialize all portlets found in the page. The HTML elements must have an atrribute data-ktportlet="true"
initSticky() Initialize all sticky element found in the page. The HTML elements must have an atrribute data-sticky="true"
initAbsoluteDropdown(dropdown) Initialize Bootstrap dropdown.
Input Parameters
Name Type Description
dropdown HTMLElement Dropdown HTML element from jQuery object or KTUtil.get() functions.
block(target, options) Call the loading spinner programatically to block the target element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Block options
unblock(target) Remove the loading spinner and unblock the target element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
blockPage(options) Call loading spinner programatically to block the whole page. The laoding spinner is attach to the body tag.
Input Parameters
Name Type Description
options object Block options
unblockPage() Call to remove the loading spinner and unblock the page.
progress(target, options) Call the spinner to the element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
options object Progress options
unprogress(target) Remove the spinner from the element.
Input Parameters
Name Type Description
target HTMLElement HTML element from jQuery object or KTUtil.get() functions.
getStateColor(name) Get state color by name from the colors list.
Input Parameters
Name Type Description
name string State color name.
getBaseColor(type, level) Get base color.
Input Parameters
Name Type Description
type string Base color type.
level number Type color level.

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 8 & React Support

Enterprise ready Angular and React integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

75,000+ Strong

Metronic is the only theme trusted by over 70,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is written with a code structure that all developers will be able to pick up easily and fall in love