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 Pro members may read this post. ]

[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]

[ Only Pro members may read this post. ]

[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]

[ Only Pro members may read this post. ]

[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]

[ Only Pro members may read this post. ]

[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]

[ Only Pro members may read this post. ]