I'm stuck trying to make my treepanel scrollable in both ways.
Heres my code: https://fiddle.sencha.com/#fiddle/13cb
I could set scrollable: true in my wrapping panel, but this would not solve the horizontal scrolling problem.
Furthermore with this approach the combobox scroll up too. But I want only the treepanel to scroll horizontally and vertically. How can I achieve that?
Thanks in advance
I am not sure whether we can achieve exactly what you want. But let's try.
To get the vertical scrollbars working, you have to define a height on the treepanel. As of now, the treepanel resizes dynamically to the height of its content, since no height was defined for it. Since even the parent panel has no height defined, giving the height as percent also won't work, but e.g. height:500 would. If you require the layout to float around when the browser window is resized, have a look at the vbox or border layouts for the parent panel.
To get the horizontal scrollbars working, you have to know how grid columns work. You have not defined a columns configuration, which makes the treepanel assume that you want a single column taking up 100% of the width of the treepanel:
if (!me.columns) {
if (me.initialConfig.hideHeaders === undefined) {
me.hideHeaders = true;
}
me.addCls(me.autoWidthCls);
me.columns = [{ // define columns configuration with a single column
xtype : 'treecolumn', // the column should be a treecolumn
text : 'Name',
flex : 1, // and take up 100% of the width of the panel
dataIndex: me.displayField // and use the displayField as
}];
}
You cannot make columns take up the width required by their content automatically. But you could e.g. listen to nodeexpand and nodecollapse events and call column.autoSize().
Related
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.
I have a grid that I want it's width to be always 100 % of the container.
I got his working by setting autowidth: true. Now the problem is that when I hide a column my grid no longer expands to 100% of parent's width.
Here is an example illustrating the issue.
De-comment the line with in the load complete to see both cases.jsfiddle
loadComplete: function(data){
//$(this).hideCol(['number']);
}
This is happening because you're hiding the column after the grid has finished loading, e.g. the total width has already been calculated. If you always want the 'number' column hidden then just add the hidden: true property to it.
Modified fiddle: http://jsfiddle.net/fo3wb58w/
If you want to dynamically hide columns at startup (your question doesn't make this clear) then please take a look at How to adjust the column width of jqgrid AFTER the data is loaded?
I am working with handsontable [JavaScript Spreadsheet
library] and want to toggle settings with a bootstrap-styled-checkbox. The first thing was, to set a specific width and height to the table when the box is checked and to undo this fixed size (so it automatically resizes again) when uncheck the box.
Here is my current code:
$('#mycheckbox').click(function() {
if($('#mycheckbox').prop("checked") == true){
handsontable_table.updateSettings({
width: 725,
height:100
})
}else{
handsontable_table.updateSettings({
// missing :(
//UPDATE:
width: null,
height: null
})
}
});
At first, my handsontable-table is automatically sized to the correct size. When I check the checkbox, the table resizes to the given width and height. But I don't know how to remove this width- and height-settings. I tried to set them to 'false' or 0 or remove these settings with jQuery-.removeProp(), but none of them does what I want. And I can't find something right in the handsontable-docs (or other sites).
I very appreciate your help!
EDIT
I found a solution: You just have to set the width and height to null. See edit above.
But there is something strange going on when I minimize my table and maximize it again - at first, my div below the table slides up to the new bottom of my table, but when it gets big again, the div doesn't move anymore, its overlapping with the table...
However, I still don't know how to remove settings from a handsontable...
As you mentioned in your edit, by updating the value to null it appears to be one way to reset a setting with in Handsontables options. It my experience you do not want to set the height and width to null, but instead update it to a new value.
If you were clearing out a setting like nestedHeaders for example; you would just set the value to null to stop using the nestedHeaders feature. However, that doesn't work for every option.
If you are trying to expand and collapse a handsontable then setting the height and width to null or zero is not going to be the best solution. You should update the parent div to display null using jQuery(handsontable's parent selector).hide() or .show().
I am trying to build a layout for my Sencha Touch 2.4 app.
I want a page with :
a panel
a list of data
another panel
And i want a global scroll. I don't want to get a scroll on the list itself. The list should take all the height it needs to contains all data.
I created a fiddle for that : here it is.
To see my problem, reduce the height of your brower window. All items are not visible anymore.
If you replace flex:1 by height:'400px', you will see what i try to obtain.
I tryed to set this size of the list when the painted event is triggered, with something like this :
listeners: {
painted: function() {
this.setHeight(this.itemsCount*(this.getItemHeight()+3));
}
but getItemHeight return a size that doesn't match the real size of each element.
Is there a clean way to get what i'm trying to achieve ?
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