Lock SlickGrid until the last "asyncPostRender" working out - javascript

I want to lock (put semitransparent grey div on top of grid) grid until the last "asyncPostRender" is working out.
I have "asyncPostRender" that creates a complex markup in a grid cell. Markup creates one by onether from top to bottom cells. I want to block any interactions with not rendered cells until all is rendered.
How to do it? Or how to restate the problem?

Don't hack around the intended use of this functionality.
The "async post renderers" in SlickGrid are a mechanism to add optional background decoration to cells so that the core performance and responsiveness of the grid/UI is not affected. Think of it as stuff that is "nice to have". Keep in mind that every time you scroll the rows are being removed from the DOM and recreated as the leave or enter the viewport. By doing what you are describing you would block the UI every time the user scrolls.

Related

Unable to scroll the grid until the end of the records

I implemented a grid having behind a store with millions of records, for example 2.500.000.
The problem is that i am not able to scroll beyond the row 1597829.
If i change the theme from Gray to Triton, the last record is 1016800.
Below is my fiddle example:
https://fiddle.sencha.com/#view/editor&fiddle/2pnu
I think what you're running into is the natural element height limits of the browser. In 6.7.0, a virtual scroller was introduced, however it's not integrated into any of the components in classic, only modern. The reason why you see different results between themes is due to the row size. The smaller the rows, the more content you can fit before reaching the limit.

Variable column page

Alright here is my dilemma. I have a bunch of divs with the same width
(but variable heights). I want them to be displayed on the page one on top of the next UNTIL the bottom of the page, if there is space for a second column of these items on the page without scrolling then I want it to continue in the second column, third column, etc. If there is no available space left on the page then it goes off the page requiring a scrollbar to see things underneath.
This would essentially be akin to having float:top if it existed (which it sadly doesn't). Also I want this to change dynamically with the window size. If I shrink my window to one column width I want the data to go straight down one column. If I resize to two columns wide then it divides the data between the two columns.
Lastly the order of the divs MUST be preserved. I am willing to use jQuery and CSS including CSS3 to do this, anything else and I will have to look at it. I am sure that if I worked at it I could write some custom jQuery script to do this but I can't help but feel like it should be easier. I have looked at css3 columns but couldn't get them to do what I want so if they can do it the be specific as to how they do it.
Have you heard of media queries? At specific break points you can apply different CSS rules, so you could change the layout of your columns.
Have a read.

Split Ajax animation

I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.
I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.
Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.

vertically scrolling html list

I have a long HTML list of say, 30 items. I would like to display this list in a vertical space that is only tall enough to accommodate about 5 of them. The list should automatically scroll vertically through the items (like a news ticker), but there are button to pause the scrolling and move to the next or previous items in the list. When the scrolling has reached the end of the list, it should restart at the beginning.
I'm looking for a jQuery plugin recommendation that can provide this functionality. I have a couple of other requirements, which are not absolutely necessary, but very desirable:
can accommodate list items of different heights
does not depend on jQuery-UI
The entire list will be loaded when the page is displayed, so I don't need to be able to load the list items via AJAX.
Have you seen this:
http://buildinternet.com/2011/02/totem-a-vertical-ticker-jquery-plugin/
I used it recently and it worked great. Seems to meet your requirements.
try this, it's a simplest solution without using additional jQuery plugin: http://jsfiddle.net/shershen08/5q3Bv/4/

Large contents within container size

I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.

Categories

Resources