We Keep Coding

How to make the search icon permanently visible in the column in ag-grid?

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;
}

How to change jqGrid plusicon for subgrid position?

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.

Extjs 4.2.1 - Grid mask won't hide

I have a UI with several grid components. For some reason, even after it's populated with rows, one of the grid's Load Mask stays visible.
I have to work out why the mask stays after load, but first I was trying to determine the code that would hide the mask.
Here's what I've tried:
Ext.getCmp('callClassAvailableGrid').setLoading(false)
Ext.getCmp('callClassAvailableGrid').unmask()
Ext.getCmp('callClassAvailableGrid').view.unmask()
Ext.getCmp('callClassAvailableGrid').viewConfig.unmask()
None of which hide the mask.
Also of note:
Ext.getCmp('callClassAvailableGrid').store.loading
returns false
How can I hide the Mask on this Grid?

I believe you need to be calling unmask() on the Ext.Element instance for the grid.
mygrid.getEl().unmask()

Found the answer:
Ext.getCmp('callClassAvailableGrid').view.loadMask.hide();

jqGrid, set the subgrid column widths as percentages?

I have the main grid set to autowidth: true, but how do I do the same with the subgrid so that it is the same width as the parent, and the columns are all relative/variable/percentage widths?

You wrote in the comment to other answer the question
Why are the colModel, and subGridModel two completely different data
structures?
Indirectly you answered yourself on your main question. The usage of old style subgrids (see "Advanced" / "Subgrid" on the official jqGrid demo) have too many restrictions. If you would use subgrid as grid (see "Advanced" / "Grid as Subgrid" on the the same jqGrid demo) you can create the same results, but you have much more flexibility. You can use for example formatters (inclusive custom formatters) use cellattr and rowattr callbacks, use autowidth: true option in the subgrid and so on. You have exactly the same set of possibilities as in the main grid. If you define some common callbacks in $.jgrid.defaults you can share the code of callbacks of subgrid and the main grid...
I can continue with the list of advantages of the usage of Grid as Subgrid. My short advise: use always only the feature.

The width of the subGrid will be set when it is initalized, and as it doesn't contain any data when it is built it will be the size of the total column widths. You can get around this by setting the width of the grid each time you load the subgrid
$('#ParentGridName, #SubGridName').jqGrid('setGridWidth', $('#IdOfHTMLElementHoldingGrids').width(), true);
This will synch up both the parent and child grid sizes. If you are worried about the window being re-sized as well you can call this as part of an event handler.
Ex.
window.onresize = function () { resizePageGrids() }

How to Fix position of headers in subgrid of JQGrid?

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.