I am currently looking at building a grid that is dynamically updated using web sockets. We are looking at kendo grid as an option but this does not seem to play very well if you want the data displayed to be paginated and things like sorting/filtering/grouping to be done on the server side while keeping the dynamic updates flowing in.
This can be easily achieved when updates are sent for an existing row in the grid but when a new row is added and filtering/grouping/sorting is applied with pagination there is no way of knowing on which page that row belongs too.
Any suggestions/ideas on how this could be done are very welcome.
Thanks
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.
I am using angular-ui-grid 3.1.1 with 25,50,75 records at a time.
Each cell is having different celltemplates e.g, onclick popovers, hover popovers, file download links, data with profile images, data in nested table etc.
Data is rendering fine in the grid, however for some seconds ui grid becomes unresponsive.
Also i have created an external column chooser. While choosing a column to show/hide, the grid becomes unresponsive for some seconds.(same unresponsive behavior seen with in-built column chooser provided by ui-grid)
Please suggest any fix for this.
sadly, we've had to abandon UI grid for these same sort of issues. The issue, however was not in UI-Grid but in angular lacking performance. In my case I built a grid with ReactJS that I created a angular JS directive wrapper to put over. Even by just putting angular HTML with lots of rows/columns it wasn't fast enough. The last thing you could try before swapping away from UI-Grid would be looking into row/column virtualization if you dont already have it enabled. Here is the option to test
columnVirtualizationThreshold
If you wont change the scope variables, try one-way-data-binding in your templates, it will give you some performance like:
<span>{{::variable}}</span>
IMPORTANT!: Be careful because it wont update data any more until you refresh the view.
I am developing a webform which needs to have LineItems ie. some textboxes, calendar,dropdowns etc in a row which can be added dynamically on button click.
An example from my previous works:
I developed this using a GridView and maintained the state of controls using DataTable and ViewState on Click to Add link button.
The problem with this approach is that it becomes very slow as number of controls increase.
What are other alternatives? I know I can use repeater but I am not sure how much difference is that gonna make? I would not want to explore new way if the performance improvement is like 5%.
I can use jquery and html client side elements but then maintaing state would be a headace (I cant avoid postbacks , there are already many drop downs and fileuploads on the same form that cause postback ).
OR if there is an easy way to maintian the state of HTML elements?
This is not opinion based question since , performance and be percieved and measured.
I can think of several options:
Implement paging/limiting so customers can only see N rows at a time
Implement master-slave views: split one large table in two. Master table only lists items and slave table only show details for the currently selected row
Search for other jquery plugins, perhaps there are newer/faster plugins available (sorry couldn't offer any better alternatives, but they might exist)
You may find good answers at UX design web-site, such as How To Display Too Much Data, tables with lots of columns, Best way to display more table columns and rows than I have room for?
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