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.
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 have to include a UI Grid in my application and have a choice between Kendo UI Grid Control or the Angular Ui-Grid control. I am using Angular JS in my application. How to know the differences and which one is better over the other?
Thanks.
There are various point to keep in mind .
AngularJS has become a very popular web development framework. Now that Telerik made Kendo UI open source, this framework is a possible alternative for many web developers.
Kendo UI can be used seamlessly with AngularJS. The two frameworks have some overlapping features though. If you are using AngularJS then you probably want to use Angular's own routing mechanism and data binding.
But Better you can go ahead for Kendo Since they provided good Support and lots of Demo from where you learn lots of Example Using Online Demos . Hope it will Help you to find Better Solution
I have used both grids and I have to say that Kendo UI Grid is pretty solid and has lots of code snippets to get you where you need to be functionality wise. The last project I was on they were initially using ngwidgets grid but we ended up switching to Kendo UI after we ran into road blocks with the ngwidgets grid and also learning they were abandoning their AngularJS library in favor of their jqwidgets.
Some things to consider would be:
Need for sorting, filtering and aggregations.(Both)
Editing in grid or pop up editing.(Both can edit, Kendo has both inline and pop up)
Selection of rows, selection of multiple rows. (Both)
Column actions such as delete, edit, or custom. (Both offer but Kendo has a lot more documentation on how to implement)
Ability to create a custom row template that may include links, etc. (Both offer this but Kendo has richer templating capability)
24 hour support turnaround (Only with Kendo License, UI-Grid community supported)
I am trying to create grid with advanced features(filter, re-sizable, scrolling, fixed header, row formatting, cell formatting) using angular js. I have read the following grids documentation.
ng-grid
ng-table
smart-table
And, ng-grid has many features and perfect for our requirements. but I want the following 2 options also. is it possible to achieve from ng-grid?
Formatting
We have number of columns in my grid (approx 40). Most of the column data need to be formatted in cell. for eg: Adding link, change date format, Reducing length of the content with tooltip..etc., Here, I can not do this stuff inside views. But this one is handled perfectly in ng-table.
If I can not do this in view, then my javascript (using callbacks) code is going to be increased. I don't want this way because angular perfectly do dynamic views.
Also, I want Header formatting, filter formatting, row formatting should be done inside views.
Responsive using Bootstrap
Our application should work in all devices. but ng-grid not working as responsive if I view my application in tablet devices.
I'm working on the following grid angular grid - has the features you mention. Similar to ui-grid in it's basic interface, but approaches things differently, including how the grid is customized. You can add css styling at the column and cell level, as well as providing your own custom cell renderers for complete control.
Asik,
The project Angular-UI renamed the ng-Grid to UI-Grid and the website changed to http://ui-grid.info.
Now it's pure AngularJS, without jQuery, use Bootstrap 3 LESS and it's full features that fill your requirements.
Take a look in the page of Tutorials to check the power of features.
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.
need high quality datagrid with:
pagination
CRUD - adding/deleting/updating rows by users
other nice options such as filters, optionmenu, toolbar, etc.
there seems to be several very good options in Javascript (Ext-jS, several Jquery plugins/widgets (JQGrid, Datatables, at least 6 more good open source components...) which are very well designed, implemented, documented and professional grade (and free).
however, everything i've seen to add above features to flex/AS seem to be hacks...
(there is one solution - flexicious - it isn't anywhere as good as some of the Javascript datagrids - not free either)
can someone point me to any good solutions in Flex/AS (like Javascript Datatables or JQGrid) ?
thanks.
You seem to want the world for free (AKA: Well designed, implemented, documented, and professional grade). Why would anyone go through that trouble when Adobe provides one in the Flex Framework?
Have you looked at the Flex DataGrid? How about the Advanced DataGrid? Those are your only two free options.
Pagination is a bit tricky. It depends what you actually need. If you tie it to a backend service such as LiveCycle or dbHibernate, then I understand the Flex DataGrid will do "Lazy Loading" which, basically, loads up the data as the user scrolls. To me that is good user experience for pagination. However, if you want a row of numbers, similar to what you might find on a traditional web page, you'd be stuck implementing that yourself.
Updating rows is supported through the use of itemEditors. Deleting rows can be done very easily. Creating rows is a bit more complex if you want to do it "in the grid" otherwise it's just a form you have to create.
Filters (and sorting) are almost trivial if you use a collection class as your dataProvider.
I'm not sure what you want in an option menu or a toolbar, but you can create a context menu in an itemRenderer with Flex for an option menu. And you can tie a menu control to the DataGrid.
You mentioned Flexicious, which is a commercial option.
Have you checked out ElfGrid, which is also a commercial option.