Angular ag-grid combine Master/Detail with Row Pinning - javascript

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.

Related

Angular table-sort and drag and drop table row conflict

I am using angular table-sort and angular drag-drop in my project. When I am dragging a row and trying to drop it to another row, then table sort forcefully sort the rows to their previous position.
If I remove the table sort directive ts-repeat, then drag and drop works perfectly. I also need default table column sorting "Age" ascending. I have made an example on plunker for better understanding. https://plnkr.co/edit/pHlTufpayFAB4he8bN6y
So, how to prevent table-sort when drag and dropping a row?
Can anyone help me solving this issue? I would really appreciate this.
Thanks in advance.
I think you should just get rid of ts-repeat, and only sort the data initially (in your service/controller). It's not a bug, it's a feature. Imagine, that you remove and then re-add an element to a table, which is sorted. You want it to keep sorted, right?
You can try by using Angular ui-sortable instead of angular drag-drop. I think it will work for you.
PrimeNG Table offers row reordering with drag drop, you need upcoming 5.2.1 though.
https://www.primefaces.org/primeng/#/table/reorder

Reduce the number of $watches created by ui-grid

)
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.

Displaying sub-data rows inside a row in SlickGrid Table

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.

Angular ng-grid/ui-grid implementing view logics inside views

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.

Can you render arbitrary HTML in each cell of a YUI datatable?

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

Categories