Apparently Telerik thinks this is a solved problem (as it's documented). I was reading this ...
Enfocing min width on Kendo Grid (jQuery) when grid has hidden columns
... which in turn led me to telerik's documentation here ...
https://docs.telerik.com/kendo-ui/knowledge-base/apply-minimum-width-during-column-resize
which seems to imply this is done deal ...
... those columns are not >= 300px wide!
So what am i missing here ?
I need a means to say "this column MUST be no thinner than x number of pixels" and have it stick when I resize the grid however that happens.
I think this dojo example only takes in to account the grey splitter bar in the dojo and not the window being resized.
Further details
When building a grid and making it scrollable + resizable and shrinking it in height there's a scrollbar applied to the row set for the height.
I believe the same should be true horizontally and that the "grid" should shrink but it's column set should be scrollable ...
... consider that image ... the scrollbar should be part of the grid itself not below the grid.
When the grid shrinks the pager should shrink and remain visible (both sides of it), and a scrollbar be applied to the data to allow the contents of the grid to be scrolled without losing sight of any of the grid footer.
Related
How do i fix the position of the right most column?
When trying to increase or decrease the size of a column, the right most column moves along with the adjustment, creating a gap or a horizontal scroll bar in the process. Is there a way to adjust all the columns dynamically to allow the position of the right most column to stay fixed?
Here are a few examples from the docs
Gap from decreasing 3rd column width:
Scroll bar from increasing 3rd column width:
Layout Mode
If you want columns to resize then you should look at using the fitColumns layout mode. in the table constructor you should set this on the layout option:
var table = new Tabulator("#example-table", {
layout:"fitColumns",
});
This can be seen on the Fit To Width Example
Tabulator provides many options for configuring this layout mode to choose how to resize each column. More info on this can be found in the Layout Documentation
Frozen Columns
If you would alternatively like the column to remain where it is, even when the table is scrolled horizontally then you can use the frozen property on the column definition for the dob column to freeze it in place:
{title:"Date of Birth", field:"dob", frozen:true}}
More details on this can be found in the Frozen Columns DOcumentation
I have a Material UI Table below. All of the table's columns are fit sized to 205px. Table itself set to be 100% width. So when I load the page if there is available space table do get bigger. The problem is if there is not enough space columns need to shrink based on the text inside them but they don't. They are stuck at 205px width.
I removed all paddings no help either. Text inside the each cell is an input field so if I make the input field width and all cells 60px the width went down to 191 but it's still giving each cell way bigger width than they need so columns are way larger than they should be. I changed width of the table, width of the container all no help.
I have pretty much exact table structure as in this example here;
https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table
If you see table columns unnecessarily too large in this example too. What's causing columns to be way larger than what they need to be? Why they're all identical fixed to some size?
The input in the table cells have a default width and are making the columns to be not shrinkable, Changing width of input to 100% might make input to take parents width.
https://codesandbox.io/s/optimistic-benz-ilnz2
How can I set the relative height of a grid according to screen size in ExtJS?
I am using two grids in single screen underneath each other. When the first grid is populated with data, the first grid should use up as much space as it needs and the second grid should expand over the rest of the screen.
How can we set a relative height to the second grid so that the first one can expand and collapse based on the data?
In modern you can set the first grid to "infinite: false" (Ext.grid.Grid), while you add a "flex: 1" to the second.
In classic you would have to set the height of the first grid, as soon as you know the amound of rows (number of records) you received.
I have Kendo UI Grid witch one locked column, which has dynamic width and height. The Grid's container is resizing in CSS and I'm using kendo.resize($("#grid")) to fit Grid to it and everything works perfecly.
I have also a function triggered on window resize event which is adjusting the columns widths. Colums should occupy whole grid without showing bottom scrollbar if it's possible, but they also have minimum height. So I calculate the columns widths and set it to them, but when I have horizontal scrollbar in the unlocked colums container, the locked container do not match to it.
Normally locked columns shows white area in bottom if there is horizontal scrollbar but when I set the columns widths explicitly it woluld not.
I've reproduced my issue in this fiddle (it's a little simpler than I describe but idea is the same): http://dojo.telerik.com/ADaqe
When i open it grid should looks ok, but when you'll decrease width of right iframe and horizonal scrollbar will show - white area is not shown and just try to scroll the grid to the bottom and see what happen:
Any help would be appreciated.
There is private grid function ._adjustLockedHorizontalScrollBar() which doing exacly what I needed:
$(window).on('resize', function () {
that._adjustLockedHorizontalScrollBar();
...
});
Here is updated fiddle: http://dojo.telerik.com/ADaqe/4
If you only want to use CSS to fix this, adding padding-bottom: 100% to the table inside the locked column worked for me.
.k-grid-content-locked {
height: 100% !important; // overrides inline style
table {
padding-bottom: 100%;
}
}
Tested in Chrome 75.0.3770.100, IE 11.76517134.0, Android 8 and iOS 12.2
Hope this helps
I have a page with anywhere between 1 and 6 dynamically built iframes containing RadGrids in two columns on the page. I've managed to get a column by the name Document Number to line up in all of them, however if one of them contains more data then the space allowed it will scroll. This is expected and correct.
My issue is when the scrollbar does show it pushes all my columns left just a smidge in that grid, and now it's out of sync with the other grids. I've added a small column which I can dynamically display to push the other grids' columns to match, I just need to be able to detect/determine if a scroll bar is actually being displayed.
I found an old telerik post that suggests I use the scroll height vs the overflow height and if scroll height is larger then we know there's a scroll bar being displayed. My attempts to use the supplied javascript have shown me that the post is outdated and that GridDataDiv no longer exists.
Is there a new/updated way to detect the presence of a scrollbar? Alternatively, is there a better way to have my document number columns even regardless of scrollbar?
Compare the grid's client width and the scroll area width of the grid data:
var grid = document.getElementById("RadGrid1"),
scrollArea = document.getElementById("RadGrid1_GridData");
// ex. 171 (note no units included)
alert("grid.clientHeight: " + grid.clientHeight);
// ex. 300px (note the "px" units are included)
alert("scrollArea.style.height: " + scrollArea.style.height);
// Is the verticle scroll bar visible?
var vertIsVis = scrollArea.style.height.replace("px", "") > grid.clientHeight;