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;
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 Bootstrap 3.3.7 page with a navbar component along the top of the page. It all works perfectly when populated with static data, but when I'm trying to populate the menu with new drop down lists based on some ajax loads from the server the menu line wraps even though there is loads of horizontal space.
I assume it is setting some fixed width based on the initial menu, and then failing to cope with the dynamic widening. If I manually narrow the page the point the nav collapses, and then widen it again then the reflow catches up and it all ends up back on one line.
Is there any way to force the Bootstrap nav to reflow programatically?
The specific element I need to make wider is ".navbar-right", and if I hand code CSS to make it wider after the dynamic addition then this works, but I'd rather not hard-code arbitrary constants into the code given that the menus are not constant and the font may change.
Answering my own question (although would appreciate any better alternatives if anyone knows any) - this seems to work OK.
// Perform the dynamic update
var htmlOutput = $.render.mytemplate(params);
$("#mynavtemplate").replaceWith(htmlOutput);
// Measure the total width of the children of .navbar-right
var newWidth = 0;
$(".navbar-right").children().each(function(){ newWidth += $(this).width(); });
// Force .navbar-right to be at least as wide as the sum of children
$(".navbar-right").css("min-width", newWidth);
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'm working with Slickgrid to display a large data set which may be used with anywhere from a few to 50 columns. I need the ability for users to reorder the columns as they wish, which I am currently able to do but with some inconvenience. If I happen to be grabbing the very last column and moving it to the front of a grid with several horizontal window widths of columns, I have to drag/drop and manually scroll left before I get the column positioned where I want it.
Does anyone know if there's a way to force the grid to automatically scroll horizontally based on where I'm trying to drag a column (i.e. when I attempt to drag the column outside the current grid viewport)?
Find mouse pointer position where you want to scroll and apply scrolling by this method...
$('#myGrid').mousemove(function(e){ //#myGrid is id of div of grid container
var parentOffset = $(this).offset();
diffX = ( ( parentOffset.left + $('#myGrid').width() ) - e.pageX);
if (diffX < 59 && diffX > 17){ //change the minimum and maximum area where you want to scroll. mine requirement is 59 and 17. You can find your custom position by some alerting or console.log
$('.slick-viewport ').scrollLeft($('.slick-viewport ').scrollLeft() + 5);
}
});
I ended up solving this problem by creating a sortable list of the grid's column names outside of the grid. When the order of the column names changes, the columns displayed on the grid resets based on the new order by calling the function grid.setColumns().
I am building a wordpress template, and I use a little Javascript to make the 'content' element fill the page from top to bottom. The goal is to cover the background image, so the 'content' doesn't look cut above the edge on larger screens. The code is:
$(document).ready(function() {
var h = Math.max($(window).height()+50, $("#content").height());
$("#content").height(h);
});
$(window).resize(function() {
var h = Math.max($(window).height()+50, $("#content").height());
$("#content").height(h);
});
My layout is: fixed sidebar on the left, then content with auto-width and two floated columns inside. It generally works, however on pages where I have a nivo-slider in one of the columns, the document height is determined incorrectly. When the screen size is small, the other column lands underneath (#media statement) and I can't scroll the screen to see that column.
See example page here: http://figtreephotodesign.com/kidsandfamilies/about/ - and set your browser window below 860px-wide to see the problem.
On another page: http://figtreephotodesign.com/kidsandfamilies/contact/ - it works (there is no nivo-slider).
Is it the nivo-slider's css messing up?