I tried to get a cell to expand it's height dynamically.
Is there a way to adjust the height of a row(GridRow) after it is rendered?
If not, then I will try to use an expandable grid or tree in a grid.
Is it possible to display an expandable grid off a specific cell/column?
Currently I see all expandable grids/tree grids that take up the entire row below the parent.
Thanks
Add this css to your styles:
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}
.ui-grid-row, .ui-grid-cell {
height: auto !important;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
You can see an answer to the same question here: https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267
UI-Grid virtualizes the rows, meaning that it only renders a small subset of the data, and leaves everything that wouldn't be in view unrendered. This means the grid needs to know how tall every row is, so that it can calculate positioning.
If it had to measure every row when rendered this would cause the browser to repaint over and over and performance would be miserable.
You'll find that other virtualized tools (like Ionic's collection-repeat) have the same limitation.
Update:
To answer your second question: you can set a height property on the GridRow object (not your entity, you can use getRow from the grid API to get the GridRow object) and the grid will use this height when rendering the row.
And your third question: no, expandable is only built to work off entire rows. It might be possible to alter what sort of data is displayed in a sub-grid based on clicks in certain cells, but that would require some changes to the expandable code.
Related
When Vaadin 8 Grid is set to be multi-selection mode using setSelectionMode(SelectionMode.MULTI), a column is added on left of the Grid with a checkbox on each row.
I am OK with this selection method, but the caption of each checkbox such as "Selects row number 2" etc. is really not necessary. Is there an easy method to remove these checkbox captions?
Yes, there is a caption, but it should not be visibile. It is accessibility feature. It seems that you have something wrong with theme and styles, as this label should not be rendered in viewport. So it should not be visible, it is just for screenreaders so that blind people could use the selection. See the screenshot how DOM should look like.
I change added .v-assistive-device-only-label that has all the same rules as in .v-assistive-device-only. Now, both the check square and caption are gone, leaving a empty cell to select. I'd like to learn how to make only the check square to show up but not the caption, if possible.
You need to include label element in the css selector. As you see label is a child element of the element having .v-assistive-device-only-label class name. If you target .v-assistive-device-only-label, it the css is applied to that element and thus also the checkbox which is its child is affected too. But when you add label, the css applies only for the label which is child of .v-assistive-device-only-label
.v-assistive-device-only-label label {
position: absolute;
top: -2000px;
left: -2000px;
width: 10px;
owerflow: hidden;
}
My codepen has a jquery-ui sortable on a table. A few problems that I see are: 1) selecting a row to drag adjusts table width during selection, but resumes to the correct table width after it is dropped. 2) The selected table row shifts outside of left border of the table containment. 3) The selected table row loses the table styling. The data scrunches up apparently losing its default padding-right of 10px.
I am running Windows 7 and use chrome browser rev 56.0.2924.87
May someone can answer me the redundant need to post code before one can post?
Putting the bare minimum code here. See pen for full code.
<table class="playlist-table">
I was unable to find this question prior to posting my problems:
jquery UI Sortable with table and tr width
Thanks go to Yaroslav for this helper class that fixed issue#3. The selected table row now preserves styling after being selected.
.ui-sortable-helper {
display: table;
}
And to Keith, his code fixed issues 1) selecting a row to drag adjusts table width during selection. 2) The selected table row shifts outside of left border of the table containment.
$('td, th', '.playlist-table').each(function () {
var cell = $(this);
cell.width(cell.width());
});
I'm trying to disable the checkbox on a specific row based on some property of it's Bean (or just make the whole row generally unselectable), but I can't really see any method or property I could use to get a handle of the checkboxes on the left hand side added when using a multi-selection model or something as broad as disabling the whole row. Any thoughts on how this could be achieved, or where I should be looking?
You can use CSS to hide uncheckable rows. First set their styles using setRowStyleGenerator:
grid.setRowStyleGenerator(row -> {
boolean uncheckable = (Boolean)
row.getItem().getItemProperty("uncheckable").getValue();
return uncheckable ? "uncheckable-row" : "";
});
Then change styles in your .scss, they should look something like:
.v-grid-row.uncheckable-row td {
background: #b1b9d6 none repeat scroll 0 0;
}
.v-grid-row.uncheckable-row td:first-child {
visibility: hidden;
}
.v-grid-row.uncheckable-row.v-grid-row-selected > .v-grid-cell {
background-image: none;
border-color: #d4d4d4;
color: inherit;
text-shadow: inherit;
}
Here I hide the whole cell with checkbox (if hiding the content of td itself, user will still be available to select the row), use a different color for these rows and prevent them from being highlighted when "select all" checkbox is active. Surely, further styling is available. Since we only hide them from user, they still can be selected with grid.select() and located in grid.getSelectedRows() collection, you should filter them manually (by using some "uncheckable" property, as shown above).
It is not possible to disable checkbox on a specific row.
One solution is to use generated column and/or custom renderer.
if you are using twitter bootstrap as your responsive framework, you should be able to find that row and give it a class of ".inactive", and if that doesn't work you can always rig it but placing and absolute positioned box with a height and width of 100% inside of that row and z-index it to at least 250. That should make everything in that row un-clickable!
How I can display the second word of header in column?
Now kendo grid doesnt show symbols which dont place in header
I want
Second
First
But now
Second Fi
Just add this CSS to allow the column header text to wrap when column width too small to display all words:
th.k-header{
white-space: normal !important;
}
DEMO
i m using a jqgrid on asp.net mvc... i have a specific requirement....The data in the grid is list of values that are to be set on each row... and each row has a Date column... While displaying the grid, i want a different row color on sunday and saturday.. while the rest of the rows are white.. How to achieve this in jquery jqgrid?
You can "bring colors" in your grid with respect of setCell method of jqGrid (see this answer as an example) or jQuery.addClass, jQuery.css (see this and this). You should do this after the grid contain is loaded, for example, inside of your loadComplete event handler.
If you want set background-color style on the cell you should understand one small problem. The class 'ui-widget-content' used for every grid row already defines the background-color per background style (!!! not per background-color). So to have effects you should make changes of the background-color style in one from the following ways: 1) just use background: yellow instead of background-color: yellow (see this). 2) remove 'ui-widget-content' class with jQuery.removeClass('ui-widget-content') (see this); 3) change style of the row more explicit like $("#"+rowid)[0].style.backgroundColor = "yellow" (see this as an example). Choose the ways which you prefer.