Bootstrap dropdown button doesn't open

[webpixels]

Hi,

I am trying to add a dropdown button inside bootgrid. It shows the HTML but ths JS doesn't work in order to open the menu.

Any suggestions?

Here is the code:

<table id="data-table-selection" class="table table-striped">
                <thead>
                    <tr>
                        <th data-column-id="actions" data-html="true"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($users as $user)
                    <tr>
                        <td>
                            <div class="btn-group">
                            <button class="btn btn-success waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="zmdi zmdi-more-vert"></i>
                            </button>
                            <ul class="dropdown-menu dt-action-buttons" role="menu">
                                <li>
                                    <a href="">Profil utilizator</a>
                                </li>
                            </ul>
                        </div>
                        </td>
                    </tr>
                    @endforeach 
                </tbody>
            </table>

Thanks!

[Vikas-jk]

Hello

You can use Jquery method to make it work like $('.dropdown-toggle').dropdown();

This should work, thanks

[Vikas-jk]

Hello @nag9329 This code should work, i haven't test it , you need to use formatters ( http://www.jquery-bootgrid.com/documentation#formatters) and initiate dropdown after table is loaded

Use Th as <th data-column-id="actions" data-html="true" data-formatter="commands"></th>

$(document).ready(function () {
    $("#data-table-selection").bootgrid({
        formatters: {
            "commands": function (column, row) {

                var str = "";
                str=str+' <div class="btn-group">';
                str=str+' <button class="btn btn-success waves-effect dropdown-toggle" data-toggle="dropdown" aria-expanded="false">';
              str=str+'     <i class="zmdi zmdi-more-vert"></i>';
              str=str+ '</button>';
              str=str+' <ul class="dropdown-menu dt-action-buttons" role="menu">';
              str=str+'    <li>';
               str=str+'       <a href="">Profil utilizator</a>';
               str=str+'   </li>';
               str=str+' </ul>';
               str=str+'</div>';
            }
        }
        });

    $("#data-table-selectio").on("loaded.rs.jquery.bootgrid", function () {

        $(".dropdown-toggle").dropdown();
    });
})

Let me know if this doesn't work for you, i will uploaded tested version, thanks

[nag9329]

Hey @webpixels , I tried something like this

$('#tableID).bootgrid().on("loaded.rs.jquery.bootgrid", function(){ $('.dropdown-toggle').dropdown(); });

and added class "table-responsive" in which the bootgrid is located. This opens the dropdown for me. Please let know if you're still facing the problem

[Vikas-jk]

No i am not facing this issue please check my code again, i have updated it

[nag9329]

Thanks @Vikas-jk. We both have almost the same solution. If it works for @webpixels , he can close the issue