I'm using mui-datatable to implement table in my app. I've every feature I need up and running, and I'm using server side data and pagination.
The problem is that I need to persist selection of rows when the user change the current page.
I can store the ids of the rows that where selected in an external array using onRowSelected.. but I'm not sure how to make the table render those rows as selected when user changes the page.
Bare in mind i'm using server side data, so the idea would be that in page 1, when I select row 1, a take the id of that record and add it to the array of selected ids. Then I need to check if the ids of rows that are currently displayed in the page are included in the selected array, and if so then check it as selected in the table. That way when I change the page, the same logic would run and all rows would be cleared since none of the row in the new page are selected.. I think you get the point.
I dont know where should i check if the row's id is included y my selected array and if so, how to check it in the datatable.
Thanks in advance for the help.
You can wrap your entire MUI datatable in another component which maintains the state of all selected rows
I'm stupid... I just needed some sleep xD
My problem was solved once I realized that I just needed to pass the rowsSelected option like this:
rowsSelected: this.state.pictures.filter(p=>this.state.selectedIds.includes(p.id)).map((p,i)=>i)
where this.state.picture will change when the user changes the page and rowsSelected will also changed.
Never mind... It's a rookie mistake.
Related
I'm trying to do something fun: I'd like to send the record changes from one client to another and have the second client updated to show these changes. Basically collaborative viewing. The second client is disabled from making changes, he can only watch.
Simple fields like strings, numbers, checkboxes, etc. are easy, that worked right away.
The references are the problem. If I have a combo that uses another model as it's source, I am unable to update it on the second client.
I tried setting just the id, then the entire referenced object, I tried various set options, but simply no dice.
The record does change, I see that the data is updated, I was even able to manually modify the _ reference attributes, but the UI keeps showing the old values for those fields.
Is there a way to send the record from one client to another and have the other client just take over all values and display them in the UI? (it would be better to send just the changes, but I'd be very happy if I could get it to work with the entire record)
EDIT: I'm using SailsJS with socket.io, so the p2p connection is not the issue.
I'm getting the data like this:
var data = record.getData(true);
broadcastRecord(data);
And on the other side I tried:
record.set(data);
A code example for the receiving side would be appreciated, if anyone has an ide how to solve this...
I think your problem is related to associations and comboboxes.
Let's say you have a model User with a field group that references model Group, and that you have a User form with a Group combobox.
In the receiver client, you are probably getting only the group id. record.set(data) updates the bound combobox calling setValue(groupId).
This setValue will try to find the corresponding record inside its store, but it won't ask server-side for that record. Instead, it will create a new record with the passed id (showing an empty combobox).
If possibile, you can set remoteFilter:false to the store and queryMode:'local' on the combobox and preload all the data from that store.
Otherwise, I think you'll have to override the combobox setValue method to get the record remotely.
I'm using the angularjs-dropdown-multiselect.js to create a multi-select drop-down. I'm trying to dynamically populate the drop-down with existing data from mysql database. If I hardcode the array of objects in my scope, the drop-down is populated correctly and the glyphicon checks are highlighted, as being checked, and the correct numbers are selected. If I pass in the array of objects from the database, as a variable to the scope, the glyphicon checks are not highlighted next to the selected choices, but the correct number of selected is correct. Any ideas on how to fix this? Here is a link to the code I'm using: http://dotansimha.github.io/angularjs-dropdown-multiselect/#/.
In the backend, wherever you perform the query to get the array of items from the database, try making a loop that will go through the returned items, and push them into an array, one by one.
then make a get call that will receive array as a response from the database.
I hope this is what you work looking for!
I have an app with multiple columns (about 3 columns as least), each column is a more detailed view of an item in a column on its left. This type of layout is similar to Asana's.
Lets take an example from 1 of the page I currently have:
Column 1 list all current users, clicking on 1 user will open a list of all sales orders of that user on column 2.
Column 2 show list of all orders of 1 selected user on column 1. Clicking on 1 order will show the details of that order
Column 3 show all details of an order selected on column 2. Clicking on a shipment in that order details will show the details of the shipment
Column 4 show all the details of a shipment selected on column 3
So on a so forth. Now there is another twist:
Column 2,3,4 show these details in a form, which mean they can be edited and submitted. Once they are submitted, it makes sense to reload all the column on the left of that edited column to refresh the info. However, for performance purpose I would like to reload them all in a single request and send them back in one json array hen update each column that has newly returned view code (lets assume the backend code is smart enough to handle all this)
I believe someone must have had this issue before, what is your solution to get around this?
Since you are loading different set of data. Its good not load them all at once. You can use ng-include and the the content of the ng-include can be triggered based on the clicks.
ng-inclue="<<scope variable>>"
For ex. In your controller,
Chnage the value of salesurl based on user action
<div class="slide-animate" ng-include="salesurl"></div>
The scope variable can be an URL, which renders the result set based on the parameters posted after user action.
Hope this help.
I have come across a problem with I am having a edit form, so what I want to achieve is if user edits an item it gets locked so other user can not edit this item at the same time. I want something that when user clicks on other link it unlocks the item. Please don't suggest on unload because it will not not work on iOS Safari.
If anyone can give me steps/concept that would help a lot.
Thanks.
You could add a couple columns to your table such as 'locked' and locking_timestamp.
If a record is currently "locked" you can make it inaccessible by others and you can use the locking_timestamp column to only allow a particular record to be locked for a specified duration.
You can use the same method used by drupal :
compare the date of last change before saving the row to detect if the row has been changed by an other user
see :http://www.drupalcoder.com/blog/node-editing-concurrency-in-drupal.html
I am trying to add a shortlist button to a datagrid (using backgrid.js http://backgridjs.com/)
What i want is the shortlist button takes the id's of all selectedmodels and save them in database.
If i do this this.model.get('id') it takes the id of current row but i want to take the id's of checked check-box's.
When I look closer and use "grid.getSelectedModels", this call returns an empty array.
So how can i get the id's of selectedmodels?
The only way grid#getSelectedModels is empty is when you are not using SelectAllHeaderCell in combination with SelectRowCell. Is this the case?