Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

js file are not ignite within a razor file context (Blazor)


Hello guys,

I will appreciate your help regarding an issue I'm facing with the Blazor starter kit:

I integrated the user-management application into the blazer demo, when I'm trying to add a user it seems that the add-user Modal is detached from the page click events.

after checking in the dev-tools console it seems that the add.js file under wwwroot/assets/js/custom/apps/user-managment/users/list/add.js is initiated only when first rendered but the modal events listeners are not ignited upon click (close event)

please refer to the following code:


@page "/user-management/users/list"

<div class="app-content flex-column-fluid" id="kt_app_content">
 <!--begin::Content container-->
 <div class="app-container container-xxl" id="kt_app_content_container">
 <!--begin::Card-->
 <div class="card">
 <!--begin::Card header-->
 <div class="card-header border-0 pt-6">
 <!--begin::Card title-->
 <div class="card-title">
 <!--begin::Search-->
 <div class="d-flex align-items-center position-relative my-1">
 <i class="ki-duotone ki-magnifier fs-3 position-absolute ms-5">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 <input class="form-control form-control-solid w-250px ps-13" data-kt-user-table-filter="search" placeholder="Search user" type="text"/>
 </div>
 <!--end::Search-->
 </div>
 <!--begin::Card title-->
 <!--begin::Card toolbar-->
 <div class="card-toolbar">
 <!--begin::Toolbar-->
 <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
 <!--begin::Filter-->
 <button class="btn btn-light-primary me-3" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" type="button">
 <i class="ki-duotone ki-filter fs-2">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 Filter
 </button>
 <!--begin::Menu 1-->
 <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">
 <!--begin::Header-->
 <div class="px-7 py-5">
 <div class="fs-5 text-dark fw-bold">
 Filter Options
 </div>
 </div>
 <!--end::Header-->
 <!--begin::Separator-->
 <div class="separator border-gray-200">
 </div>
 <!--end::Separator-->
 <!--begin::Content-->
 <div class="px-7 py-5" data-kt-user-table-filter="form">
 <!--begin::Input group-->
 <div class="mb-10">
 <label class="form-label fs-6 fw-semibold">
 Role:
 </label>
 <select class="form-select form-select-solid fw-bold" data-allow-clear="true" data-hide-search="true" data-kt-select2="true" data-kt-user-table-filter="role" data-placeholder="Select option">
 <option>
 </option>
 <option value="Administrator">
 Administrator
 </option>
 <option value="Analyst">
 Analyst
 </option>
 <option value="Developer">
 Developer
 </option>
 <option value="Support">
 Support
 </option>
 <option value="Trial">
 Trial
 </option>
 </select>
 </div>
 <!--end::Input group-->
 <!--begin::Input group-->
 <div class="mb-10">
 <label class="form-label fs-6 fw-semibold">
 Two Step Verification:
 </label>
 <select class="form-select form-select-solid fw-bold" data-allow-clear="true" data-hide-search="true" data-kt-select2="true" data-kt-user-table-filter="two-step" data-placeholder="Select option">
 <option>
 </option>
 <option value="Enabled">
 Enabled
 </option>
 </select>
 </div>
 <!--end::Input group-->
 <!--begin::Actions-->
 <div class="d-flex justify-content-end">
 <button class="btn btn-light btn-active-light-primary fw-semibold me-2 px-6" data-kt-menu-dismiss="true" data-kt-user-table-filter="reset" type="reset">
 Reset
 </button>
 <button class="btn btn-primary fw-semibold px-6" data-kt-menu-dismiss="true" data-kt-user-table-filter="filter" type="submit">
 Apply
 </button>
 </div>
 <!--end::Actions-->
 </div>
 <!--end::Content-->
 </div>
 <!--end::Menu 1-->
 <!--end::Filter-->
 <!--begin::Export-->
 <button class="btn btn-light-primary me-3" data-bs-target="#kt_modal_export_users" data-bs-toggle="modal" type="button">
 <i class="ki-duotone ki-exit-up fs-2">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 Export
 </button>
 <!--end::Export-->
 <!--begin::Add user-->
 <button class="btn btn-primary" data-bs-target="#kt_modal_add_user" data-bs-toggle="modal" type="button">
 <i class="ki-duotone ki-plus fs-2">
 </i>
 Add User
 </button>
 <!--end::Add user-->
 </div>
 <!--end::Toolbar-->
 <!--begin::Group actions-->
 <div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
 <div class="fw-bold me-5">
 <span class="me-2" data-kt-user-table-select="selected_count">
 </span>
 Selected
 </div>
 <button class="btn btn-danger" data-kt-user-table-select="delete_selected" type="button">
 Delete Selected
 </button>
 </div>
 <!--end::Group actions-->
 <!--begin::Modal - Adjust Balance-->
 <div aria-hidden="true" class="modal fade" id="kt_modal_export_users" tabindex="-1">
 <!--begin::Modal dialog-->
 <div class="modal-dialog modal-dialog-centered mw-650px">
 <!--begin::Modal content-->
 <div class="modal-content">
 <!--begin::Modal header-->
 <div class="modal-header">
 <!--begin::Modal title-->
 <h2 class="fw-bold">
 Export Users
 </h2>
 <!--end::Modal title-->
 <!--begin::Close-->
 <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close">
 <i class="ki-duotone ki-cross fs-1">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 </div>
 <!--end::Close-->
 </div>
 <!--end::Modal header-->
 <!--begin::Modal body-->
 <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
 <!--begin::Form-->
 <form action="#" class="form" id="kt_modal_export_users_form">
 <!--begin::Input group-->
 <div class="fv-row mb-10">
 <!--begin::Label-->
 <label class="fs-6 fw-semibold form-label mb-2">
 Select Roles:
 </label>
 <!--end::Label-->
 <!--begin::Input-->
 <select class="form-select form-select-solid fw-bold" data-control="select2" data-hide-search="true" data-placeholder="Select a role" name="role">
 <option>
 </option>
 <option value="Administrator">
 Administrator
 </option>
 <option value="Analyst">
 Analyst
 </option>
 <option value="Developer">
 Developer
 </option>
 <option value="Support">
 Support
 </option>
 <option value="Trial">
 Trial
 </option>
 </select>
 <!--end::Input-->
 </div>
 <!--end::Input group-->
 <!--begin::Input group-->
 <div class="fv-row mb-10">
 <!--begin::Label-->
 <label class="required fs-6 fw-semibold form-label mb-2">
 Select Export Format:
 </label>
 <!--end::Label-->
 <!--begin::Input-->
 <select class="form-select form-select-solid fw-bold" data-control="select2" data-hide-search="true" data-placeholder="Select a format" name="format">
 <option>
 </option>
 <option value="excel">
 Excel
 </option>
 <option value="pdf">
 PDF
 </option>
 <option value="cvs">
 CVS
 </option>
 <option value="zip">
 ZIP
 </option>
 </select>
 <!--end::Input-->
 </div>
 <!--end::Input group-->
 <!--begin::Actions-->
 <div class="text-center">
 <button class="btn btn-light me-3" data-kt-users-modal-action="cancel" type="reset">
 Discard
 </button>
 <button class="btn btn-primary" data-kt-users-modal-action="submit" type="submit">
 <span class="indicator-label">
 Submit
 </span>
 <span class="indicator-progress">
 Please wait...
 <span class="spinner-border spinner-border-sm align-middle ms-2">
 </span>
 </span>
 </button>
 </div>
 <!--end::Actions-->
 </form>
 <!--end::Form-->
 </div>
 <!--end::Modal body-->
 </div>
 <!--end::Modal content-->
 </div>
 <!--end::Modal dialog-->
 </div>
 <!--end::Modal - New Card-->
 <!--begin::Modal - Add task-->
 <div aria-hidden="true" class="modal fade" id="kt_modal_add_user" tabindex="-1">
 <!--begin::Modal dialog-->
 <div class="modal-dialog modal-dialog-centered mw-650px">
 <!--begin::Modal content-->
 <div class="modal-content">
 <!--begin::Modal header-->
 <div class="modal-header" id="kt_modal_add_user_header">
 <!--begin::Modal title-->
 <h2 class="fw-bold">
 Add User
 </h2>
 <!--end::Modal title-->
 <!--begin::Close-->
 <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-users-modal-action="close"> 
 <i class="ki-duotone ki-cross fs-1">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 </div>
 <!--end::Close-->
 </div>
 <!--end::Modal header-->
 <!--begin::Modal body-->
 <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
 <!--begin::Form-->
 <form action="#" class="form" id="kt_modal_add_user_form">
 <!--begin::Scroll-->
 <div class="d-flex flex-column scroll-y me-n7 pe-7" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-max-height="auto" data-kt-scroll-offset="300px" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" id="kt_modal_add_user_scroll">
 <!--begin::Input group-->
 <div class="fv-row mb-7">
 <!--begin::Label-->
 <label class="d-block fw-semibold fs-6 mb-5">
 Avatar
 </label>
 <!--end::Label-->
 <!--begin::Image placeholder-->
 <style>
 .image-input-placeholder { background-image: url("assets/media/svg/files/blank-image.svg"); } [data-bs-theme="dark"] .image-input-placeholder { background-image: url("assets/media/svg/files/blank-image-dark.svg"); }
 </style>
 <!--end::Image placeholder-->
 <!--begin::Image input-->
 <div class="image-input image-input-outline image-input-placeholder" data-kt-image-input="true">
 <!--begin::Preview existing avatar-->
 <div class="image-input-wrapper w-125px h-125px" >
 </div>
 <!--end::Preview existing avatar-->
 <!--begin::Label-->
 <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-bs-toggle="tooltip" data-kt-image-input-action="change" title="Change avatar">
 <i class="ki-duotone ki-pencil fs-7">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 <!--begin::Inputs-->
 <input accept=".png, .jpg, .jpeg" name="avatar" type="file"/>
 <input name="avatar_remove" type="hidden"/>
 <!--end::Inputs-->
 </label>
 <!--end::Label-->
 <!--begin::Cancel-->
 <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-bs-toggle="tooltip" data-kt-image-input-action="cancel" title="Cancel avatar">
 <i class="ki-duotone ki-cross fs-2">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 </span>
 <!--end::Cancel-->
 <!--begin::Remove-->
 <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-bs-toggle="tooltip" data-kt-image-input-action="remove" title="Remove avatar">
 <i class="ki-duotone ki-cross fs-2">
 <span class="path1">
 </span>
 <span class="path2">
 </span>
 </i>
 </span>
 <!--end::Remove-->
 </div>
 <!--end::Image input-->
 <!--begin::Hint-->
 <div class="form-text">
 Allowed file types: png, jpg, jpeg.
 </div>
 <!--end::Hint-->
 </div>
 <!--end::Input group-->
 <!--begin::Input group-->
 <div class="fv-row mb-7">
 <!--begin::Label-->
 <label class="required fw-semibold fs-6 mb-2">
 Full Name
 </label>
 <!--end::Label-->
 <!--begin::Input-->
 <input class="form-control form-control-solid mb-3 mb-lg-0" name="user_name" placeholder="Full name" type="text" value="Emma Smith"/>
 <!--end::Input-->
 </div>
 <!--end::Input group-->
 <!--begin::Input group-->
 <div class="fv-row mb-7">
 <!--begin::Label-->
 <label class="required fw-semibold fs-6 mb-2">
 Email
 </label>
 <!--end::Label-->
 <!--begin::Input-->
 <input class="form-control form-control-solid mb-3 mb-lg-0" name="user_email" placeholder="example@domain.com" type="email" value="smith@kpmg.com"/>
 <!--end::Input-->
 </div>
 <!--end::Input group-->
 <!--begin::Input group-->
 <div class="mb-7">
 <!--begin::Label-->
 <label class="required fw-semibold fs-6 mb-5">
 Role
 </label>
 <!--end::Label-->
 <!--begin::Roles-->
 <!--begin::Input row-->
 <div class="d-flex fv-row">
 <!--begin::Radio-->
 <div class="form-check form-check-custom form-check-solid">
 <!--begin::Input-->
 <input checked="checked" class="form-check-input me-3" id="kt_modal_update_role_option_0" name="user_role" type="radio" value="0"/>
 <!--end::Input-->
 <!--begin::Label-->
 <label class="form-check-label" for="kt_modal_update_role_option_0">
 <div class="fw-bold text-gray-800">
 Administrator
 </div>
 <div class="text-gray-600">
 Best for business owners and company administrators
 </div>
 </label>
 <!--end::Label-->
 </div>
 <!--end::Radio-->
 </div>
 <!--end::Input row-->
 <div class="separator separator-dashed my-5">
 </div>
 <!--begin::Input row-->
 <div class="d-flex fv-row">
 <!--begin::Radio-->
 <div class="form-check form-check-custom form-check-solid">
 <!--begin::Input-->
 <input class="form-check-input me-3" id="kt_modal_update_role_option_1" name="user_role" type="radio" value="1"/>
 <!--end::Input-->
 <!--begin::Label-->
 <label class="form-check-label" for="kt_modal_update_role_option_1">
 <div class="fw-bold text-gray-800">
 Developer
 </div>
 <div class="text-gray-600">
 Best for developers or people primarily using the API
 </div>
 </label>
 <!--end::Label-->
 </div>
 <!--end::Radio-->
 </div>
 <!--end::Input row-->
 <div class="separator separator-dashed my-5">
 </div>
 <!--begin::Input row-->
 <div class="d-flex fv-row">
 <!--begin::Radio-->
 <div class="form-check form-check-custom form-check-solid">
 <!--begin::Input-->
 <input class="form-check-input me-3" id="kt_modal_update_role_option_2" name="user_role" type="radio" value="2"/>
 <!--end::Input-->
 <!--begin::Label-->
 <label class="form-check-label" for="kt_modal_update_role_option_2">
 <div class="fw-bold text-gray-800">
 Analyst
 </div>
 <div class="text-gray-600">
 Best for people who need full access to analytics data, but don"t need to update business settings
 </div>
 </label>
 <!--end::Label-->
 </div>
 <!--end::Radio-->
 </div>
 <!--end::Input row-->
 <div class="separator separator-dashed my-5">
 </div>
 <!--begin::Input row-->
 <div class="d-flex fv-row">
 <!--begin::Radio-->
 <div class="form-check form-check-custom form-check-solid">
 <!--begin::Input-->
 <input class="form-check-input me-3" id="kt_modal_update_role_option_3" name="user_role" type="radio" value="3"/>
 <!--end::Input-->
 <!--begin::Label-->
 <label class="form-check-label" for="kt_modal_update_role_option_3">
 <div class="fw-bold text-gray-800">
 Support
 </div>
 <div class="text-gray-600">
 Best for employees who regularly refund payments and respond to disputes
 </div>
 </label>
 <!--end::Label-->
 </div>
 <!--end::Radio-->
 </div>
 <!--end::Input row-->
 <div class="separator separator-dashed my-5">
 </div>
 <!--begin::Input row-->
 <div class="d-flex fv-row">
 <!--begin::Radio-->
 <div class="form-check form-check-custom form-check-solid">
 <!--begin::Input-->
 <input class="form-check-input me-3" id="kt_modal_update_role_option_4" name="user_role" type="radio" value="4"/>
 <!--end::Input-->
 <!--begin::Label-->
 <label class="form-check-label" for="kt_modal_update_role_option_4">
 <div class="fw-bold text-gray-800">
 Trial
 </div>
 <div class="text-gray-600">
 Best for people who need to preview content data, but don"t need to make any updates
 </div>
 </label>
 <!--end::Label-->
 </div>
 <!--end::Radio-->
 </div>
 <!--end::Input row-->
 <!--end::Roles-->
 </div>
 <!--end::Input group-->
 </div>
 <!--end::Scroll-->
 <!--begin::Actions-->
 <div class="text-center pt-15">
 <button class="btn btn-light me-3" data-kt-users-modal-action="cancel" type="reset">
 Discard
 </button>
 <button class="btn btn-primary" data-kt-users-modal-action="submit" type="submit">
 <span class="indicator-label">
 Submit
 </span>
 <span class="indicator-progress">
 Please wait...
 <span class="spinner-border spinner-border-sm align-middle ms-2">
 </span>
 </span>
 </button>
 </div>
 <!--end::Actions-->
 </form>
 <!--end::Form-->
 </div>
 <!--end::Modal body-->
 </div>
 <!--end::Modal content-->
 </div>
 <!--end::Modal dialog-->
 </div>
 <!--end::Modal - Add task-->
 </div>
 <!--end::Card toolbar-->
 </div>
 <!--end::Card header-->
 <!--begin::Card body-->
 <div class="card-body py-4">
 <!--begin::Table-->
 <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
 <thead>
 <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
 <th class="w-10px pe-2">
 <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
 <input class="form-check-input" data-kt-check="true" data-kt-check-target="#kt_table_users .form-check-input" type="checkbox" value="1"/>
 </div>
 </th>
 <th class="min-w-125px">
 User
 </th>
 <th class="min-w-125px">
 Role
 </th>
 <th class="min-w-125px">
 Last login
 </th>
 <th class="min-w-125px">
 Two-step
 </th>
 <th class="min-w-125px">
 Joined Date
 </th>
 <th class="text-end min-w-100px">
 Actions
 </th>
 </tr>
 </thead>
 <tbody class="text-gray-600 fw-semibold">
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Emma Smith" class="w-100" src="assets/media/avatars/300-6.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Emma Smith
 </a>
 <span>
 smith@kpmg.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Administrator
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 Yesterday
 </div>
 </td>
 <td>
 </td>
 <td>
 22 Sep 2023, 11:05 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-danger text-danger">
 M
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Melody Macy
 </a>
 <span>
 melody@altbox.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Analyst
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 20 mins ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 25 Jul 2023, 11:30 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Max Smith" class="w-100" src="assets/media/avatars/300-1.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Max Smith
 </a>
 <span>
 max@kt.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Developer
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 3 days ago
 </div>
 </td>
 <td>
 </td>
 <td>
 20 Dec 2023, 10:10 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Sean Bean" class="w-100" src="assets/media/avatars/300-5.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Sean Bean
 </a>
 <span>
 sean@dellito.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Support
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 5 hours ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 20 Dec 2023, 6:05 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Brian Cox" class="w-100" src="assets/media/avatars/300-25.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Brian Cox
 </a>
 <span>
 brian@exchange.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Developer
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 2 days ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 19 Aug 2023, 5:30 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-warning text-warning">
 C
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Mikaela Collins
 </a>
 <span>
 mik@pex.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Administrator
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 5 days ago
 </div>
 </td>
 <td>
 </td>
 <td>
 25 Oct 2023, 9:23 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Francis Mitcham" class="w-100" src="assets/media/avatars/300-9.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Francis Mitcham
 </a>
 <span>
 f.mit@kpmg.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Trial
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 3 weeks ago
 </div>
 </td>
 <td>
 </td>
 <td>
 21 Feb 2023, 11:30 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-danger text-danger">
 O
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Olivia Wild
 </a>
 <span>
 olivia@corpmail.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Administrator
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 Yesterday
 </div>
 </td>
 <td>
 </td>
 <td>
 24 Jun 2023, 6:05 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-primary text-primary">
 N
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Neil Owen
 </a>
 <span>
 owen.neil@gmail.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Analyst
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 20 mins ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 25 Jul 2023, 5:30 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Dan Wilson" class="w-100" src="assets/media/avatars/300-23.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Dan Wilson
 </a>
 <span>
 dam@consilting.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Developer
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 3 days ago
 </div>
 </td>
 <td>
 </td>
 <td>
 05 May 2023, 8:43 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-danger text-danger">
 E
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Emma Bold
 </a>
 <span>
 emma@intenso.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Support
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 5 hours ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 19 Aug 2023, 10:30 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Ana Crown" class="w-100" src="assets/media/avatars/300-12.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Ana Crown
 </a>
 <span>
 ana.cf@limtel.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Developer
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 2 days ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 25 Jul 2023, 6:43 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-info text-info">
 A
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Robert Doe
 </a>
 <span>
 robert@benko.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Administrator
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 5 days ago
 </div>
 </td>
 <td>
 </td>
 <td>
 15 Apr 2023, 10:10 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="John Miller" class="w-100" src="assets/media/avatars/300-13.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 John Miller
 </a>
 <span>
 miller@mapple.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Trial
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 3 weeks ago
 </div>
 </td>
 <td>
 </td>
 <td>
 10 Nov 2023, 10:30 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-success text-success">
 L
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Lucy Kunic
 </a>
 <span>
 lucy.m@fentech.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Administrator
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 Yesterday
 </div>
 </td>
 <td>
 </td>
 <td>
 15 Apr 2023, 10:10 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-danger text-danger">
 M
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Melody Macy
 </a>
 <span>
 melody@altbox.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Analyst
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 20 mins ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 10 Nov 2023, 5:20 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Max Smith" class="w-100" src="assets/media/avatars/300-1.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Max Smith
 </a>
 <span>
 max@kt.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Developer
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 3 days ago
 </div>
 </td>
 <td>
 </td>
 <td>
 20 Dec 2023, 2:40 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Sean Bean" class="w-100" src="assets/media/avatars/300-5.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Sean Bean
 </a>
 <span>
 sean@dellito.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Support
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 5 hours ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 22 Sep 2023, 8:43 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Brian Cox" class="w-100" src="assets/media/avatars/300-25.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Brian Cox
 </a>
 <span>
 brian@exchange.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Developer
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 2 days ago
 </div>
 </td>
 <td>
 <div class="badge badge-light-success fw-bold">
 Enabled
 </div>
 </td>
 <td>
 22 Sep 2023, 6:43 am
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label fs-3 bg-light-warning text-warning">
 C
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Mikaela Collins
 </a>
 <span>
 mik@pex.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Administrator
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 5 days ago
 </div>
 </td>
 <td>
 </td>
 <td>
 19 Aug 2023, 5:20 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 <tr>
 <td>
 <div class="form-check form-check-sm form-check-custom form-check-solid">
 <input class="form-check-input" type="checkbox" value="1"/>
 </div>
 </td>
 <td class="d-flex align-items-center">
 <!--begin:: Avatar -->
 <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
 <a href="/user-management/users/view" target="_blank">
 <div class="symbol-label">
 <img alt="Francis Mitcham" class="w-100" src="assets/media/avatars/300-9.jpg"/>
 </div>
 </a>
 </div>
 <!--end::Avatar-->
 <!--begin::User details-->
 <div class="d-flex flex-column">
 <a class="text-gray-800 text-hover-primary mb-1" href="/user-management/users/view">
 Francis Mitcham
 </a>
 <span>
 f.mit@kpmg.com
 </span>
 </div>
 <!--begin::User details-->
 </td>
 <td>
 Trial
 </td>
 <td>
 <div class="badge badge-light fw-bold">
 3 weeks ago
 </div>
 </td>
 <td>
 </td>
 <td>
 20 Dec 2023, 8:43 pm
 </td>
 <td class="text-end">
 <a class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-placement="bottom-end" data-kt-menu-trigger="click" href="#">
 Actions
 <i class="ki-duotone ki-down fs-5 ms-1">
 </i>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" href="/user-management/users/view">
 Edit
 </a>
 </div>
 <!--end::Menu item-->
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a class="menu-link px-3" data-kt-users-table-filter="delete_row" href="#">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 </td>
 </tr>
 </tbody>
 </table>
 <!--end::Table-->
 </div>
 <!--end::Card body-->
 </div>
 <!--end::Card-->
 </div>
 <!--end::Content container-->
</div>

<script suppress-error="BL9992" src="assets/js/custom/apps/user-management/users/list/add.js"></script>

@inject IJSRuntime JS
@inject NavigationManager MyNavigationManager

@code {
 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
 if (firstRender)
 {
 //await JS.InvokeAsync<IJSObjectReference>("import", MyNavigationManager.ToAbsoluteUri("/assets/js/custom/apps/user-management/users/list/add.js"));
 await JS.InvokeVoidAsync("KTUsersAddUser.init");
 }
 }
}


D
David KR 9 months ago
Blazor
8 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (8)

user
Lauris Stepanovs Author9 months ago

Hi David,

Thank you for reaching out to us.

Your code looks fine and should work, function KTUsersAddUser.init() in your code is triggered only on the first component render, if you update your table asynchronously then you can manually recall the initialization function.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


D
David KR 9 months ago

Hi Lauris,

Thank you for your answer!
Unfortunately, integrating apps from the HTML demo is not simple as described in the documentation.

there are various issues related to the integration of required js files.

for example, the above code ( in the original question ) does not work although the KTUsersAddUser.init() function is executed after the page is rendered.
no event is triggered when clicking the 'X' close button. However, there is a click event listener function: 


// Close button handler
 const closeButton = element.querySelector("[data-kt-users-modal-action="close"]");
 closeButton.addEventListener("click", e => {
 e.preventDefault();

 Swal.fire({
 text: "Are you sure you would like to cancel?",
 icon: "warning",
 showCancelButton: true,
 buttonsStyling: false,
 confirmButtonText: "Yes, cancel it!",
 cancelButtonText: "No, return",
 customClass: {
 confirmButton: "btn btn-primary",
 cancelButton: "btn btn-active-light"
 }
 }).then(function (result) {
 if (result.value) {
 form.reset(); // Reset form
 modal.hide();
 } else if (result.dismiss === "cancel") {
 Swal.fire({
 text: "Your form has not been cancelled!.",
 icon: "error",
 buttonsStyling: false,
 confirmButtonText: "Ok, got it!",
 customClass: {
 confirmButton: "btn btn-primary",
 }
 });
 }
 });
 });



On the other hand when I'm trying to load and init all of the js files required for the user-management/users/list page which I am trying to integrate as an example I get the following error:


dotnet watch ⌚ File changed: ./Pages/apps/user-management/users/List.razor.
dotnet watch 🔥 Hot reload of changes succeeded.
warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: $(...).DataTable is not a function
TypeError: $(...).DataTable is not a function
at initUserTable (http://localhost:5070/assets/js/custom/apps/user-management/users/list/table.js:52:30)
at Object.init (http://localhost:5070/assets/js/custom/apps/user-management/users/list/table.js:301:13)
at http://localhost:5070/_framework/blazor.server.js:1:3506
at new Promise (<anonymous>)
at Ft.beginInvokeJSFromDotNet (http://localhost:5070/_framework/blazor.server.js:1:3480)
at Ft._invokeClientMethod (http://localhost:5070/_framework/blazor.server.js:1:75066)
at Ft._processIncomingData (http://localhost:5070/_framework/blazor.server.js:1:72690)
at Ft.connection.onreceive (http://localhost:5070/_framework/blazor.server.js:1:67003)
at i.onmessage (http://localhost:5070/_framework/blazor.server.js:1:51316)
Microsoft.JSInterop.JSException: $(...).DataTable is not a function
TypeError: $(...).DataTable is not a function
at initUserTable (http://localhost:5070/assets/js/custom/apps/user-management/users/list/table.js:52:30)
at Object.init (http://localhost:5070/assets/js/custom/apps/user-management/users/list/table.js:301:13)
at http://localhost:5070/_framework/blazor.server.js:1:3506
at new Promise (<anonymous>)
at Ft.beginInvokeJSFromDotNet (http://localhost:5070/_framework/blazor.server.js:1:3480)
at Ft._invokeClientMethod (http://localhost:5070/_framework/blazor.server.js:1:75066)
at Ft._processIncomingData (http://localhost:5070/_framework/blazor.server.js:1:72690)
at Ft.connection.onreceive (http://localhost:5070/_framework/blazor.server.js:1:67003)
at i.onmessage (http://localhost:5070/_framework/blazor.server.js:1:51316)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Starterkit.Pages.apps.user_management.users.List.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'C9obTuEE9GSrA_Yjein4UbxyhR73mYTjegTBTnjlcWw'.
Microsoft.JSInterop.JSException: $(...).DataTable is not a function
TypeError: $(...).DataTable is not a function
at initUserTable (http://localhost:5070/assets/js/custom/apps/user-management/users/list/table.js:52:30)
at Object.init (http://localhost:5070/assets/js/custom/apps/user-management/users/list/table.js:301:13)
at http://localhost:5070/_framework/blazor.server.js:1:3506
at new Promise (<anonymous>)
at Ft.beginInvokeJSFromDotNet (http://localhost:5070/_framework/blazor.server.js:1:3480)
at Ft._invokeClientMethod (http://localhost:5070/_framework/blazor.server.js:1:75066)
at Ft._processIncomingData (http://localhost:5070/_framework/blazor.server.js:1:72690)
at Ft.connection.onreceive (http://localhost:5070/_framework/blazor.server.js:1:67003)
at i.onmessage (http://localhost:5070/_framework/blazor.server.js:1:51316)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Starterkit.Pages.apps.user_management.users.List.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)



the code section I am using: 


<!-- Js Includes -->

<script suppress-error="BL9992" src="assets/js/custom/apps/user-management/users/list/export-users.js"></script>
<script suppress-error="BL9992" src="assets/js/custom/apps/user-management/users/list/add.js"></script>
<script suppress-error="BL9992" src="assets/js/custom/apps/user-management/users/list/table.js"></script>

<!-- Code Section -->

@inject IJSRuntime JS

@code {protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JS.InvokeVoidAsync("KTUsersList.init");
 await JS.InvokeVoidAsync("KTUsersAddUser.init");
 await JS.InvokeVoidAsync("KTModalExportUsers.init");
}
}


does the app's modules where tested with the Blazor starter kit?
if not, do you have any recommendations or tutorials describing integration steps?

I really appreciate any help you can provide.
David


D
David KR 9 months ago

Hi, Just to mention that the data tables plugin should be loaded globally by the themeettings.json vendor's section:


"Vendors": {
 "datatables": {
 "Css": [
 "plugins/custom/datatables/datatables.bundle.css"
 ],
 "Js": [
 "plugins/custom/datatables/datatables.bundle.js"
 ]
 },


as mentioned in the following post:

<a>https://stackoverflow.com/questions/31227844/typeerror-datatable-is-not-a-function</a>

It seems that the issue is related to jquery, however, I'm not sure jquery is needed when the datatables bundle is used.


user
Lauris Stepanovs Author9 months ago

Hi,

Sorry for the delay in reply.

We rechecked your code and were able to reproduce this error, it is not related to jQuery since it is included in global plugins.bundle.js, it looks like you didn't load datatables scripts on your page. The vendors object in our configuration file is for reference and those files are not loaded by default, to use this page you need to include plugins/custom/datatables/datatables.bundle.js.

Could you please try the following code?


...
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("plugins/custom/datatables/datatables.bundle.js")"></script>
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/users/list/export-users.js")"></script>
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/users/list/add.js")"></script>
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/users/list/table.js")"></script>

@using Starterkit._keenthemes.libs;

@inject IKTTheme KTTheme;
@inject IJSRuntime JS;

@code {protected override async Task OnAfterRenderAsync(bool firstRender)
 {
 await JS.InvokeVoidAsync("KTUsersList.init");
 await JS.InvokeVoidAsync("KTUsersAddUser.init");
 await JS.InvokeVoidAsync("KTModalExportUsers.init");
 }
}


Regards,
Lauris Stepanovs,
Keenthemes Support Team


D
David KR 9 months ago

Hi Lauris! many thanks for your answer, i appreciate your help

Ive tried the adjustemts you have suggested, however, it seems that there are still issues with the js files loading.

the code section I'm using: 


@using Starterkit._keenthemes.libs;

<!-- Js Includes -->
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("plugins/custom/datatables/datatables.bundle.js")"></script>
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/users/list/export-users.js")"></script>
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/users/list/add.js")"></script>
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/users/list/table.js")"></script>

<!-- Code Section -->

@inject IKTTheme KTTheme;
@inject IJSRuntime JS

@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
 await JS.InvokeVoidAsync("KTUsersList.init");
await JS.InvokeVoidAsync("KTUsersAddUser.init");
 await JS.InvokeVoidAsync("KTModalExportUsers.init");
}
}
}


at first, it seemed that the page is loaded correctly but then I faced the following error:


warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
Unhandled exception rendering component: Could not find 'KTUsersList.init' ('KTUsersList' was undefined).
Error: Could not find 'KTUsersList.init' ('KTUsersList' was undefined).
at http://localhost:5070/_framework/blazor.server.js:1:497
at Array.forEach (<anonymous>)
at s.findFunction (http://localhost:5070/_framework/blazor.server.js:1:465)
at E (http://localhost:5070/_framework/blazor.server.js:1:2611)
at http://localhost:5070/_framework/blazor.server.js:1:3499
at new Promise (<anonymous>)
at Ft.beginInvokeJSFromDotNet (http://localhost:5070/_framework/blazor.server.js:1:3480)
at Ft._invokeClientMethod (http://localhost:5070/_framework/blazor.server.js:1:75066)
at Ft._processIncomingData (http://localhost:5070/_framework/blazor.server.js:1:72690)
at Ft.connection.onreceive (http://localhost:5070/_framework/blazor.server.js:1:67003)
Microsoft.JSInterop.JSException: Could not find 'KTUsersList.init' ('KTUsersList' was undefined).
Error: Could not find 'KTUsersList.init' ('KTUsersList' was undefined).
at http://localhost:5070/_framework/blazor.server.js:1:497
at Array.forEach (<anonymous>)
at s.findFunction (http://localhost:5070/_framework/blazor.server.js:1:465)
at E (http://localhost:5070/_framework/blazor.server.js:1:2611)
at http://localhost:5070/_framework/blazor.server.js:1:3499
at new Promise (<anonymous>)
at Ft.beginInvokeJSFromDotNet (http://localhost:5070/_framework/blazor.server.js:1:3480)
at Ft._invokeClientMethod (http://localhost:5070/_framework/blazor.server.js:1:75066)
at Ft._processIncomingData (http://localhost:5070/_framework/blazor.server.js:1:72690)
at Ft.connection.onreceive (http://localhost:5070/_framework/blazor.server.js:1:67003)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Starterkit.apps.user_management.users.List.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit '0UkY6ZXT09eVzwcN0N2Ws5Z-kcLKGYC95cRfLgZL-EU'.
Microsoft.JSInterop.JSException: Could not find 'KTUsersList.init' ('KTUsersList' was undefined).
Error: Could not find 'KTUsersList.init' ('KTUsersList' was undefined).
at http://localhost:5070/_framework/blazor.server.js:1:497
at Array.forEach (<anonymous>)
at s.findFunction (http://localhost:5070/_framework/blazor.server.js:1:465)
at E (http://localhost:5070/_framework/blazor.server.js:1:2611)
at http://localhost:5070/_framework/blazor.server.js:1:3499
at new Promise (<anonymous>)
at Ft.beginInvokeJSFromDotNet (http://localhost:5070/_framework/blazor.server.js:1:3480)
at Ft._invokeClientMethod (http://localhost:5070/_framework/blazor.server.js:1:75066)
at Ft._processIncomingData (http://localhost:5070/_framework/blazor.server.js:1:72690)
at Ft.connection.onreceive (http://localhost:5070/_framework/blazor.server.js:1:67003)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Starterkit.apps.user_management.users.List.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
dotnet watch ⌚ File changed: ./apps/user-management/users/List.razor.
dotnet watch ⌚ No hot reload changes to apply.
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit '0UkY6ZXT09eVzwcN0N2Ws5Z-kcLKGYC95cRfLgZL-EU'.
System.Threading.Tasks.TaskCanceledException: A task was canceled.
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Starterkit.Shared.MasterInit.OnLocationChanged(Object sender, LocationChangedEventArgs args)
at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0(Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource completion, SendOrPostCallback d, Object state)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location ---
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)


it seems that the js file did not loaded correctly?


D
David KR 9 months ago

Hi Lauris,

I have managed to overcome this issue of 'Element was undefined' by adding a small delay before the Initiation calls.

the following is working for me:


<!-- Plugin Includes -->
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("plugins/custom/datatables/datatables.bundle.js")"></script> 

<!-- Js Includes -->
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/roles/view/update-role.js")"></script> 
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/apps/user-management/roles/view/view.js")"></script> 

<!-- Code Section -->
<!-- Common injected components can be found in apps/_Imports -->

@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// Add a small delay to ensure the JavaScript file is fully loaded
await Task.Delay(200);
await JS.InvokeVoidAsync("KTUsersUpdatePermissions.init");
await JS.InvokeVoidAsync("KTUsersViewRole.init");
}
}
}


hope others will find this useful.
if you come across a better solution i would be happy to know happy


user
Lauris Stepanovs Author9 months ago

Hi David,

Glad to hear you have fixed this issue.

The example I have attached should work without adding a delay.

What script did you use to build assets gulp or webpack?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


D
David KR 9 months ago

thanks, Lauris!

I'm using Gulp


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(