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:
Related
I have a question to which I can't find the answer for some time.
It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design.
Here is an image of the scheduler with the problem shown
I also provide a code sample which simulates the problem.
https://docs.dhtmlx.com/scheduler/snippet/9445edbf
This behavior can be fixed by the following style:
.dhx_scell_expand{
position:absolute!important;
}
Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:
.dhx_scell_expand{
position:absolute!important;
}
.dhx_scell_name{
margin-left: 26px;
text-align: left !important;
}
Of cause, you can experiment with it to make appropriate for your project.
Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:
scheduler.createTimelineView({
...
dx: 300, //200 by default
...
});
Here is an example with additional styling, and the resized names section :
http://snippet.dhtmlx.com/5/a3da39a40
Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example:
http://snippet.dhtmlx.com/5/87845739f
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;
}
When I use ag-grid of given fixed height with Angular, before any data is shown the space where data will be shown (so grid in fact) is visible with text 'loading'. It's not correct in my case, as I don't bind rowData to Observable or Promise so it's not async. The grid is populated after click on button. I'd like to see only column headers and nothing below that. My grid config looks like that:
<ag-grid-angular
style="width: 100%; height: 335px;"
class="ag-theme-balham"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
animateRows
rowSelection="multiple"
>
So I'd like to hide whole grid except of column headers until rowData is empty array. Is there a way to do this?
Just to clarify, I use ag-grid with React but there are many similarities between the two. There are two things you can do here:
You can control what text is visible while loading or if there is no data with
[overlayLoadingTemplate]="<span></span>"
[overlayNoRowsTemplate]="<span></span>"
Since you are currently setting a fixed height in your in line styling for the grid, it will always be at 335px. Once you set that to something that's not static, you can add this prop to the grid and it will change the height of the grid depending on data inside.
[domLayout]="autoHeight"
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'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.