I am quite new in jQuery DataTables. I just read about responsive table feature provided by DataTables, see this example.
Here columns are hiding on window resizing but the problem is that last column is also hiding. Can we define which column must be hidden on different window sizes?
See Class logic for fine-grained control on when each column would be visible.
For example, to always show last column:
$(document).ready(function(){
$('#example').DataTable({
responsive: true,
columnDefs: [
targets: -1,
className: 'all'
]
});
});
where columnDefs.targets set to -1 points to last column (column index counting from the right), and className: 'all' indicates that column will always be visible, regardless of the browser width.
If you can edit the HTML, you can add the data-priority="1" attribute to the th element you want NOT to be hidden. Ex:
<th data-priority="1">Last column</th>
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();
}
}
Textarea contains lot or lines. In jqgrid grid only first line should displayed.
In jqgrid view window more lines and possible scrollbar also should be displayed.
Oleg answer from How to restrict maximum height of row in jqgrid
restricts textarea height in view window also to single line.
How to show first line in grid only but show more lines in jqgrid view form ?
colmodel is:
{"name":"Description",
"edittype":"textarea",
"wrap":"on",
"formatter":function(v){ return '<div style="max-height:20px">'+$.jgrid.htmlEncode(v)+'</div>';
}
,"editoptions":{"class":"","rows":18,"wrap":"off","style":"width:800px",
"readonly":"readonly"
},
"editrules":{"edithidden":true},"editable":true,"width":539,
"classes":"jqgrid-readonlycolumn"}
jqgrid view window shows multiple lines. This should remain the same:
grid shows also multiple lines. This is wrong.:
How to force grid to show only first line in each textarea
Or is is possible to show more lines in bottom of screen: if some row becomes active, first 10 lines from textarea column should appear in bottom. This is like in windows log viewer: moving into event row shows event long data in separate window
If I understand your problem correctly you can solve it in relatively easy way. You should just use CSS instead of inline styles for setting of max-height of the div with multiline data. You can for example set some class on <td> elements of the column having multiline elements using classes property of colModel. For example is you would use classes: "textInDiv" the <td> of the cell in the corresponding column will get the class attribute. Because you have different hierarchy of elements inside of grid and inside of View form you can specify different restrictions of the height on both cases:
{name: "Description", edittype: "textarea", classes: "textInDiv",
formatter: function (v) {
return '<div>' + $.jgrid.htmlEncode(v) + '</div>';
}}
and
tr.jqgrow>td.textInDiv>div {
max-height: 20px;
overflow: auto
}
td.form-view-data>span>div {
max-height: 150px;
overflow: auto
}
The demo demonstrate the results. How you can see on the following pictures the max-height for the cell contain is different for grid and the View form:
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.
I have implemented column resizing with YUIs DataTable as demonstrated in this example:
http://developer.yahoo.com/yui/examples/datatable/dt_complex_clean.html
Is there anyway to enable column resizing without column moving?
Yes. Set "resizable" to true in your column definitions (it defaults to false). Your link has an example of this on line #79.
Don't set draggableColumns in the datatable configuration (it defaults to false). This is done in the example on line #99.