I try to collapse the sidebar by default in ag grid. i don't want extend it until i click on the columns tap on the right side.
I tryed to do [showToolPanel]="false" but it will hide all the sidebar.
is there easy way to do that ?
https://next.plnkr.co/edit/UJRD2lrOQe6C7Lfs
To do that you have to use the SideBarDef configuration:
<ag-grid-angular
[sideBar]="{ toolPanels: ['columns', 'filters'] }">
</ag-grid-angular>
In that configuration you can set the defaultToolPanel, but if you do not specify this, it will be closed by default:
The panel (identified by id) to open by default. If none specified, the side bar is initially displayed closed.
plnkr
Related
I am using Material UI DataGrid component in my project.
(components info : https://material-ui.com/api/data-grid/data-grid/)
But, I can't move the vertical scroll to selected row position like this.
const windows = document.getElementsByClassName('MuiDataGrid-window')[0];
windows[0].scrollTop = 10; // 10 is for test.
I find that the div tag which has class name called 'MuiDataGrid-window' has vertical scrollbar.
So. I tried that.. It doesn't work.
Does anyone know about this info?
I want to make the filter icon visible permanently in the Ag-grid. The current behaviour is such that the filter icons in the columns only become visible when I hover across the column headings .
This is an example of the column definition that I am using.
this.ColumnDefs=[{"headerName":"Interface","field":"interfaceName",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Status","field":"status",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Runtime","field":"lastDate",sortingOrder: ['asc','desc', 'null'],width:150,cellStyle:{'text-align': "left"},unSortIcon: true}]
How can I achieve this result?
The correct answer is here to set suppressMenuHide in gridOptions or directly on HTML [suppressMenuHide]="true"
suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.
You can achieve it with just a small CSS. No need to consider ColDef.
Have a look at the plunk I've created: Built-In Filters Icon - show by default
.ag-header-icon.ag-header-cell-menu-button {
opacity: 1 !important;
}
I'm combining ExtJS and Kendo UI - I realise this I'm off the reservation here ;)
I'm rendering a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel
Fiddle: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/
The problem is that the drop-down items (on hover) get drawn only within the bounds of the Ext JS Panel. Is there a way to have the drop down items show 'in front' of everything (I tried changing some of the classes z-order)?
This is not z-index issue. It is parent overflow: hidden issue. If you have relatve container with overflow: hidden CSS property it will always work like that. Simple solution for kendo menu right now is to set all menu relative parents overflow to visible:
.x-panel,
.x-panel-body {
overflow: visible;
}
Like here:
http://jsfiddle.net/5e6Lgtaj/2/
But you must be beware that if you want to use it as scrollbars in them or actually hide overflow it will be a problem.
Other option would be append menu to body element, but you will face more problem then: like loose styling (cause it is moved from initial container with important classes), javascript functions to keep it in correct position and it will be more problems then it is worth.
This is first step how it could looks like:
http://jsfiddle.net/5e6Lgtaj/3/
i use canvaXpress on my webpage, it's a very good graph control, but i don't want to show customer the menu of canvas xpress, like help, show code, filter data on top right corner, how to disable it?
Please RTFM. It is called Toolbar and you can disable it by:
#canvas1-cX-Toolbar {display: none !important;}
Or use the API to disable it:
disableMenu type: boolean
Flag to disable showing the menu on right clicks
Default: false
Used in: all visualizations
disableToolbar type: boolean
Flag to disable showing the toolbar
Default: false
Used in: all visualizations
I have a jQuery menu widget which contains a single root entry and several sub entries. I want it to behave as follows:
It shouldn't open on hover but on click
It shouldn't open to the side but upwards
How can I achieve this?
$("#menu").menu({ trigger: "click" });
That will change the event that triggers the menu from "hover" to "click"
I am assuming by "It shouldn't open to the side by upwards" you mean the sub menu should appear below the selected main menu option, expanding the height of the main menu. However, this is an assumption; If you could clarify your requirements I will come back and edit my answer.
Instead of hover event you would use click event. And most of the time direction of the sub menus or menu item contents is defined with absolute position so in your case you would define the position in a way where you would define a top negative position, where value would be the height of your hidden content.
Hope it helps.