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?
Related
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 was maybe sloppy while searching the HOT documentation, but I haven't found any way to define how the overflow text inside a cell should be displayed.
Is there any way to display the text over the cell width if next cells are empty?
Another thing I also did not found using the documentation is an option to retain column widths and height while pasting copied content. Currently width and height are not copied.
One solution is using the wordWrap option. From the documentation:
wordWrap (Boolean)
When set to true, the text of the cell content is wrapped if it does not fit in the fixed column width.
Since:
0.11.0
Default Value:
true
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().
I have an issue when I'm clicking first time to column's span-resizer --> column width returns to some default calculated value. The same thing appears when I'm trying to resize it: it resizes not from current width, but from that calculated!
This shows my table after page load: columns' width are good.
screenshot after page load
But after clicking to resize State column --> it's just returns to some value (in that case
screenshot after click on column resize
How can I fix this issue?
P.S. Sorry, I have no enough rep to add images.
jqGrid hold column header and the column data in separate dives. So jqGrid have to hold scroll position of the header div (hDiv) the same as the scroll position of the div with the grid body (bDiv). I think that jqGrid have a bug in your situation. As the workaround you can use resizeStop where one set the scroll position of hDiv to the current scroll position of bDiv:
resizeStop: function () {
this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;
}
I think that it should solve the problem.
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;