How to change jqGrid plusicon for subgrid position? - javascript

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.

Related

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

Datatables responsive - column not collapsible to child row

I use DataTables. Each row in all tables has it's own actions in a separate column (smtn like "edit item", "delete item" and so).
I use the Responsive extension and it shrinks the table to width of a view and columns that do not fit that area are put into the "child row" (set of values visible on-demand under the plus button).
I would like to keep my actions column visible but on the right side of table. Is it possible? And how?
Yes its possible
Datatables gives you the option to set priority to any column using columnDefs
https://datatables.net/extensions/responsive/priority
Default priority for columns is 10000. So you can assign a lower value for the action column so that its not hidden before others.

Slickgrid cell colors lost on scrolling

I'm using a slickgrid to display certain values. Upon satisfying a particular condition, i'm highlighting the cells with yellow color using the statement
$($('.grid-canvas').children()[args.row].children[args.cell]).context.style.background = "yellow";
I'm holding this slickgrid under a <div>.
Now as the number of rows increase, a scrollbar appears within the <div>.
As i scroll down to reach the last row and then scroll back up to the first row, the cell colors that were initially there in the cells of the top rows are lost.
Because Slickgrid will redraw the grid upon scrolling (instead of storing all data in DOM tree), so what you set in DOM will be reset, we have to use the API of Slickgrid to set background at specific row, column : grid.setCellCssStyles(key, hash)
https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#setCellCssStyles
you can look demo here: http://jsfiddle.net/n58Cq/90/

Change Datatables options through jQuery

So, I have a table using the Datatables plugin. This table has a left fixed column to start with as well. Each one of my columns has a button to 'anchor' its column from scrolling, so fixing it in place.
You can change how many left columns you have fixed in the initialization with
new FixedColumns( oTable, {
"iLeftColumns": 1
} );
or "iLeftColumns": 2 and so on.
I already have my programming set to push the column to the far left, so now i just need to overwrite the iLeftColumns accordingly. How would I go about overwriting the datatables initialization with jQuery, on the anchor button click? With one column anchor clicked, iLeftColumns would be 2, but maybe the user anchors another column and makes it 3 and so on.

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.

Categories