I have been trying to find a simple explanation for the difference between a feature and a plugin. They both seem to add some additional functionality to a component, but what is sets them apart? When would you create one or the other?
A feature is a type of plugin that's specific to the grid panels.
Feature Documentation
Both provide extra functionality.
A feature is something that alters the markup of the grid in some way
Grouping
Row body
A plugin fits into any other category.
Related
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.
I've started using SlickGrid and have to implement a kind of functionality where I need to show sub-row inside a parent row of SlickGrid.
Here's the scenario
Here's Asia, Europe is having sub categories in Services Column and these service columns are expandable/collapsible
I'm trying to customize this for first column.
Is any other link/source available to refer to accomplish the feature.
Are you aware of the grouping/aggregates example ?
http://mleibman.github.io/SlickGrid/examples/example-grouping
This offers very similar behaviour, but the exact 'cell-merging' behaviour you show is not currently available in SlickGrid. Slickgrid tends to use tree structures rather than a flat structure. That said, it may not be too hard to hack up, but it seems everyone wants a different visual layout and it becomes very hard to support them all.
If you don't need editing or scrolling, I'd suggest this would work best as an HTML table, or even a PDF.
is there any way to make Gridster.js tile(s) stick, that is not move up vertically to fill empty space. Kind of like the way a layout program with snap-to-grid turned on works...
Use this fork https://github.com/dsmorse/gridster.js with
shift_widgets_up: false
option.
See demo : http://dsmorse.github.io/gridster.js/demos/sticky-postion.html
Have you tried packery? http://packery.metafizzy.co/
This library has many drag and drop features.
You may also be interested in the following prototype from my team: https://github.com/ibmjstart/gridplumb
Specifically, the modifications to grister can be found at https://github.com/ibmjstart/gridplumb/blob/master/src/extend-gridster.js
My answer is not directly linked to gridster but to one of its fork : gridstack. I post this answer as I found this topic while searching for this functionality in gridstack.
So in gridstack solution is to put this property in grid options :
float:true
I wanted to use Slickgrid for the grid functionality in my app but since I am using AngularJS for the most part i thought that ng-grid is the way to go but not sure whether it supports virtual scrolling (I tried to look into their documentation and did not find any thing about virtual scrolling support). It would be great if some one could also enlighten me the pros and cons using ng-grid vs slick grid if possible.
Yes, ng-grid supports row virtualization. You can see in the grid configuration options that there is a setting for virtualizationThreshold that is set to 50 by default.
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.