Reduce watches created by ui-grid or alternative grid solutions - javascript

Apologies if this is a repeated question about ui-grid but I could do with being clear on the options for my particular use case. Other similar questions don't conclusively answer my problem.
We are attempting to use ui-grid in a fairly unusual web application where the number of tables on the page is effectively limitless. They get added the more activity the user does. Not ideal but that is what is required.
When using ui-grid, even with a fairly small simple table, it is adding around 1000 watches for each table. And the digest cycle increases significantly with each table being added too. This leads to poor performance when the number of tables increases, as you might expect.
My question is then, is there anything that can be done with ui-grid to reduce these number of watches? i.e. without delving in to the source code to make changes. We are passing our data in to the ui-grid directive using one-time binding notation, but that makes no difference. From looking at other similar questions, it would seem to me that there is nothing else that can be done, which might well imply that ui-grid is not suitable for us.
Alternatively, is there a way within AngularJs to prevent two way binding within a directive? I'm not aware of such a method, but perhaps someone knows a trick to make this happen?!
Finally, can anyone suggest an alternative grid that would be a better fit for our use case? We are trialling ui-grid due to the functionality it provides, such as column selection, cell formatting, ordering, filtering and so on. Are there better performing AngularJS or other JS grids out there that would cover this functionality? Preferably free to use? Others we've considered checking out are Kendo UI, jqxGrid, ag-grid (though perhaps this needs to be paid for).
Any help is massively appreciated.

My company has run into similar issues though not with ui-grid specifically. You've probably already considered this but the fix for us was horizontal and vertical paging. I don't know much about your use case, but we realized that horizontal and vertical scrolling with a huge grid had the same issues you are running into, but it wasn't really any more functional for the user to use a scroll bar than to use page controls to move between blocks of the grid. At most 500 cells would fit on a single screen at a time and it was very easy to lose your place trying to use a scroll bar.
By doing this we're able to use 1 way bindings (probably with bind-once but I would have to dig into the code to be sure). Even with two way binding the same technique should work for you too if it works with your use case.

if you us ag-Grid, there will be no watches. ag-Grid doesn't use Angular at it's core, so doesn't have watches internally.
ag-Grid has two versions, free and enterprise. if you don't need the enterprise features, then use the free versions.

Related

How can I set a a state variable from two UI elements?

So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.

JavaScript Resource Planning Component / Gantt Chart with Editing Capabilities

I'm looking for a JS-based Resource Planning Component, where i have the available resources on the left and the resource load on the right.
So far i only found a few gantt chart implementation, which lack add, move and editing capabilitys. I wounder whether such a component exists.
I don't know of any out of the box solutions, but this is something that could probably be implemented somewhat easily. If you create several divs for rows, and then sub-divs for resources, you could build something like the spec.
First, keep track of all the resources, and the durations, in some kind of a datastructure.
I'd probably use backbone JS's models, since that's what I use for most everything.
Create a render function, that places an array of resources on the page, and lays them out, etc.
Create add/remove functions that add/remove elements, then call the render function to relayout the elements
To add dragging, I'd use jQuery UI Draggable, this makes it fairly easy to drag elements, and includes places for attaching callbacks when elements are dragged, dropped, etc.
This may take some doing, as dragging the duration of the events/resources may not be perfectly straightforward.
There is a quite nice library called DHTMLX Scheduler which also includes a timeline view:
http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml
You can get the free GNU GPL version or a commercial one. A running example can be found here: http://booking.javaplanner.com/
I found http://sourceforge.net/projects/jsrmt/ but it is GPL licensed. I am curious to hear, if you found anything else meanwhile.
I have found lots of js gantt tools, but they all have performance isuues with 1000+ tasks.
This one works best http://www.bryntum.com/products/gantt/, but it's quite expensive.

Grouping/expanding ExtJS Grid with subrows

So here's the case that I'm working on: I have an ExtJS grid of data items that should have collapsible rows of sub-items. That is, most of the data on the grid need not be visible to begin with, but there should be the ability to expand the sub-rows of a "master row" by clicking on some kind of a [+]-icon.
GroupingView doesn't seem to do, as the group row is not a normal data row on the grid. RowExpander is more like it when it comes to having the "grouping rows" as normal rows, but then, I'm not sure how to approach actually having sub-rows in the expanded part of the grid.
I found this so far and it seems like it might have something to do with what I'm after...
http://www.sencha.com/forum/showthread.php?53289-EXTJS-RowExpander
Any pointers of the most reasonable way to approach this, hopefully with ExtJS 2.0.2?
Have a look at the answer I posted to this question
I am not sure if this will work with ExtJS 2.x since I have moved on to 3.x long ago.
(and will strongly suggest anyone who is going anything remotely serious with ExtJS to always upgrade to latest version in a reasonable time frame.
The library is still comparatively new in the sense that the major version releases have too many positive changes and improvements to ignore upgrading)
That said, what you are looking for is indeed Ext.ux.grid.RowExpander
Here is how you approach it -
Example (first example on that page)
Code

Advise me against using <table>!

I'm working on a JavaScript (using HTML as display tech) widget framework for an embedded device where memory consumption is a big deal.
Recently I tried to create a table-layout using only DIVs. But to mimic the colspan and rowspan functionality it became quite complicated, adding extra logic to make it all dynamic.
The result came out quite good layout-wise, but at the cost of too much memory consumption (had to have several JS objects representing each cell and then a DIV as presentation)
Wouldn't it be better to just use the TABLE element instead, getting the col- and rowspans and layout for free? Especially since all markup is crated by the framework and that the user (of the framework) never actually touches the HTML itself.
Or am I missing something here?
well tables are perfectly fine for tabular data if you want to do it right semantically.
And imo, you have to go for the best solution in your situation. Performance is more important than using div's or not in this case i guess.
If you start out with the mentality of "I need a table-layout", it's inevitable that you'll end up deciding that you need to use a <table>, because CSS cannot deliver on the subtleties of colspans and rowspans. But do you need a table-layout? You don't describe the underlying layout requirements, so it's impossible for us to steer you either to or from <table> except in broad generalities.
Go ahead and use a table. One of the main reasons that CSS layouts are encouraged is accessibility (probably you don't care about). Another reason is separating content from layout - you are probably creating both. So, the disadvantages of tables are of very low importance compared to the advantages in your case.

Javascript widget inspired by iPhone UITableView?

Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?
infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.
I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList
Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.
Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)

Categories