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 remove grid column header highlight (bold + underline) when applying menu filter in Ext Js?

I have been using Ext Js' grid panel with menus applied to the column headers (default).
Whenever I apply a filter to the column through the menu, the column header gets highlighted with it's title getting bold and underlined.
I have tried to find a way to remove it, but could not find any event or method to solve this problem. I want my application to remove all highlights before applying a new one, so that it becomes impossible to have 2 columns with highlights on their title simultaneously.
Is there any way to implement this? Or simply disable the highlights, so that no column header titles get highlighted when filtered...
Obs: I am applying a store.clearFilter() whenever the column filter is changed, and the header is still not getting back to normal.
Obs2: Could not post images to illustrate due to stack's reputation restrictions (second time posting).

You can simple override the filterCls to remove the highlight:
Ext.override(Ext.grid.filters.Filters, {filterCls: Ext.baseCSSPrefix});

How do I include padding in highlited item in kendo.listview?

I have created a kendo.listview object, and used the padding property to control the space between the text and the border. When an item is selected, only the text is highlighted and I want the entire row (border to border) to be highlighted. Any suggestions?
I want the listview object to be able to handle various size items, so using the min-width property is not ideal. However I am not set on using padding, so if there is some other way of controlling the distance between the text and border I am willing to apply it.

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.

Add Hover display for table cell

I have a table, but it is not in a list format, meaning not a column/row format. I look for specific cells to add a hover event that displays a description of the cell.
$("#TableID td").hover(function(){
//ifCellThatIWant
$(this).append("<span>Message that was brought in</span>");
},
function(){
$(this).children().remove();
});
The problem is right now is that the hover displays a span(with info. inside) that I used jquery to append the span to the cell when mouseover, which expands the cell, which is an effect that I don't like or want. I'm Trying to have an out of the table look,but still be by the cell that triggered the event; because if the span has a lot of info. in it, expanding the cell dynamically will start to look pretty nasty. Also will help if I had some type of css direction on how will I make the display for the mouseover "description" span look nice. My mind thought is that a way to accomplish what I want is giver the appended span the position of my mouse cursor when hover, but not sure if its the right approach or what the syntax would look like.

Make the span display as block and set the z-index greater than anything else on the page. Then you can absolute position it and set the left and top properties to the x and y positions of the mouse location.
EDIT:
Here's a demo of what I mean --> http://jsbin.com/odape. Instead of appending a span, I would suggest just creating a placeholder one at the bottom of your html to use for each cell and just change the text to display (not sure how you were bringing it in so I didn't add it in my example.