CODEWITHSUNDEEP
jqueryjqgridtwitter-bootstrap
araaku
araaku

Reputation: 275

Twitter Bootstrap Button Dropdown in jqGrid row

I am trying to add bootstrap drop down button in a column of jqGrid row but when user clicks on the down arrow in the button so see the options, the options gets hidden behind the next row of the grid.

Have tried setting the zIndex but did not work.

Please suggest.

Solved:

The issues was fixed by overriding the jqGrid css ".ui-jqgrid .ui-jqgrid-view .ui-jqgrid-bdiv" to have overflow: visible

Upvotes: 3

Views: 3106

Answers (2)

damneddutch
damneddutch

Reputation: 1

Got this working by doing the following :

  1. Add a class reference to the column model

{ name: 'edit', search: false, width: 90, align: 'center', sortable: false, classes: "bootstrap_dropdown" },

  1. Add the bootstrap_dropdown css

    <style>
td.bootstrap_dropdown {
    overflow:visible !important;
    white-space: normal !important;
}

  2. Edit the ui.jqgrid.css, and change the ".ui-jqgrid .ui-jqgrid-bdiv" element

    .ui-jqgrid .ui-jqgrid-bdiv {position: relative; margin: 0; padding:0; overflow: visible!important; text-align:left; }

  3. Add the dropdown to the row

            gridComplete: function () {
        var rows = $("#grid").getDataIDs();
        for (var i = 0; i < rows.length; i++) {

            // code here 

            var edit = " ";
            edit = edit + "<div class='btn-group'>";
            edit = edit + "  <button type='button'  onclick=\"viewmodal.showEditPage('#grid'," + rows[i] + ");\" class='btn btn-primary  btn-xs'><i class='fa fa-pencil-square-o lg'></i> Edit</button>";
            edit = edit + "  <button type='button' class='btn btn-primary  btn-xs dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>";
            edit = edit + "    <span class='caret'></span>";
            edit = edit + "    <span class='sr-only'>Toggle Dropdown</span>";
            edit = edit + "  </button>";
            edit = edit + "  <ul class='dropdown-menu' role='menu'>";
            edit = edit + "    <li><a href='#' onclick=\"viewmodal.showUploadPage('#grid'," + rows[i] + "); return false;\"><i class='fa fa-upload lg'></i> Upload images</a></li>";
            edit = edit + "    <li class='divider'></li>";
            edit = edit + "    <li><a href='#' onclick=\"window.open('" + link + "','','');\"><i class='fa fa-search lg'></i> Preview web</a></li>";
            edit = edit + "    <li><a href='#'><i class='fa fa-search lg'></i> Preview mobi</a></li>";
            edit = edit + "  </ul>";
            edit = edit + "</div>";

            // Add buttons to 'edit' column
            $("#grid").jqGrid('setRowData', rows[i], { edit: edit });

            // more code here
        };  
    }

Upvotes: 0

baptme
baptme

Reputation: 10092

Your question look similar to this one https://stackoverflow.com/a/11067115/1416911

There's several solution (thanks to the bounty) to deal with the dropdown overflow issue.

Look at @ScottS answer in particular.

Upvotes: 2

Related Questions