Author Topic: Bootstrap DropDown menu  (Read 242 times)

HardikKumar.Zaveri

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 13
    • View Profile
Bootstrap DropDown menu
« on: January 15, 2019, 09:55:32 pm »
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.


paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 3861
    • View Profile
Re: Bootstrap DropDown menu
« Reply #1 on: January 15, 2019, 11:40:43 pm »
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.
« Last Edit: January 15, 2019, 11:43:47 pm by paramquery »

Chris

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Bootstrap DropDown menu
« Reply #2 on: February 07, 2019, 11:09:40 pm »
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>";
                            }
                           
                        }

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 3861
    • View Profile
Re: Bootstrap DropDown menu
« Reply #3 on: February 08, 2019, 06:04:30 pm »
I'm looking into it..

Chris

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Bootstrap DropDown menu
« Reply #4 on: February 08, 2019, 07:58:57 pm »
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.

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 3861
    • View Profile
Re: Bootstrap DropDown menu
« Reply #5 on: February 11, 2019, 06:00:08 pm »
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.
« Last Edit: February 11, 2019, 06:23:16 pm by paramquery »

Chris

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Bootstrap DropDown menu
« Reply #6 on: February 12, 2019, 02:46:43 am »
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.

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 3861
    • View Profile
Re: Bootstrap DropDown menu
« Reply #7 on: February 12, 2019, 07:33:08 am »
I'm not sure how you mean by
Quote
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.
« Last Edit: February 12, 2019, 07:42:35 am by paramquery »

Chris

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: Bootstrap DropDown menu
« Reply #8 on: February 12, 2019, 07:58:00 pm »
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.

paramquery

  • Administrator
  • Hero Member
  • *****
  • Posts: 3861
    • View Profile
Re: Bootstrap DropDown menu
« Reply #9 on: February 14, 2019, 11:00:47 am »
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?