I am using the DataTables jQuery plugin with server side pagination to create a table with child rows where the user can change the data, the problem I have is when I move to another page without saving changes in the modified forms; the DataTables removes the rows and its child rows from the DOM, so I am not able to get later the updated rows to save the changes, also if I move back to the first page where the user modified the data, the child rows are re-created (as part of the createdRow event where I am creating the child rows) so the changes entered by the user are lost.
Is there any way to deal with this problem?
I don't have enough experience in working with DataTable, but I guess this plugin has something like "data is loaded" event. Before the page is reloaded, you can save your draft data in separate array/object (like draftData) and after data is loaded, you can merge information before page rendering.
I ended up creating my own logic since this is an expected behavior of the DataTables plugin.
When using server side with DataTables, the plugin doesn't have a way to identify or "remember" what rows are being modified, what rows are selected, etc. Because of each pagination request rebuild the table and re-create the rows.
I found somewhere that a valid approach was using a global variable to store all the changes (selected rows, updated data, etc) I am also using the createdRow event to restore the changes made by the user after creating each row.
Related
I have a database that is updated with new rows almost every few seconds.
I have a table on my website that I would like to be automatically updated with the new rows added to the top without the user having to refresh the page.
I was testing the below:
$(document).ready(function(){
loadstation();
});
function loadstation(){
$("#data_download").load("/include/data_download.php");
setTimeout(loadstation, 1000);
}
This works however I am unable to select anything in the table as when the function refreshes the request is unselects everything. I am also met with another issue of scale and after some time on the page I receive an error on the browser about memory issues "SBOX_FATAL_MEMORY_EXCEEDED".
What would be the best approach to having this be scalable and with no memory issues.
Thanks in advance.
You could add a timestamp to your rows and only pull (and load) the extra rows happened since the last update.
Let's say you loaded the page at 00:01, then you pull and append (instead of load) the rows added since 00:01 and update the timestamp.
This would solve the issue deleting the selection, because it would add and load only the extra rows and not reload the full table on each update.
The best approach would be use AJAX. The server should only send data of the updated fields (JSON format preferable) and javascript should simply replace textContent of the needed field(s).
Here I'm Using .net Core in Server Side and plain vanilla JavaScript for UI
AG grid is getting data from the SQL view thru ASP.net Core application.
in the Grid all the cells are editable. now i want to have one button on top of the Grid. if the user clicks that button only changed data needs to save in DB. is there any option to get oly dirt values or pls advice me how to achieve the above use-case.
Thanks in Advance.
I think there isn't such a complex solution implemented in ag-grid out of a box. But you can do it yourself with help of the events cellValueChange and/or rowValueChange (only if you are using editType = 'fullRow').
I suggest to use the scenario editType = 'fullRow'. So whenever the rowValueChange fires, store the new data of that row in some data array (of course, if a user edits the same row the second time, you need to overwrite the previous stored row value). And when the button is pressed, you pushed to the server only data of that changed rows you've collected.
I'm attempting to insert a form as a new row underneath a row generated by ng-repeat. I can successfully add a row to the data model using .splice() but I'm not able to render the HTML when it is inserted. I have researched methods to accomplish this and the ones that are mentioned the most frequently involve the $watch and $compile functions. The issue is that I do not have an original tag to insert into as this is a brand new row in the table.
Idea behind this:
I have a table of data with many rows. The table represents data on "actions" that are for employees to accomplish. We are creating a web app that allows them to view their own actions and update them in the web page rather than updating a spreadsheet.
I was originally inserting a row dynamically with jQuery but as we are aware - it breaks the DOM. I'm trying to take the angular approach as this is an angular app, but I'm struggling with how to accomplish this.
The row that is inserted is a form for all the fields chosen and some extra ones not shown in the "view". Ideally, this would expand a row downwards when they click a button at the end of the row containing the action they are trying to edit. When they are done they can click a save button which removes/collapses the row and saves the changes to the model. This change is then sent back to the API to write the changes back to the database.
View of the Table:
Table view
View of the Form:
Form
Basically, I'd like to dynamically insert the form between rows shown in the table. I have to avoid jQuery and use AngularJS if possible.
Anyone have a neat trick to accomplish this?
Code (had to remove some stuff for privacy):
Pastebin: jf1mv9WG
Cheers,
Tux889
If I understand your question (and assuming you are using angular 1x), maybe you can use ng-repeat-start and ng-repeat-end to render two rows for every item; and in the second row put the form inside a td[colspan=n] (where n is the number of columns in your table). And make the two rows mutually exclusive, for example the first row can have ng-if="!item.showForm" and the second row can have ng-if="item.showForm".
Take a look a this example that I prepared: https://jsfiddle.net/miguelerm/9pus3zoc/
You can try to use ngBindHtml directive.
You can bind html to your table.
I am looking for a grid implementation on my dashboard. The requirement here is that if the data that the grid might be fetching changes while a user is looking through the grid, the changes should be reflected. So the row present in page 1 may be present in page 2 after sometime. If the user clicks on page 2, he should be shown a fresh page that is fetched from database and that item should be in page 2. So, I need to use a pagedObjectList to get the data and show that data when user looks for the next page. The same requirement is for sorting too.
So I am looking for a javascript Grid like jqGrid or DHTMLX grid or a Tag Library which has some sort of ajax calling mechanism for sorting and paging instead of showing the old data which is fetched first.
Please suggest any grid/ tag library implementation which can fulfill the above mentioned requirement. Thanks in advance
I finally went with DHTMLXGrid, it has all the configurable actions I needed, like onPageAction, onSort etc. I could simple write my custom code for those trigger events. I would also recommend it to others, pretty handy and solid.
I have a table with rows in the original state (A). When a postback occurs, I reorder these rows in the DOM (based on a business rule) using a JS function. It works fine except that the User experience is degraded when the rows are reordered.
The sequence is as follows:
1. Display the rows in state A
2. Run a JS function that reorders the rows
3. Display the rows in state B
I dont want the user to see the state A.
I am thinking in the lines of setting the div to invisible and after the JS function runs, reset it back to visible. But this doesn't seem to work.
Any workarounds?
Why not generate the entire table on the client. You could have the server return JSON and then create the table with the document.createElement (or whatever your framework uses) in the order you want it to be.