Search code examples
twitter-bootstrapdrop-down-menuhtml-tablerowjasny-bootstrap

Dropdown menu from table row in Bootstrap

I'm trying to get a dropdown menu working from a table row using the Jasny extension found http://www.jasny.net/bootstrap/components/#rowlink. Unfortunately I can't seem to get it to work to display a dropdown. I have en example of what I've done so far:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<thead>
    <tr>
        <th>
            Heading
        </th>
        <th>
            Heading
        </th>
    </tr>
</thead>
<tbody data-provides="rowlink">
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr>
        <td>
            Cell
        </td>
        <td>
            Cell
        </td>    
    </tr>         
</tbody>
</table>​

Clicking row will follow href link, instead of displaying the dropdown menu. I can get the rowlink extension to work as a link or to call a modal window. I can also get a dropdown to come from a single cell (without jasny extension), but would like it to work from the whole row.

Solution

  • Unfortunately rowlink only works with the href and doesn't propogate js events. So it can't be used for dropdowns.

    Having a closer look dropdown code, shows that after the dropdown is initialized a click on dropdown-toggle doesn't do much more than toggle the 'open' class. We can easily mimic that. Now we just need to make sure dropdown is initialized on load instead of on click and presto :)

    Note that I'm only using the rowlink css (not js) for the pointer and link style.

    <html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
<tbody>
    <tr class="rowlink">
        <td>
            <div class="dropdown">
                <a class="dropdown-toggle rowlink" data-toggle="dropdown" href="#">
                    Click For Dropdown Menu
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>
                        <a tabindex="-1" href="#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="#">
                            Another action
                        </a>
                    </li>
                </ul>
            </div>
        </td>
        <td>
            Click For Dropdown Menu
        </td>    
    </tr>
    <tr><td>Cell</td><td>Cell</td></tr>         
</tbody>
</table>​

<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>

<script>
    $(function() {
        $(this).find('.dropdown-toggle').dropdown();

        $('.rowlink').on('click', function(e) {
            $(this).find('.dropdown').toggleClass('open');
            e.stopPropagation();
        });
    });
</script>

</body>
</html>

    P.S. This jsfiddle kept crashing my browser :s