I started using ng-grid, and honestly seems it's not easy to tame that beast. I'm having various problems and this is one of them. I'm using ui-router and before ng-grid I was using my own implementation based on ng-repeat and haven't encountered this, so I'm assuming somehow ng-grid is responsible.
So I have a few tabs and ui-view with a grid underneath. Everytime you switch a tab, controller initiates a request and fetches data for the grid. Very first time when you open the app, everything seems to be fine, but whenever you switch to a different tab, for a few milliseconds it shows ugly, unbound content.
I tried to hide grid with ng-if, ng-hide and ng-show - (data.length <= 0), but that didn't work. I tried to place a few $timeout functions, that didn't help either.
Any ideas how to fix that?
UPD: first time when I posted this question I thought what if I make the grid transparent and then change opacity after it gets the data. So it kinda did the trick.
jQuery.animate({opacity:1})
and then I deleted the question, but soon I realized this is not very good way to solve the problem - not very anguleresque. Question remains open.
UPD: Had to abandon ng-grid and currently looking for something better. ng-grid in its current state is horrible. It's painfully slow, full of strange bugs and pretty much useless. Version 3 if far from being ready, and current version is abandoned. Very, very sad.
Actually after using ng-grid for awhile, I have to admit - it's really, really bad. Anyone who values own time and nerves should stay away from it. In its current state project is completely broken, have tons of bugs and authors won't even accept any tickets. They all working hard on a new version and honestly God knows when they ship it. So, for your own sake DON'T use it! I mean I believe in this product and that team. After all those guys gave us awesome ui-router and amazing angular-ui directives. Check the date, who knows maybe this answer already is obsolte and by the time you run across this post all the problems in ng-grid are already solved. But simple fact still remains - the product was so bad, they even decided to rename it.
For now I switched to ux-angularjs-datagrid. It may not be a complete grid solution and doesn't have a cool name and many features you're gonna have to build yourself, but it's amazingly fast and responsive.
Related
The Codename One tensile scrolling is a lot worse than the native scrolling in IOS. It does not feel right - not anywhere like the IOS "rubberband" effect.
And it is buggy, too. And apparently those bugs don't get priority over the years.
I feel it is high time to fix this - do You agree?
See #2121 Native Scrolling Container
Here is the source, feel free to submit a pull request: http://github.com/codenameone/CodenameOne/
I'm suggesting this because in one of your latest issues it was clear you don't understand the mechanics involved. Explaining why your request doesn't make sense will be the equivalent of showing you the entire source code of Codename One so consider that as an explanation...
The issues you filed in the issue tracker don't help. They are complaints not issues as only some have test cases and in those cases they refer to things that aren't as common e.g.: X scrolling with snap to grid.
About priorities that's simple. We work for the people who pay our salaries: the enterprise account users. None of them complained about the current state of the tensile drag. We have limited time and resources and we have a lot of issues/requirements and priorities. If it bothers you, fix it.
As mentioned on the title, Iv'e just finished making a static website, using - CSS/JQUERY/SLICK/JQUERY/BOOTSTRAP.
And I have no idea what to do or where to start in order to make it responsive, tried google but still feeling confused not sure about where to start...
As for now minimizing the page seems to do nothing but cutting the area been minimized.
Changing the view to phone-view on chrome devtool causing the website to look the same, just extremely small which means you can't really read text or anything without zooming in.
any ideas or guidelines of how to start?... feeling lost which is weird cuz am feeling pretty comfortable with the method mentioned above.
Thanks alot for reading!
Thinking the mobile site after doing the standard one is not a good idea. But you are already at the end of that road and there is no going back now.
Responsiveness mostly works on the CSS side. You cambine media queries to specify which CSS should be used for each screen size, but it also has to do with your content structure. As mentioned in the comments, using rows and columns when designing your site helps doing the mobile site a lot.
I suggest you start reading this if you haven't: http://www.w3schools.com/css/css_rwd_intro.asp
And go through each section under the Responsive Web Design section. It should give you a good introduction to help you get started.
I want the table that I show on the client side to be more responsive. Like when I use "ng-table", when viewed on any other device than PC or laptop it seems to be responsive to a limited extent. So should I switch to "ng-grid"?
Difference for Better Choice
ng-grid
ng-table
Both are good, but implemented differently. Either you pick will probably be more based on personal preference than anything else.
ng-grid is based on SlickGrid which is a pretty high performant data grid, ng-grid is purely Angular. It is highly customiz-able and gets the job done.
ng-table because it is a simpler version of ng-grid and uses tables. It is a very nice little library that allows you to get up and running quickly. It is exactly what you need when you have to render a simple table with Angular.
Happy Helping!
I have a web app that is built aimed primarily at iPads on full screen mode. I've got to implement a select-able grid/matrix that has two levels of selections - one main item selection and one sub item selection. It looks something like this from our design:
First picture has main item selection, and
The application is built on AngularJS, and Bootstrap3. Right now we have implemented a working version of the grid using a custom jQuery plugin we authored and now are wondering why we ever did it. The code is buggy and constantly throws up new bugs. We are looking for an alternative form of implementation, hopefully a pure AngularJS one.
The criteria we're looking for are:
1. Responsiveness across devices - iPad/desktop
2. Stable DOM structure compatible with filtering (search bar at the top needs to work - not shown in figures).
3. Quick rendering from dynamically changing AJAX data.
4. Touch friendly
What are the best methods/ng-modules to implement something like this? We are on the verge of deciding to write a custom module, but don't wanna reinvent the wheel!
We did see ng-grid, but it still seems to be in Beta. We need a stable module.
SmartTable seems to be the most decent option as of now.
TIA!
Have you Tried Angular Material Gridlist I think it must something more clean. I frequently use it rather than bootstrap. Hope it helps
Take a look at Angular Grid. I know it works on iPad, the scrolling uses touch gestures. It performs very well in comparison to other AngularJS grids. I've used it with large grids on iPads and Androids.
Go for Ionic Framework in conjuction with angular-material.
Both have you covered in terms of UI elements and grid needs, and are very reliable. Both are very active frameworks.
They both reached v1 very recently.
You should seriously consider the time you're going to gain, even if at first you have to drop Bootstrap. I was anxious as well to drop ui-bootstrap, but really, you won't regret it (and you'll be wondering why you didn't do it before).
Docs are impeccable, Codepens and Plunkrs are all over the place, Blog posts abound...
Learning curve is... well... judge for yourself.
I've made a stripped down fiddle, and you'll have to interact with the map to see the issue:
JSFiddle Link
You'll notice, or at least I hope you will, that if you make a quick drag, the map seems to flash completely gray for an instant. It does not happen every time, so you may have to quickly drag several times to see this. Furthermore, it seems to happen more frequently at lower zoom levels.
This is after the tiles have been cached, so it's not google maps fetching the tiles that causes this. Furthermore, I've tested the behavior on a standard google maps example and it does not cause this flicker. I think it may have something to do with $scope.$apply() being called from the directive and forcing a repaint, because I notice sometimes that the flicker happens while google is loading the tiles, i.e. the two events happen independently of one another.
While my last resort is to dig into the directive, this seems like a pretty fundamental problem from a UX standpoint, and I suspect that some of you must have run into this issue. Perhaps most importantly, the example at
http://angular-ui.github.io/angular-google-maps/#!/demo does not suffer from this issue, though they have set a minimum zoom level, and so I wonder if this is simply a cheap fix for the issue I'm describing.
Thank you for any help you can offer, I've been tearing my app apart at the seams all day trying to pinpoint what's happening, and any advice would be greatly appreciated.
why does stack overflow require a code-line for a jsfiddle link? seems totally contrary to the point of making a fiddle...