Why is my rowgroup not rendering the correct dropdown buttonlist?

thegamechangerpro

Am I doing something wrong?
Two consecutive dropmenus won't render their own specified button lists
take a look a level 3 (the light grey group row). The ThumbsUp icon has the same buttons as the MenuBars - even though in my code (see starting at line 455) seems to be correct.

https://jsfiddle.net/thegamechangerpro/18e7rvpb/20/

If anyone could help me understand what I did wrong I would GREATLY appreciate it!!!!

kthorngren

This is not a Datatables specific error. Start by inspecting the ThumbsUp element and you will see some syntax errors:

<div class="dropdown-menu" aria-labelledby="selectMenu">
   <button class="dropdown-item" type="button" id="allselect"><span class="fa-regular fa-square-check allselect" type="button" data-group="07/01/2022 - Friday0.A-Audio8:00 AM - 10:00 PM" style="font-size: 20px" ;=""> <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold;"> Select All</span></span></button> 
   <div class="dropdown-divider"></div>
   <button class="dropdown-item" type="button" id="deselect"><span class="fa-regular fa-square deselect" style="font-size: 20px; width: 20px" ;=""> <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold;"> Deselect All</span></span></button>
</div>

Note the style="font-size: 20px" ;=""> <span found twice. You can also run the code through an HTML validator to find the errors. You original source has style="font-size: 20px";> <span.

Also you have type defined on one of the span elements. Fixing these doesn't fix the issue.

Looking at the BS dropdown docs it looks like btn-group is used to separate buttons. I added those plus the above fixes to your code and it seems to work.
https://jsfiddle.net/otzs3ykp/

Kevin