I'm new with AngularJS. Right now, I'm trying to get my ng-grid working in a directive.
I populated my table asynchronously (updating the data and columnDefs properties). It worked fine.
Now when I receive the data, I set a default grouping in code and what I get at launch is :
- The columns and data are not visible but the groups are.
- If I resize my window, the columns and data appear.
I guess it has something to do with refresh, but I couldn't find a way to trigger a refresh of the component on my own.
Maybe you can help :)
Related
I am feeding data to ag-grid via redux state. I have a button in each row using which I can update the specific row data. When I update, API is called and newly updated data will come from API and it is updated in redux state which in turn gets updated in Grid.
I am achieving this using the deltaRowDataMode. This deltaRowDataMode will only update specific row data. Data update is working fine. But when I group a column, expand the rows and then update a row data, ag-grid collapsing the grouping, though update is happening fine. For sorting, filtering it is working beautifully.
I tried rememberGroupStateWhenNewData, it is not working. I check many functionalities like expandAll, etc., but none of them suits my condition. Is there any build in functionality or approach which prevents AG-Grid from collapsing the grouping when update happens?
Unfortunately, I am not allowed to share any code anywhere. Sorry about that.
Thank you
below grid options helped me fix this issue:
rememberGroupStateWhenNewData: true,
suppressScrollOnNewData: true,
you have to maintain a immutable data store to keep track of rows so that open group remains open and don't collapse on updating of data.
In my application, we are using the 'Client-Side' row model in more than 50 tables.
Now more data is coming from back-end, so loading all the data at a time in table gives performance issue.
I knew, I should use 'Infinite/Server side' row model. But replacing for all the tables takes more time.
So I am loading data by calling API when vertical scroll reach bottom of the grid by using 'onBodyScroll' event.
Here, I don't want to use 'showLoadingOverlay' to display loader while fetching the data from back-end.
Because it freeze the whole grid while displaying loader. It doesn't look user friendly. I want to use loader like 'Infinite' row model. Display the loader on last rows in grid, So user could see the other data while fetching data from back-end is in process.
How to achieve this in 'Client Side' row model?
AG-GRID - VERSION: 23.0.3
Please help me.
Thanks.
Cay you help me, please?
I have a table use (DataTable plugin) (does not matter with what content) and I need to be able to do some actions on the columns:
Have option to change columns place by dragging column left and right
Add/delete new column (all data for tabel is in angular object, and already available in page)
Have option resize columns
And all of that options should be saved after page refresh.
A already try plug-in for DataTables ColReorderWithResize.js - but it doesn't saved state after refresh and it no option for add/delete column.
Maybe, someone know som plugin or couple for solve all of that my demands for table. Or some way for do it?
Thank you.
Yep, Datatables.js does all of that. The link to which you refer is old. The current reorder plugin is here and it will state save but you have to configure state saving correctly when the table is initialized.
Adding and removing columns can be set up with a button and there are a couple of ways to resize columns, including an initialization option.
I'm trying to use ng-table (http://bazalt-cms.com/ng-table/) in a web app based onto Typescript and AngularJS. I just have to display in a paged table some 50-500 items at most, all loaded at once from the server; so I'll what I need is client-side paging of my controller's data. Yet, no row is displayed when my data are loaded, unless I totally disable paging.
I made a plunkr which reproduces the issue:
http://plnkr.co/edit/0hCSMm03L8iHwePccm7x?p=preview
As I'm using Typescript (but there is no definition for this lib right now), I've shaped my example code like a typical outcome of the TS compiler, but apart from that, I followed the paging example in the ng-table website. Just click the button to fill the controller's data.
Update: by examining the ng-table source I managed to force the refresh by calling tableParams.total(...) and then tableParams.reload() after I have filled my data array; yet, there is no trace of this code in the samples so I'm feeling a bit wrong about this.
I used that too (i.e. update the total and reload the table). I reasoned that I had created an instance of a table and then I needed to update the instance with the new information. hth
In my application I have table that can have multiple columns, based on date range selected.
I need to be able to display table containing 20 columns or 50 columns (number of columns is based on data range from parameters). I did that, but I was refreshing page when my parameters changed.
Now I'm trying to do it better.
I've created sample that shows my approach: http://live.datatables.net/fojusec/3
Basically I'm swapping "table" with new content that comes from ajax request and then I'm calling "dataTable" on that new table.
My example works fine, but I was wondering if maybe there is a better way to do it, maybe by reconfiguring table?
Is it safe to do that like I did it? I'm worried about any leaks.
EDIT:
What I'm not sure is if dataTable object is attached to table. So if I'm removing table from DOM should I be removing dataTable object also.
I would like to avoid any conflicts. I clicked on my example for some time and I didn't got any errors.
QUESTION: What is the best way to swap or reconfigure table using datatables 1.10