I've a sub-grid and height of sub-grid is set to auto.
height:"auto"
Here, I need to fix the position of headers, When i scroll down. But there is no scroll bar for sub-grid. Because i don't want multiple scroll bars in side my grid. Only one scroll bar.
Thanks in advance.
If the column headers of the subgrid will be fixed during scrolling of the main grid the headers will be overlapped with the contain of the next row of the main grid. In any way it is not possible what you want.
One tip as a workaround which I can suggest you: you can overwrite default tooltips shown if the mouse cursor is over the cells of subgrid. The default tooltips are the same as the cell contain. You can change behavior using cellattr (see the answer and another one as an example). The colModel element in the subgrid having
cellattr: function () { return ' title="My column name"'; }
will display the text "My column name" as the tooltip. I personally use the way for all columns having formatter: 'checkbox'. If you have many such columns and you want to examine some column in the middle of grid then it helps to determine to which column the cell belongs. In your case you have the same problem. So you can use the same cellattr property of the column.
Related
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 have a Buffered grid.For some of the columns the column data is like "lisa...#com"(which is static) if the column data's text width is more than the column's width.
And on resizing the column, I want the column's data to be expanded i mean as text-overflow:normal,if the column data's (text width>=column's width).
How can I achieve that?
Please check the sample fiddler
https://fiddle.sencha.com/#view/editor&fiddle/2dmt
Note: Ignore "homer#simpsons.com" below the grid
On the grid, add a columnresize listener that refreshes the grid view like this:
listeners: {
columnresize: function(headerContainer) {
headerContainer.grid.getView().refresh();
}
}
I have a jqGrid, which has a subgrid opening at the 3rd column of main grid. However, my plusicon are displaying in the beggining of each row (as 1st column).
Is there a way so that I can show the plusicon at 3rd column?
You can use remapColumnsByName or remapColumns methods to reorder the position of the column, with "+" icons, used to expand/collapse the subgrid.
See the demo, which uses
$("#list").jqGrid("remapColumnsByName", ["rn", "act", "name", "subgrid"], true);
to reorder first columns of the grid. See the below picture, where I marked in red color the icons of subgrid column.
The approach works on free jqGrid, because it's code is independent on the exact position of subgrid or multiselect column. The code of old jqGrid requires that subgrid column are placed at the beginning.
Let's assume I have a tree grid with a single column, the treecolumn. The width of the panel is 200px, and when expanding, some records have a wider text than 200px. Currently, Ext will apply an ellipsis property on those cells. What I want to do is to show horizontal scrollbar in the bottom which will update at every expand/collapse event. To accomplish this I used column autoSize() function which increase the column size to fit the content and automatically show the scrollbar in the bottom. But, increasing the column width increase also the column header width, which I don't want. Is there a way to keep the header width at 200px and increase only the column content width, keeping the scrollbar in the bottom?
Thanks in advance!
Eventually I found a way, but as #Alexander suggests in his comment, I had to enter the Ext code and mess with it. In fact what I've done was to remove the horizontal scroll partner corresponding to header as follows:
var headerScroll = myTree.getDockedItems()[0].getScrollable();
mytree.getView().getScrollable().removePartner(headerScroll, "x");
removePartner() is a private function so I should not use it, but in this particular case I don't think will harass the rest of the code.
All:
I am not good at Data structure, currently what I want to build is a table with two-row header(just like excel, you use the first two row as header, the first row may have several column merged together, and under it(in the second row), there are several columns ), and the crucial feature is it allows user to adjust column width by dragging column(in the second row) right side border.
Current the main difficulty for me is: how to design a data structure to make according column respond to the dragging action, for example:
the columns with black text can be dragged by right side border, and when resize, it only affect the left border position of the column next to it on the right side. The grey column will change accordingly(I am thinking it like event handler, once you drag something under it, it will get updated too) if the total width of the columns under it changed.
Thanks