Is there any way to load the columns lazily. I've a set of 5k columns and 100k rows. I'm using angularjs 1.5.7 and angular-ui-grid ^3.x.
The grid works perfect with 100k rows and 100 columns. But if I tried to load more than 2k columns it takes 10-15 sec to load the page. I'm using infinite scroll module.
It would be great if there is any way to load the columns lazily on demand. Or anyway to extend the ui-grid library.
Thanks in advance!
Try setting the config option columnVirtualizationThreshold to the number of columns of my table:
columnVirtualizationThreshold: $scope.columns.length
Only problem is the issue that the vertical scrolling becomes slower.
See this thread: https://github.com/angular-ui/ui-grid/issues/2784
Related
I'm new on reactjs, and I want to create a table to show some data. In the project I'm working, we are using Ag-Grid datagrid.
I already have created it with basic usage, but my question is:
Supose I have 100 rows as enter, how I can display in datagrid just the 10 firsts?
I stil wanna load all data (for filtering, sort, etc), just don't wanna show all by default.
I'm looking at documentation and do some search, but don't find the proper way to do it.
Edit: I already see the pagination options (the default solution provided by documentation), but in my case, at least for now I don't want pagination. Just wanna render the X first rows (the extra will be ommited in table, but have to be loaded in UI, if not, I could use autoHeight).
Thanks in advance.
I'm assuming you are using the Client Side Row Model and not loading data from a Server. In which case, the easiest way to achieve this would be to show the 10 rows, and add more rows (depending on when you want to load them) via Transaction Updates, please see the documentation on this here
you can use pagination:
documentation reference
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
I have 5 tabs of angular material and my heaviest tab consist of 1 ui-grid. If i initialize it with 1000 rows and 50 columns (which should be okay according to their demos), changing the tab from one to another became extremely slow (8-18 second for "non-grid tabs" and 22-crash seconds for "grid tab"). It is slow even if i disable the animation between tabpanel transitions.
Is there any solution to speed up the tabs (or grid)?
Found!
Assigning a very small number to the attribute "exceesRows" is the only way to speed up the ui-grid (and that really helps). Using this, you actually restrict the number of rows to be loaded for each user view. And now i see the slowness has nothing to do with the md-tab.
I have a large collection of data to display in a datagrid (1000+ records). I want to have this grid to be responsive and lazy load the data with Angular bindings. The Application requirement does not allow me to use Pagination concepts.
The Test/Pan, Results, Additional Info are clickable links which would display inline contents in the same row (like detail row with variable heights).
I am not sure how to approach this kind of design inside a datagrid like using JQuery DataTables or Angular UI Grid. I am sure that it can be displayed using bootstrap table but number of bindings would be a problem doing it in Angular way with 1000+ rows. Each row would have 50+ properties.
I am not a designer and not sure how to attack it. Any expert direction would be helpful.
I want to implement Grid which loads a very huge amount of data, performing search in grid contents, pagination. The data to grid from serverside.And I want to add rows to grid, delete rows and update the inserted rows in database. I want to know which is better technology to implement grid with the above requirements. Please help me.
Adventages of ExtJs 4.2.1.883 Over Dojo 1.9.2
Better Documentation
Grid has row Grouping
Grid has rowGrouping + selectionModel (checkbox for selecting single, simple, or multiple rows) Together
Grid has rowEditor (Editing all elements of the row at once) and Dojo only has cell editing (one cell by time). This is useful if you want to pre-validate row data before send the row record to the server
Grid has row Summary
They use SASS instead pure CSS
Programming only in JavaScript (you only need index.html everything else is javascript)
Stable MVC (in Dojo you need to use Dojox/MVC which is not 100% stable)
DOM is rendered only one time, only after all JS has finished loading, while Dojo renders twice the same element (First during loading the page and them after dojo has created or modified widgets)
Disaventages of ExtJs Over Dojo
ExtJs is non-free for commercial ussage
For more exact comparison you can see this link:
http://dojofoundation.org/packages/dgrid/#featurecomparison
Althouth it only shows you dGrid vs ExtJs Grid, this could be an starting point. Furthermore, most of my development time is spent in the Grid, so the grid is the most important element in a Business application.
Note: Dojo use LESS for all it's bundled styles and Stylus for Bootstrap Style
Both projects are great. Actually dojo is greater than Extjs. But Ext JS is a relatively young framework (compared to dojo). DOJO grid loads data quicker and allows filtering and sorting of the whole dataset.
However Dojo had several attempts in pushing for some good looking themes. Unfortunately they did not get that “good looking widgets” and “pixel-perfect” layout. Widgets are still difficult to integrate.
Refer to this link for more opinions