外部用户界面网格菜单按钮? [英] External ui-grid-menu-button?
问题描述
在以下网址还有另一个堆栈溢出问题,但它恰好是一岁且答案为零的问题:
There is another stack overflow question at the following url however it happens to be a year old with zero answers:
Basically I need to find a way to separate ui-grid-menu-button from the top right of the table and position it somewhere else. I can't seem to find any documentation on this, i'm looking for any work arounds or a hackish solution.
This is how i solved this problem.
Css to hide the original button
I wrote the purpose of every line in the comments. I have to hide the original button and, because the menu is automagically opened right under that button and I want the menu in the top-right corner, I have to reset the height of the button (see my final result). The position of the opened grid menu could be a problem if you don't want it in the top-left or top-right corner of the table.
.ui-grid-menu-button {
border: none; // hide button
background: transparent; // hide button
}
.ui-grid-menu-button .ui-grid-icon-container {
visibility: hidden; // hide button
height: 0; // menu in top-right corner
margin-top: 0; // menu in top-right corner
}
Html of my custom button
<div
ng-if="myUiGridOptions.enableGridMenu"
ng-click="gridApi.grid.gridMenuScope.toggleMenu()">
<!-- menu icon -->
</div>
The gridApi
object is the api of ui-grid, obtainable in this way
myUiGridOptions.onRegisterApi = function (gridApi) => {
$scope.gridApi = gridApi;
};
My final result
这篇关于外部用户界面网格菜单按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!