)
first i just wanted to say thanks for this great project.
we integrated ui-grid as part of our table-grid , and for some unknown reason the amount of watches generated by the ui-grid is huge for the amount of data we trying to process.
for example :
grid - 9 columns table with 20 rows of simple text based cells without any custom cell template
inspecting the $watches we getting amount of 960 watches.
trying to debug this issue we printed each element that has watch on him and most of the times we got this kind of elements :
[div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Z, context: div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Z]0: div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Zcontext: div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Zlength: 1__proto__: n[0]
watchers 4
and each cell element got 2-4 watches.
we used simple data structure with basic columnDefs (field + display name) .
in most of our cases we don't need to watch for chances in specific grid cells.
is there anything we can do to reduce the number of $watches created by ui-grid ?
thanks in advance,
elad.
As a conclustion - using the row*col $$watchers is used as part of performance boost to use Scrolling virtualization. any way to dismiss this behivor didnt work.
we have decided to use another approachby using smart table
its lightweight and we love its idea not to encapsulate/hide the Table/Grid layout creation but instead its aset of directives (plugins) allow you to compose you table behavior in a declarative way.
using declarative way = using angular ng-repeat and see the table template directly its much simple and less much easy to give to CSS dev to add the style.
still we cannot use it as a complex grid infrastructure need for a CRM solution - for this reason we still looking for solution - maybe Telerik UI Table
elad.
Related
I am using Angular 10 together with ag-grid to create table. In my project I need to use expandable rows(Master/Detail feature) and row pinning (Row Pinning). Both of these features are working well separately, but when row is pinned, it is impossible to expand it (chevron icon disappears). I've googled for the solution, but didn't find anything.
I've prepared stackblitz example, which reproduces my problem:
https://stackblitz.com/edit/angular-vkx5eq
I'll be grateful if you could tell me if my requirements can be achieved using ag-grid and provide working solution based on code example, which I've prepared.
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.
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 want to add paginated table to a page. It should be 2 rows by 4 columns. Each cell contains a thumbnail image and some small links.
We're using YUI elsewhere on the project, so I'd like to use the Datatable. All the examples I see are geared around tabular data (understandable), but my hunch is that I can rewrite the HTML of each cell using Javascript. I don't see the callback function I should hook to rewrite the cells.
Possible? Or am I trying to hammer in a nail with a screwdriver? If there's a simpler way to do this with YUI I'd love to hear about it.
thanks!
jcooper,
To paginate a simple grid of image/text elements, I'd almost prefer to see you use the Paginator without using DataTable. DataTable is a powerful component, but it's working hard to be a lot of things you don't need.
Carousel (http://developer.yahoo.com/yui/carousel/ ), on the other hand, seems like it's trying to be just what you want. http://developer.yahoo.com/yui/examples/carousel/csl_imagentext.html , for example, might be a good place to start.
If that's not quite what you want, you could definitely do this with DataTable. Just create the markup snippets you want to use for each cell, store them in an array, and follow the directions for using an array datasource and pagination.
Regards,
Eric