How to use ng-grid in Hawtio? - angularjs

I believe that ng-grid requires at least AngularJS 1.2.x.
I noticed that there is an ng-grid module in Hawtio. Is it possible to use this ng-grid module in Hawtio's current AngularJS version 1.1.5?
Can someone give an example how to use this? We tried but were getting errors, maybe due to version dependency.

Yeah you can use that, though we used ng-grid in the start with hawtio, but it has some issues (not all data was shown in all browsers etc) and was slow. And we needed a simple grid, so we wrote a simpletable we used instead.
But you should be able to use it,maybe search the source code of hawtio-web and find the few spots left where ng-grid may still be in use.

Related

How to extend angular-material components?

I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/

which is better ng-table or ng-grid?

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!

Integrating Angular with ExtJS

I want to create a popup using angularjs in Extjs Page.This is my current situation.I have manually bootstrapped angular link when they click.now the issue is ext-all.css and bootstrap.css files are conflicting.So How can i avoid this conflict.Can any one suggest idea?any conflict arise in js file if its in same page? Lot of thanks in advance
AngularJS + ExtJS - another question in stackoverflow read this before considering to combine both.
I have tried doing it for my websites for curiosity's sake but it creates more problems then it solves. I would strongly recommend sticking to one framework.
You can combine Jquery and ExtJS without problems because they do not have any conflicting elements.
Your conflict probably arises from the same naming and calling that might or might not exist within the libraries of these two frameworks. The way I see to fix it would be to go within a library and start solving the conflicts. That will be very tedious to say the least.
I wouldn't really mix these frameworks together in a single project. ExtJs is a fully fledged component based framework which should provide most, if not all the functionality that you need. If you are missing something then you should look at the Sencha forums section on user plugins and extensions or even build it yourself.
ExtJs provides most, if not all of the functionality of AngularJs already but adds visual components such as grids, forms, windows, treepanels etc. If your using Ext already for your project you should really stick by it. Adding another framework adds complexity and additional libraries to download, increasing load times etc.

Angular ui.grid paging vs. pagination

I am new to ui.grid and using the tutorial to get a grid with lots of data.
My version is 3.0.0.RC16 which I got from bower install angular-ui-grid
I would like to use paging but get errors.
There are 2 Tutorials regarding paging one called Pagination and one Paging:
http://ui-grid.info/docs/#/tutorial/214_pagination
http://ui-grid.info/docs/#/tutorial/215_paging
Whats the difference between the two?
Module 'ui.grid.paging' does not exist while 'ui.grid.pagination' does. What am I missing?
I want to use the paging example but always get errors
Do I need a special unstable release? how to install it with bower?
Thanks!
UPDATE
Meanwhile I manually downloaded the unstable version of ui-grid and indeed, paging exists only in unstable. I could not find explanations on the web why this is the case, so I assume that its not ready for prod. Nevertheless I would like to understand the difference to Pagination and if there is a bower package to install unstable versions.
UPDATE
meanwhile Paging was removed from the unstable versions. It seems the functionality was completely merged into pagination.
I had to change "paging" into "pagination" in controllers and views and everything seems to work (so far)
https://github.com/angular-ui/ng-grid/pull/2399
I was not the only one confused
I'm not using bower so I cannot help you with this one.
But I can tell you a few words to the difference of 'paging' and 'pagination' in ui-grid:
As far as I know the 'pagination'-module was a first and new development of paging in ui-grid. A few weeks later, someone tried to reimplement the paging from the old grid-version nggrid in the new ui-grid and named it 'paging'.
There are efforts to combine the two. See this issue on github:
http://github.com/angular-ui/ng-grid/issues/2106
Facing rapid changes in ui-grid, github seems to be the best place to get answers to problems with ui-grid. The tutorial is most of the time not up to date.
But the active developers react very fast on incoming issues on github.

Adding a filter header row to ExtJS GridPanel

I know that it's possible to add a filter row UNDER the column title because I've seen it done with Coolite. But since I'm a total newbie with Sencha (ExtJS), I have trouble finding how to do it with the ExtJS.grid.GridPanel directly in the script. Would you point me in the right direction with some samples please ?
If possible, I would like to do so without plugins, but if there's one out there doing great and easy to use, I could change my mind.
Thanks !
Here you have a link to the GridHeaderFilters Plugin. There you have an easy example of how to use it.
And regarding your comment about trying to do this without a plugin I recommend you not to do it. Because this might seem like a easy code to write but I believe it is not. And that is why this plugin has hundreds of lines. I think this is not a plugin full of features that you won't use, this plugin just does the filtering the way you need it.
And as a final note, if you are expecting the exact same behavior as in this coolite example I think you are out of luck. Because if you get the javascript source code of that example and run it through jsbeautifier you will see that this example is not using any ExtJS plugin and is not a easy code as is using a really complex template for the headers.

Resources