I'm trying to implement a Timeline View (more specifically, a schedule) which looks like this:
http://img52.imageshack.us/img52/5369/schedulek.png
I tried implementing it with nested ListViews, where the the main ListView is Vertical and its child ListViews are the horizontal programs.
Navigating left or right the view updates the ContentX of each child (Not sure its very efficient..)
Navigating up or down should get the coordinates of the current position of the highlight in the list and highlight the appropriate item in the ListView below (or above)..
I'm not sure if this solution is efficient enough..
if you see a better way implementing this please comment..
Thanks
Initially I'd think of a Flickable (with horizontal only) plus a Column of ListViews. Keep the nested ListViews static and only use the Flickable for scrolling.
Related
I have a list of items and I'm adding additional items to the top of this list with a button.
I want the items already in the lift to smoothly animate down to accomodate the new items.
I'm using AnimateSharedLayout and I have it working fine if it's a simple list with no custom components as can be seen in this sandbox.
However, I would like to use a custom component as the item added to the list. As can be seen in this example, this breaks the smooth layout transition.
I've tried multiple solutions of this, including converting my custom component to a motion component using motion(Item) but I can't get the desired behaviour to work.
It seems like this functionality should be possible. What am I doing wrong?
Many thanks, Ben.
I've realised that this was an issue with me declaring my Item component inside my App component. After moving it outside the main App component all works as expected.
I have a table with thousands upon thousands of rows with 4 cells in each.
https://streamable.com/pywk9
You can see above my table is very big (no idea if its showing very well the laggy scrolling).
I understand this is because the browser has to actually render everything and with large datasets it could take time.
Is there a way WITHOUT pagination to make it more bearable?
Perhaps some way to render content ONLY shown in browsers view like a certain angularJS component (without needing angularjs)
A table that size is useful to nobody, you say you don't want to paginate but why? Pagination is a usability feature for a reason. Just implement pagination and searching. A grid with more than a few thousand rows is not going to be useful to anyone.
If you really need to have the table that big and scrollable then the technique used is to remove the item that are not in view out of the DOM. As you scroll you create DOM objects for the items as they come into view and remove them as they move out of view. This way there are not thousands of DOM objects the browser has to deal with.
I would like to create a "FlipView" of ListViews in Windows8 using JS and HTML. That is, I would like a control that would display a ListView and when the user swips or scrolls, it would display the contents of a different ListView. Is this possible? If so, how? Thanks for helping a Windows8 noob!
My attempt to put a listview under flipview, was not successful. css classes used by both controls overlap (e.g. win-item). I found that items in the nested list view occupied the whole available space like flip view item. This behavior was happening because the win-container hosting the nested list view item, was sized like that. I could not set its (win-container) size explicitly to smaller size even after overriding it in css file.
It does not look like that list view will work nested under a flip view for css/html. If any one else has had success with this, do share your comments and code.
if anyone had tried it in c# using FlipView and nested GridView/ListView and had success, do mark a answer with code (will be interesting to know).
I am tasked with implementing d-pad navigation for an existing web application for GoogleTV (and I'm testing in Google Chrome, and so far they seem to operate similarly. In their notes for implementing d-pad navigation they have basic handlers for up, right, left, down and select.
At present I have a scheme to initialize a virtual cursor, and then for the various dpad strokes. I rely on using document.elementFromPoint() and looping through until I find a new element that was not previously selected. I'm using outline: css to indicate current position and I only show it when one of the dpad controls has been selected.
I have a step on initialization which adds the class dpadClickable to all the items which are clickable, and then as the cursor moves I have dpadHighlighted added to the new one and removed from all other elements. It looks right.
This all fails if I have an element which is scrollable, or if the orientation is such that moving my point downward finds nothing.
What I would like is a data structure to keep all my dpadClickable items in, and then on d-pad clicks, be able to iterate it to find the best closest top, down, left, and right elements. Like, should I do it based on the top and left properties? Or based on a calculated center point?
I found a jQuery library which sort of implements this, and am reverse-engineering it to some extent. But what I'd really like is a primer on this class of programming problem: should I be looking for graphics programming algorithms? games? Something else?
UPDATE: Question over on the User Experience StackExchange site: Adding D-pad navigation to an existing web application: Resources?
Have you looked at http://code.google.com/tv/web/lib/ where the official Google TV Java Script extensions / libraries are? They might help you with this.
I am making a web-based logviewer using extjs.
I would like new log-lines to be added to the bottom of my gridview as it saves cpu by not requiring a sort to move it to the top of the grid (plus its how my coworkers prefer it).
My problem is that ideally the grid would scroll to the bottom after a new row is added.
I have been looking through the documentation and I cannot figure out how to do this. I just see a method to scroll to the top.
Any ideas?
Thanks!
Use GridView's focusRow method, e.g.:
myGrid.getView().focusRow(20);
If you don't already have the row index you'll have to retrieve it using one of GridView's related methods for finding a row.