Bootstrap DropDown menu

[HardikKumar.Zaveri]

Hi,

When I am trying to use dropdown to display action items (EDIT/DELETE and other links ) for record in PQ GRID, I can only see three bars but it is not displaying any dropdown items. Can you please tell which option to be set INSIDE param query so that it displays dropdown menu and its items properly without any issue on PQ GRID for each record. Also, I want to make sure that dropdown menu items does not get overlow inside PQGRID CELL and row?


Thanks for your help in advance.

[paramvir]

Only the jQueryUI autocomplete, native select and pqSelect are tested in pqgrid as editors. Other dropdown may or may not work. There is no special directive for them.

https://paramquery.com/pro/demos/editing_custom

Could you please share your implementation code or a jsfiddle so that I can look into it.

[Chris]

The Bootstrap Drop down was working in a previous iteration of PQGrid.  I just completed the upgrade to the latest version.  The PQGrid tables have changed from a Html table markup to using Div's.  Now the 'dropdown' functionality is not working.

This is what we had being doing as part of the ColModel:

 

Code: [Select]

render: function (ui)
                        {
                            var HasEditPrivilege = '@ViewBag.HasEditInventoryAdjsutments';
                            if (HasEditPrivilege.toLowerCase() == "true" && ui.rowData.InventoryAdjustmentId > 0 && ui.rowData.ValuationDate != null)
                            {
                                return  "<div class='dropdown'>" + "<span class='fa fa-bars awesomefont' data-toggle='dropdown'></span>" +
                                        "<div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdownMenuButton'>" +
                                        "<a class='dropdown-item' href='someurl'" + +ui.rowData.InventoryAdjustmentId + "'><span class='far fa-external-link awesomefont'></span>Update Adjustment</a>" +
                                        "</div></div>";
                                }
                               
                            else if (HasEditPrivilege.toLowerCase() == "true" && ui.rowData.ValuationDate != null)
                            {
                                return "<div class='dropdown'>" + "<span class='fa fa-bars awesomefont' data-toggle='dropdown'></span>" +
                                        "<div class='dropdown-menu dropdown-menu-right' aria-labelledby='dropdownMenuButton'>" +
                                        "<a class='dropdown-item' href='someurl'"><span class='far fa-external-link awesomefont'></span>Add Adjustment</a>" +
                                        "</div></div>";
                            }
                           
                        }

[paramvir]

I'm looking into it..

[Chris]

I was able to determine yesterday that by using styling via a  class on the colModel to set overflow:visible allowed the drop down box to show.  Now the issue is that the action items are not clickable.  It seems like the code registers the click behind the drop down.

[paramvir]

I just checked bootstrap dropdown in a cell renderer, it works fine and the action items are clickable.

Code: [Select]

postRender: function (ui) {

                            var rowIndx = ui.rowIndx,
                                grid = this,
                                $cell = grid.getCell(ui);

$cell.css('overflow',"visible");
$cell.find('.dropdown-toggle').dropdown();
$cell.find('.dropdown-menu li').click(function(evt){
alert(evt.target.innerText);
})     
}

Please let me know if you need further assistance.

[Chris]

That just fires on every row post retrieve.

As I said with the overflow set to visible the dropdown will show, there is no need to explicitly call it with $cell.find('.dropdown-toggle').dropdown(); , however the menu item it then displays is not clickable.

Code: [Select]

render: function (ui) {
<div class="dropdown show">
   <span class="fa fa-bars" data-toggle="dropdown" aria-expanded="true"></span>
   <div class="dropdown-menu dropdown-menu-right" style="cursor:default" aria-labelledby="dropdownMenuButton">
       <a class="dropdown-item" style="z-index:2000" href="someurl">
          <span class="far fa-external-link"></span>
          Add Adjustment
       </a>
   </div>
</div>
}

This produces on click of the dropdown a one item list dropdown.  That one item is then not clickable.  Mouseover is firing as the row will highlight but click is not registered.

[paramvir]

I'm not sure how you mean by

click is not registered

as I don't see click binding anywhere in your code.

Could you please share a small test case in jsfiddle so that I can check the issue faced by you.

[Chris]

Code: [Select]

<a class="dropdown-item" style="z-index:2000" href="someurl">
          <span class="far fa-external-link"></span>
          Add Adjustment
       </a>

the link tag <a></a> is a hyperlink to a url (I have simply removed the url for the example). Clicking the link does not activate it.  Also having an Alert() in the same spot does not register.  That is what i mean by the click is not registered.

[paramvir]

Working fine.., also <a></a> tags open the url properly.

Please check this plnkr.

https://next.plnkr.co/edit/WJukBvu76Fw6AVuw?preview

Which version of grid and bootstrap are you using?