Base solution for your next web application
Open Closed

Drop down in grid #6240


User avatar
0
BobIngham created

asp-net core, angular, 6.4.0 I am getting ready to upgrade my system to 6.5.0 (waiting for recurring payments) and have downloaded 6.4.0. I use Kendo components in my solution and have a problem with drop-downs in grids not showing. I have modifed my code in line with the latest release:

<ng-template kendoGridCellTemplate let-dataItem>
  <tr>
    <td>
      <div class="btn-group dropdown" dropdown>
        <button dropdownToggle class="dropdown-toggle btn btn-primary btn-sm dropdown-toggle">
          <i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}</button>
            <ul class="dropdown-menu" *dropdownMenu>
              <li>
                <a href="javascript:;" (click)="read(dataItem.id)">Display</a>
              </li>
              <li>
                <a href="javascript:;" *ngIf="permission.isGranted('Pages.Administration.NcForms.Edit')"(click)="edit(dataItem.id)">{{l('Edit')}}</a>
              </li>
              <li>
                <a href="javascript:;" *ngIf="permission.isGranted('Pages.Administration.NcForms.Delete')" (click)="delete(dataItem)">{{l('Delete')}}</a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </ng-template>

But the drop-down is hidden. I seem to remember a similar problem when I had to implement some jquery in my router but the new template has no jquery. The above image shows that the drop-down is activated but is simply not shown. Any ideas anyone?


4 Answer(s)
  • User Avatar
    0
    aaron created
    Support Team

    Something to do with CSS overflow: hidden and/or z-index?

  • User Avatar
    0
    BobIngham created

    Hi Aaron, Yes, I guess you're right. But how do I fix the problem?

  • User Avatar
    0
    aaron created
    Support Team

    How do I reproduce the problem?

  • User Avatar
    0
    BobIngham created

    Hi Aaron, That's a good question which I can't answer without introducing you to Kendo. css is one of my pet hates but I finally got this working through the css file using your advice as a pointer:

    .k-grid td {
        overflow: visible;
    }
    

    Thanks for your help.