Bootstrap Table delete dynamic element after sorting the table - javascript

I have an issue with wenzhixin Bootstrap Table, in one of the table cell there is a button, and once this button is pressed it is deleted and a new button with popover is created dynamically.
The problem is once the table is sorted - the new button is deleted and the old button comes alive.
All the description that i have described is available in the following fiddle:
http://jsfiddle.net/eitanmg/gmtm3d9k/1/
How can I keep the new button after the table is sorted?

This seems to be a known issue of the plugin. The issue is reported here and it is still open. The sort basically re-renders the table back to its original state, discarding all dynamically made modifications to it.
I suggest using tablesorter for sorting purposes.

Related

React ag-grid grouping collapses whenever row gets updated

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.

tablesorter v2.0 dynamically adding rows in a table

We are trying to implement Tablesorter v2.0 in our solution. We are using Knockout, MVC, C# in our project.
We have scenarios throughout our project, where in a table, we are dynamically adding rows based on Search result conducted or adding/deleting a row.
We also implemented table sorting on above scenarios and they don’t seems to be working
Scenario 1:
1) Added below line of code during page load
$('.tablesorter').tablesorter();
2) Added below line of code when dynamically adding/deleting a row in a table or dynamically adding rows based on a Search result.
$("table").trigger("updateAll"); or $("table").trigger("update");
Scenario 2:
1) Added below line of code during page load
$('.tablesorter').tablesorter();
2) Added below line of code when dynamically adding/deleting a row in a table
$('.tablesorter').tablesorter();
Issues in both scenarios:
• When we add a new row or dynamically adding rows based on Search results, based on point #2 (above), system is dynamically duplicating the rows in the table and also sorting is not happening correctly.
Any recommendations to resolve above problem would be appreciated.
Tablesorter should only be initialized once. Using $('.tablesorter').tablesorter(); more than once on the same elements will be ignored. Set the debug option to test this behavior.
To update tablesorter's internal cache you should trigger an "update" event.
Add new/remove rows.
$("table").trigger("update");
Only use the "updateAll" event when adding or removing columns.
Add/remove a table column.
$("table").trigger("updateAll");

ng-click not working on button click inside kendo grid header template

I have a grid which is rendered dynamically based on the table selected by the user. The grid has a last column which has a header template in which I have provided a button. On click of this button I want to call angularjs controller function which I did using ng-click=ctrl.addnewRow() .
Problem I am facing is that, when the grid is loaded for the table in the first Kendo TAB the "+"(add) button does not work. When I navigate to a different tab which is using the same grid and same template, the button click works as expected. I have been scratching my head to figure out what the problem is, but could not find the problem or solution. Here is a snapshot of the page. I have used highlighting for sensitive data.
See the "+" button, and the code below in the debug window. Thats not working for the first tab.
Let me know if anyone needs some more information.
EDIT
I have created a kendo UI Dojo where the add buttons do not work for both tables. I did not add any tabs based on my scenario, but this fiddle should help

row.entity.xxxx property doensn't match after sorting

Ok so i have a problem. I have a grid with about 5 columns.
They are:
TaskQueryID, Comment1, Comment2, TaskID, ProjectName.
Data is loaded via WebAPI and everything is dandy.
Every cell in the grid runs off same template which turns the text in the cell into a link. The point of it is to the use that link to load more information about that row into the same grid. This works as expected as well.
The problem i have is when i sort the columns. During initial load, the data shows, i click lets say 3rd row link, i get correct detailed data. I reload the page, try it again, works fine. THEN i repeat the test but after load i sort by random column (i tried all of them) and click said 3rd row link again and i get a problem. Data shows up but not for the sorted 3rd row link but for the original load 3rd row link.
The underlying data is not sorted, just the UI?
I'm a bit stumped.
Solved it. Turns out the parameters were referenced from the grid scope instead of the current click scope. I'm just getting into Angular so this difference eluded me. Hope this helps somebody!

Adding a new row to a dynamic ASP.NET Table Control, at position x - Problems with Viewstate after postback

I am creating a dynamic table control with ASP.NET/C# and the table is being used to hold a form. I need to allow users to click on a button in a row and make a duplicate of that row right below the original. My page is also using AJAX and jQuery.
I have tried to use Table.Rows.AddAt(indexoforigrow+1, newrow) but I get an error that the index is out of the range of values. I figured maybe I wasn't getting the original row's index correctly so I just tossed in a 1 and still got the error.
I also noticed that when I press the button to execute the code, the table disappears. Any ideas on how to fix that?
I am thinking that if I am unable to get these issues fixed I will have to loop through the table and submit the data to a temp table, adding a new row where indicated. Then I would pull all of the data back out and display again.
EDIT
I moved on when I could not get this working and tried to setup my submit functions to loop through the data and submit it to a db and realized that I am experiencing the same issues when clicking the submit button as when I click the add row button. It appears that my issue is really with viewstates/postback.
I did some reading on this and from what I can tell the solution is to re-create the dynamic control on page load every time. But I am confused about how I can do this if I have no idea how many rows/cells I have and how is the information the user entered kept in the form? I have no way of saving the information to a DB or anything because as soon as submit is clicked it all disappears.
Have you considered using a different control? One of the grid controls might better serve your purpose.
I've handled situations (that sound) similar to what you're describing by using the footer of a GridView (among other ways). The big trick is to bind the display object (Table, GridView, etc.) to a list of objects. Then you manipulate the list of objects, rebinding the display object after the list has changed.
You will need to persist this list in some manner, or you could wind up with the list being reset to null. One way would be to save it as part of the session.
At any rate, the idea is to have a display object (GridView) bound to a list of objects. When the user clicks 'add', an item is added to the list. Save the list, then call the GridView.DataBind method.
You are on the right track with re-creating the dynamic table each time the page loads. I have dome similar things and my solution was to keep a client state in a hidden field on the page. Every time you add a row to the table on the client, increment a counter or adjust the state data in the hidden field. Then, on the server-when the page posts back, read from that hidden field to know how many rows were added on the client. You will have to use some kind of naming convention for the new rows you add(and the widgets in them) so you can re-create them on the server.
A simpler option may be to use an UpdatePanel. Rather than try to add the rows on the client, your "add row" button would cause a partial update. The server side code would add the new row to the table and the viewstate would be updated.
I ended getting my data guy to do a bit more processing on his end so that I could just bind a ListView to a sproc. Solved a few of my problems.
Thanks for the helpful comments.
Just returning to this almost a year later because I faced a similar issue in my current project. I was doing a few things wrong my first time around. First, I did indeed need to recreate the controls every load, but I also had to create them earlier in the page cycle. I was trying to create them during page load, which is after the viewstate is loaded.
The controls need to be recreated with the same ID before viewstate is loaded. I went with page init and it worked fine.

Categories