I have been looking for a Javascript based datagrid to use for Mobile websites/applications with no luck. I have tried jqGrid, which seemed to work fine except for the lack of kinetic scrolling. I know jqGrid does now have a (beta) mobile version, but unfortunately is is built upon jquery mobile, and I am using a different framework (which spat the dummy when I included the jqquery mobile scripts)
So, my question is, does anyone know of a Javascript grid that does support Kinetic scrolling (or know how to apply this to an existing grid)?
Would need this to not be reliant on any other UI framework (such as jquery mobile - nothing against this, I just happen to be using another one and it didn't seem to want to coexist)
If it supported knockout type of binding then even better!!! (I know this is expecting too much).
Any pointers would be greatly appreciated.
Thanks in advance for any info!
Kinetic scrolling is a built-in feature in Webix DataTable http://webix.com/widget/datatable.
The grid control processes all touch events without a hitch. It runs scrolling touch events especially well http://webix.com/blog/datatable-1000-columns-and-more/.
I know this is a really old question, but I just wanted to leave a note here as well if someone ends up here using the search.
You should check out , which is a top-notch Javascript grid component, and has kinetic scrolling on touch devices. It’s part of Vaadin Components: http://www.vaadin.com/components
Related
I'm developing a website for someone who requested a dynamic sliding page when you scroll (i.e. like this). At first I was thinking it was something I could use CSS transitions for, but then I realized there might be a JS tool out there which could make it work.
I discovered this page of dynamic movement examples with an associated library on github, but I'm not quite sure how to make it work. Basically, I'd like the page to listen for the event of a scroll, and then slide up a section of the page in the same way as the example above. When looking through the code for the dynamic movement examples, it seems like it's a a bunch of cases in the JS file that get used somehow in the event of a button press.
Please, if anyone is familiar with building something like this, please let me know how it might be done.
I would encourage you to make use of fullPage.js.
It is nowadays the most popular library for single scrolling pages. It has plenty of options, methods and callbacks and you can almost do whatever you think of with it.
Compatible with old browsers, kinetic scrolling (Apple laptops) and touch devices.
I'm currently trying to create a usable HTML/CSS/JS based dashboard that behaves reasonably well on an iPad. The Dashboard will contain several widgets with mainly charts. I started using gridster and it works well on an iPad (the only one i found, the rest are either based on gridster[2], don't support an iPad or to overweight / slow [3]).
However, when the widget content is more complex (e.g. a chart), everything behaves really slow. I'm currently trying to reconfigure gridster to not render the content when dragging, or for another widget solution that behaves fluently on the iPad, even when more complex content is dragged. Any suggestions?
A related point: Would CSS3 transitions a way to optimize this, because as I understand them, they are hardware supported and don't rely on JavaScript for rendering? Or are they not suited for small, real-time movements that are calculated on the fly.
We didn't find anything that worked better than gridster and was faster. So we made gridster "faster" by basically hiding the widget content while dragging, this performs better on iPad and older devices.
Hello I have implemented Dropkick.js on to my site and now have some very very good looking select elements. However when I look at it on a iOS system I am not able to scroll down my options.
I have read the documentation of Dropkick.js and it suggests that I try and use scrollability.js however I cannot for the live of work out to make this work.
Does anyone have any experience of using this and dropkick.js - or does anyone have any suggestions to alternatives?
I have never used DropKick.js and scrollability.js together, but I can tell you from experience that DropKick doesn't have native mobile support since it was built for desktop browsers and not phones.
Since mobile phone browsers usually have their own handler for the tag, a lot of JavaScript plugins don't have proper support for phones because their code actively removes and replaces it with a of their own design or doesn't even use tags in the first place.
If you're looking to make your site work on both iOS/mobile browsers and Desktops, I recommend using SelectBox.js from A Beautiful Site.net even though it's a little bit more difficult to style than DropKick.js.
If you're looking for a purely mobile solution, I would recommend just using pure CSS to style your as seen HERE since it's simpler, quicker, and leaves tags in place.
Hope this helps!
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
My team is in the process of prototyping an application with a rather complex UI. One common feature of the application is a number of tools which pop up above the main app and allow users to perform some complex operations.
Currently a consultant has wrote some custom code that displays the dialog and blocks the background UI. It works fairly well however we have hit bugs which have taken time to fix. Since we have had some down time we have investigated "better" ways of achieving our desired functionality. I have investigated Jquery UI and was able to establish the same functionality in about an hour. One issue I have had with Jquery UI is constraining tabbing to the dialog box displayed in IE. In IE the the tab index jumps to the background UI and I believe this issue is recognized in Jquery UI. http://bugs.jqueryui.com/ticket/3768
I was able to find a small plugin that fixed this issue for IE, however it broke the tab constraining in Firefox. I was able to make this work by putting a conditional IE check in my JS and only applying the plugin when the browser is IE. Under our current approach we do not handle tab constraining, however our consultant believes we can easily accomplish this.
My question is, which is the better approach, create our own custom solution or use Jquery UI + the plugin + the hack? When are IE hacks acceptable?
I'd go with jQuery UI because at least they'll maintain the library for you, and perhaps eventually release a fix for the issue you're talking about, and then you can remove the hack. Sometimes hacks are necessary. It beats having to maintain an unthoroughly tested custom library.
Writing a framework from scratch is always more difficult and time consuming than hoped because you will run into many issues that you simply cannot account for ahead of time.
That said, I would suggest creating a custom facade over the Jquery UI + the plug in + the hack. This would give you consistent API that meets your project's needs, the use of an established and well-maintained framework and hide some of the peculiarities between browsers. (IE hacks are unavoidable.)