I'm using px-data-table with selectable and single select properties.
When I select a row, I get the values of that row from the px-click event's and if a user click's a delete button, it trigger's my delete api. However the data gets deleted but the selection never gets cleared and next row in that table show's as selected.
Is there a way to clear that selection, when a table is reloaded with new data ?
Thanks!!
Answer by Jackie Tran · Nov 07, 2017 at 03:38 PM
Hi @PredixPocs,
I created an example in codepen for your scenario, this is workaround way to clear the selection. You have to clear your tableData and re-assign it again.
removeRow: function ( ) {
var dataTable = document.getElementById('tableTest');
var selectedRows = dataTable.selectedRows;
this.splice('data', selectedRows[0].row.dataIndex, 1);
let updatedData = this.data;
this.set('data', []);
this.set('data', updatedData);
}
https://codepen.io/jackie_tran/pen/QOGLNY
Hope this help you.
Jackie
Jackie thanks seems like this worked out for me. I was not using the selectedRows property instead manually getting the selection through click event.
even if the selection stays that works for my use case. But to remove the selection I just tried to reset the data with empty array and back the way you have shown.
Thank You!!
Answer by Randy Askin · Nov 07, 2017 at 03:07 PM
How is your delete API removing the row from tableData
? Is it using the proper Polymer array mutation method for splicing out the data? If not, the component won't be made aware that the array has been changed (first step).
Would you mind doing a little troubleshooting? Or providing your code / an isolated example in a CodePen or Glitch or something? The data-table doesn't have a delete row function out of the box, so it's a little hard to diagnose the issue. The next thing I would try would be to add a restamp
property to the dom-repeat on line 77 of aha-table.html, which will cause Polymer to re-render the DOM every time the rows are updated instead of re-using existing DOM. My next theory after that would be that the array change is being lost somewhere between tableData
and displayedRows
, since the table has its own internal representation of the data.
I'm just remembering that the selectedRows
property is read-only, so you can't delete the row from there at the same time you remove it from the table. Again, I assume this is because of the internal representation of the data, but not 100% sure of the history... Hmm. Let me know if you can help by troubleshooting or providing some sample code.
@Randy - I just added you to the git repo were I have this example - https://github.build.ge.com/502141532/sdfc-dashboard.git
Its built of predix-webapp starter sample code so you can just run gulp and access http://localhost:5000
File Name is - simple-asset-view.html line # (171->this.$.delBtn...)
Let me know if that helps else will create the codepen example.
How can I call selected-rows-changed event in px-data-table?
How can the px-twoup widget be split so it is not split in the middle? 2 Answers
Predix UI Warning in polymer.html Could not find style data in module named px-theme-styles 3 Answers
predix ui seed 3 Answers
How to secure UI application using SharedUAA 1 Answer
Is it possible to sync tooltips across multiple graphs using px-vis-timeseries elements? 1 Answer