The following sample script is useful to transform a list that contains many action links into a single dropdown select box.
Place these codes in Userview Builder > Settings.
Custom Javascript
window.addEventListener('load', function () { setTimeout(function(){ $("#requestListAll > tbody > tr, #list_request > tbody > tr").each(function(){ actionLink = $("li.action-link-modal").clone(); if($(this).find("td.row_action a").size() > 0){ $(this).find("td.row_action a").each(function(){ $(actionLink).find("ul").append( "<li>" + $(this).prop("outerHTML") + "</li>"); }); $(this).find(".footable-last-column").append( actionLink ); $(actionLink).removeClass("action-link-modal").show(); $(this).find("td.row_action").not(".footable-last-column").remove(); $(this).find(".footable-last-column .row_action_inner").remove(); } }); if($("#requestListAll > tbody > tr, #list_request > tbody > tr").size() > 0){ $("th.row_action").not(".footable-last-column").remove(); } }, 1000); }, false);
Sub Header
<li class="action-link action-link-modal dropdown" style="display: none; list-style: none; margin: 15px;"> <a data-toggle="dropdown" class="btn dropdown-toggle waves-effect btn waves-button waves-float" aria-expanded="false"> Action <span class="caret"></span> </a> <ul class="dropdown-menu"> </ul> </li>
Custom CSS
.action-link.open .dropdown-menu { width: max-content; left: unset; right: 0; } .action-link .dropdown-menu { width: max-content; left: auto; right: 0; }