It almost seems like this is counter to the idea of Slickgrid and I'm not sure if it's possible but I'm going to throw it out there. I need a way to render every row of slickgrid permanently so when I scroll it's not constantly re-rendering things. Unfortunately, autoheight:true as a grid option is not viable as it makes the headers disappear when scrolling, and because it's contained in an iframe (which I can't get rid of, sadly), it makes it impossible to scroll through as well. The only other things I tried which didn't work were forceSyncScrolling and, based on the description, enableCellNavigation:false - just searching through grid options didn't give me any better ideas and I'm not sure where to go from there.
These are the current grid options I'm using:
var options = { // Grid Options
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true,
rowHeight: 19
};
If any other code sounds like it would be helpful to post, let me know - I am just not quite sure where to go with this.
Related
I have a grid in ExtJS 6.0.2 that can be set to auto-refresh (it reloads once every ~10 seconds), but when it does, I want it to stay where it is instead of scrolling to the top each time. We have successfully used preserveScrollOnRefresh to do this with other grids, but for one particular grid, it's not working. In order to try to get it working, I decided to try calling getScrollY() before reloading the store and setScrollY() after, but that didn't work either. When I stepped through with the debugger, for some reason, getScrollY() returned 0 even when I had the grid scrolled all the way to the bottom.
Is there anything else that I can try?
it sounds like this is working for other grids in your app, so without seeing any code I'd suggest that something with that store/grid ecosystem is not configured the same as other grids in your app.
perhaps post a fiddle (fiddle.sencha.com) with an example, that may also help you find your answer if the fiddle works.
I have two sections. Second section has very big height, so i marked it as "normalScrollElements". And i would like to have fullpage.js appearence between this two sections and having default browser scrollbar. Disabling fitToSection made it close, but only default browser scroll is working :(
$('.scroll-sections-wrap').fullpage({
sectionSelector: '.scroll-section',
scrollBar: true,
easing: 'easeInOutCubic',
css3: true,
easingcss3: 'ease-in-out',
scrollingSpeed: 900,
fitToSectionDelay: 500,
responsiveHeight:650,
responsiveWidth:1000,
fitToSection:false,
normalScrollElements: '#second-section-id',
verticalCentered:false,
});
Second section has very big height, so i marked it as "normalScrollElements".
That's not the way you are suppose to use normalScrollElements. Normal scroll elements is for small elements that needs to use their own scroll.
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')
You should be using scrollOverflow:true:
scrollOverflow: (default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin.
I'm trying to control the visibility of the HeaderRow at runtime.
[Note: To clear any confusion: I'm not talking about the row with the column names; I'm talking about the row that's made visible with grid option "showHeaderRow:true"; i.e., what might be better termed the "Filter Row"].
I'm trying to use:
grid.setOptions({ showHeaderRow: true/false });
grid.invalidate();
This seems to have no effect on the grid or the display of the HeaderRow.
Any thoughts on what I'm missing?
this worked for me:
if(grid.getOptions().showHeaderRow){
grid.setHeaderRowVisibility(false);
}else{
grid.setHeaderRowVisibility(true);
}
Yes this one should be simple enough, I use these 2 pieces of code to hide/show dynamically after the grid is already created.grid.hideHeaderRowColumns(); grid.showHeaderRowColumns();
Give it a try, hope it helps...
I'm using SlickGrid version 2.1 at the time of writing, and I have a similar requirement as yours. After digging some depth into the source code, I assume that option showHeaderRow has no effect on the display of the resulting grid unless co-work with the grid.setHeaderRowVisibility(visibility).
Anyway, I managed to work around with simple jquery technique after the grid is created, simply by using the code below, if you don't want any animation:
$(".slick-header").hide();
Although this is an old question asked 2 years ago, and Slick Grid hasn't got any progress for quite some time, I still believe it's quite a useful lib. Hope this complements the thread and be of a little help for the up-coming users.
I'm just starting to use SlickGrid but I've had a lot of success creating a remote model that can interact with the paging plugin. The only problem I have seems to be a browser issue, but I'm curious if anyone knows a trick that may resolve the issue.
I'm retrieving the data page by page in my model via AJAX and updating the grid with the grid.setData() and grid.render() methods.
The problem I would like to solve is that when the length of data changes the vertical scroll bar gets really confused, unless I change the current visibility of the filter panel (grid.hideTopPanel() or grid.showTopPanel()). By confused I mean that the scroll handle in the scroll bar doesn't change size to indicate the different number of rows that are now current, and if the list grows, the scroll handle size jumps all over the place as I scroll up and down.
I'm assuming the "fix" works because it forces the browser to recalculate the view port height, but is there any way to force that to happen? Or is there a better way to do what I'm trying to do?
Ok mleibman straightened me out, what I actually was looking for was grid.updateRowCount(). I believe he will be adding a call to this in grid.setData(), but for now just make sure the 2 method calls are used together.
Have you tried grid.invalidate() ? Im my experience that forces the grid to recalculate pretty much everything. It may be more heavy-handed than you need but at least you can see if a complete invalidate solves the problem.
I figured it out. You need to call grid.resizeCanvas() after calling grid.setData(). It seems like this should be part of the grid.setData() method because a call to it will change the number of rows. But anyway, that's what you need to do.
I want to persist the user's location in the document he or she is browsing, then bring them back to that spot when they return from tombstoning or between sessions.
My first approach was to wrap the browser component in a scrollviewer, but it turns out it handles its own scrolling and the scrollviewer never changes its verticaloffset.
My guess is that the browser component must have a scrollviewer or something like it embedded in it. I need to get the verticaloffset and scroll to an offset.
Any guesses how to get there?
My next approach would be a painful mish-mash of javascript and c# to figure out where they are...
Because of the way the WebBrowser control is built you'll need to track scrolling in Javascript then pass the location to managed code to handle storage of that value.
On resuming you'll need to have the managed code pass the scroll position to a Javascript function to reset the scroll position.
That's the theory but I haven't looked at the funcitonality around javascript scrolling events in the WebBrowser yet. That's the only place I can see possible problems.
Would be good to hear how you get on.
I've accepted Matt's answer, but I want to put in some details here. I'm also going to blog about how I did it once I'm completely done.
Since the WebBrowser component is essentially a black-box, you don't have as much control as I would like. Having said that, it is possible to get and set the vertical offset.
Javascript lets you ask for the value, but different browsers use different variations on HOW to ask. For THIS case I only have one browser to worry about.
First I make a couple of simple javascript functions:
function getVerticalOffset() {
return document.body.scrollTop;
}
function setVerticalOffset(offset) {
document.body.scrollTop = offset;
}
Next I call into the WebBrowser using the InvokeScript method on the browser object.
I'll post an update here with a link to my blog when I get the full write-up done.
I have been writing an eBook reader and had a similar question. Code for setting a scroll position has been easy enough to find.
Code for setting vertical scroll position:
string script = string.Format("window.scrollBy(0,{0});", "put your numeric value here");
wb_view.InvokeScript("eval", script);
Google didn't help much in finding solution for getting the value of current scroll position. Lacking any knowledge in javascript it took me almost two hours to get it right.
Code for getting the vertical scroll position:
var vScroll = wb_view.InvokeScript("eval",
"var vscroll = window.pageYOffset; vscroll.toString();");