chniter/bstreeview

Bootstrap 5

ScotsScripts opened this issue · 5 comments

ScotsScripts commented

Just a quick note on bootstrap 5 usage. All that needs to be done is change data-toggle to data-bs-toggle in the js and this plugin works for bs5. Great plugin, wish I would have found it sooner!

dkarelov commented

Not only - also data-target to data-bs-target

Deleted user commented

Thanks for the workaround for bootstrap v5! I can confirm these 2 changes have fixed it.

data-toggle -> data-bs-toggle
data-target -> data-bs-target

Any ETA on a new release ?

m-peterman commented

Not really. You need to remove Jquery to be satisfactory

  • 👍1
  • 😄2
Khuthaily commented

Please check my pull request. @m-peterman, the issue is not in jQuery. As @ScotsScripts and @k3kc suggested, it is because Bootstrap 5 uses data-bs-* instead of data-*. So, this pull request simply checks for the Bootstrap version and then uses the right attribute names based on the version. It works fine for me on both Bootstrap 4 and Bootstrap 5.

Khuthaily commented

Till the pull request is merged, you can do these steps to provide support for Bootstrap 4 and Bootstrap 5:

  1. add
/**
* Define Bootstrap 4 attributes
*/
let dataToggleAttr = 'data-toggle';
let dataTargetAttr = 'data-target';
/**
* get Bootstrap version
*/
let bootstrapVersion = (bootstrap.Tooltip.VERSION).charAt(0);
/**
* If Bootstrap 5, redefine attributes
*/
if (bootstrapVersion === '5') {
    dataToggleAttr = 'data-bs-toggle';
    dataTargetAttr = 'data-bs-target';
}

before the var templates line.

  1. replace the line
treeviewItem: '<div role="treeitem" class="list-group-item" data-toggle="collapse"></div>',

with

treeviewItem: '<div role="treeitem" class="list-group-item" ' + dataToggleAttr + '="collapse"></div>',
  1. replace the line
.attr('data-target', "#" + _this.itemIdPrefix + node.nodeId)

with

.attr(dataTargetAttr, "#" + _this.itemIdPrefix + node.nodeId)

Done! Enjoy.