For a while now, I've been looking for a Tree Grid that works nicely with AngularJS and haven't had a lot of luck.
My requirements are:
Easy to use
Looks good
Supports drag and drop
Can handle large amount of data 10000+ (i.e pagination/lazy scroll of 10,000+ rows)
Can show hierarchical data in a table (i.e columns/sorting)
Free/Cheap
Projects that come close:
Sencha Tree Grid
Doesn't appear to play nicely with AngularJS
Apparently a Buffered-Tree module can help handle 1000s or rows
angular-ui-tree
Close but doesn't support table functions like columns, out of the box
Doesn't handle large data, but Michael Bromley's dirPaginate directive can fix this
tree-grid-directive
Looks good (Fits with bootstrap)
Has columns
But doesn't easily allow for pagination/lazy loading
Ok... so given that other people must have solved this before, my question is:
What is the best way to approach this?
Is there a project out there already that covers all the bases?
Or perhaps there is a simple way to adapt one of these to be a lazily-loaded tree grid...
I know its a two months old question, but I needed the same thing and just came across this grid Adapt-Strap.
I used it some small examples and worked fine so far, seems really easy to use, has drag-drop/pagination/lazy loading.
I think its worth a try, and fyi: I have no connection what so ever with the developers there.
IgniteUI Tree Grid (not to be confused with the ugly Hierarchical Grid)
Whilst not perfect, this seems like a reasonable option.
Pros
Looks nice enough
Has a few plugins for sorting, filtering, paging, pinning etc.
Lazy loading of children can be integrated by listening to expand events (and possibly the InfragisticsLoader)
Cons
No out-of-the-box AngularJS integration
No "Infinite Scroll" out-of-the-box
Its also pretty simple to use:
$("#treegrid").igTreeGrid({
width: "100%",
dataSource: data,
primaryKey: "employeeID",
columns: [
{ headerText: "Employee ID", key: "employeeID", dataType: "number" },
{ headerText: "Name", key: "name", dataType: "string" }
]
});
I have created a sample jsFiddle here: http://jsfiddle.net/immersion/qggbs0s6/
My Suggestion would be Angular UI-Grid. In its current version, there are many configuration options, also for Trees:
Website: http://ui-grid.info/
Expandable Grid: http://ui-grid.info/docs/#/tutorial/216_expandable_grid
Angular Tree Grid seems like a nice option if you want to be able to edit nodes.
As of version 2.7, it does not support drag & drop reordering, sadly.
Demo: https://angular-tree-grid.stackblitz.io/add_edit_delete
Use JS Tree
http://ezraroi.github.io/ngJsTree/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
Lazy Load in JSTree :http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/
Related
I am new to decision table so please forgive me if I asked a very basic question. I am working on an angular web app that uses decision table.
Could we change the table header 'Output' to something else?
Unfortunately, I cannot find any such label neither in the HTML nor in the controller.
For future reference:
It cannot be done through CSS. therefore following is my solution.
Inspect the code that either the dmn table is using modeling module or some other bpmn table features. In my case, it is using modeling. I override the following module by inheriting from it, to make the Input header cell dynamic and output fixed or change the label as well.
https://github.com/bpmn-io/dmn-js/blob/31803afe1bdccdc350da73293a75e2cbf3f14932/lib/table/features/modeling/Modeling.js
I am trying to make each value in one of the column of table as clickable so that I can develop drill down functionality using Zeppelin Table. But following sample code is not working at all.
print(s"""%table
a\tb\n%html <button>x</button>1\t2\n%html <button>y</button>3\t4
""")
It will take quite some effort to make this work.
The basic idea is converting a data source (e.g. Spark DataFrame) to a complete and self contained HTML section and which is interpreted by Zeppelin. Hide and show need to be handled by javascript library.
Zeppelin using Bootstrap, so we shall use bootstrap library directly. This SO might help Bootstrap cllapse. Perhaps need more styling.
If you are just wanna drilldown function while not strictly with table. And if you are using Spark, it might be a bit easy with spark-highcharts to implement the feature like Highcharts column drill down
Finally my code worked. The issue seems to be if you have html tag in the first column, it will not work. However, it works in all the other columns. Just add one more cols in the front and it worked.
print(s"""%table
dummy\ta\tb\np1\t%html <button>x</button>1\t2\np1\t%html <button>y</button>3\t4
""")
What would be the best approach to import XLSX data to be displayed using an AngularJS ui-grid?
Is the js-xlsx parser a good choice for this, or are there other open source XLSX parser tools better suited for this task? In my case the XLSX data is very basic, nothing complicated, but I would like to preserve the style info as much as possible. I anticipate the the data grid will be less than 20 col x 1000 rows.
Or would it be better to use an alternative data grid, such as the Hansontable, instead of ui-grid? Would that be better suited for spreadsheet data?
Importing data into the grid with js-xlsx should work fine. I've been able to get it working with my simple Open Office files so I would imagine you will be mostly OK.
Style info is another question, though. If you're wanting to maintain cell-specific backgrounds and such that could be more difficult. Can you share your specific use case that you want to handle?
For others who might be interested: once you've read a file into your browser and turned it into a workbook you can use XLSX.utils.sheet_to_json() to easily dump the spreadsheet contents into a structure you can pass into your grid. If you pass { header: 1 } as an argument to that function it will return a simple array-of-arrays of the data. The first element in the array will be your header row if you have one. You can use that to create your column definitions.
If you want to see a working plunker check this one out: http://plnkr.co/edit/rYC3nd7undqJz2mr8Old?p=preview
And if you want a more in-depth tutorial I have this post explaining SheetJS and the contents of the plunker: http://brianhann.com/easily-import-spreadsheets-into-ui-grid/
I'm trying to create a content type that allows me to post multiple images from an external database in this sort of style: http://www.newageman.co.uk/14-time-travelling-celebrities
In an ideal world this is what I would like my group of fields to look like in the article creation screen.
http://oi57.tinypic.com/wi0z8i.jpg
Any idea how I would achieve this using best practices? To post articles like this I'm currently using a piece of php code but it's confusing for my contributors, so would like to use fields. I've never made a module or custom field before.
Thank you!
I have done something similar using the Field Group module, you may give it a try.
I'm currently thinking of a new pet project, an "editor" for MIDI-enabled synths. I've got the MIDI side covered, I suppose, but what I'm looking for right now is something that can pass for nice "dials" and "knobs" like you see in Ableton Live, Reason, Reaktor, and so forth.
Putting my form full of trackbars, is sort of wasteful, y'know?
So, what is a nice affordable .NET 2.0 library that has that sort of graphical components?
1- http://www.codeproject.com/KB/cs/industrial_controls.aspx has some related controls (C#)
2- http://www.c-sharpcorner.com/UploadFile/desaijm/KnobControlusingWindowsForms11182005004925AM/KnobControlusingWindowsForms.aspx is another C# based Knob Control
Used the (2) personally on one project and it worked great (though not visually very strong). (1) looks cooler but havn't explored
Check out some of these. If none just do search for ".net gauges". Most of the major UI control libraries have a gauge or dashboard library.
http://www.perpetuumsoft.com/Product.aspx?lang=en&pid=44
http://www.brothersoft.com/software_developer/microsoft_.net/.net_dashboard_suite_56186.html
http://www.componentone.com/SuperProducts/GaugesSilverlight/
http://www.dundas.com/
I've never used this myself, but found KineticaRT controls. $67.06.
(source: eclipse.co.uk)
GMSI.Net Knob v2.0. $169.00.
alt text http://www.globalmajic.com/mc_images/product/thumbnail/net_knob150.jpg