Sorting getting reset after model refresh in spiltapp - javascript

We have a split app with sorting feature for the list in masterview. The sort happens properly. But when any submit action is triggered in detailview, the masterview is refreshed to remove the submitted listitem and the sorting is lost.
How do I retain the sorting? Is there a property I could refer to retain the sorting? I tried to store the sort key and sort order in sessionStorage and read it before refreshing the model and re-sort the returned data in array before assigning it to model.
I am pretty new to UI5, any help will be highly appreciated.
Thanks

This would be case if you are sorting via controller once the data is loaded.
You can either:
Add the sorter to the list in the view OR
Add sorter at model level
OR
After refresh apply the same sorting which you used to before.
PS:I can add coding context if you can add your code in the question

Related

Properly choosing React keys while rendering items from array

I've been recently studying the importance of elements' keys in React and I'm still a little confused about it.
I have this case where there is datagrid component responsible for presenting data in rows. There is implemented sorting, filtering and pagination. I fetch the rows data from api.
And the question is:
How should I properly choose keys for map function elements (rows)?
The thing is that the already fetched row data can change between refreshes (by being edited by other user).
Should I use unique ids for key properties (for instance nanoid) or use row.id?
If I understand it correctly, using row.id would result in no row rerendering for already loaded rows even if some of row data were changed.
On the other hand, using unique ids (like nanoid) would make negative impact on performance while sorting, filtering etc...?
Do I get this right, and how to do this properly then?
I agree to study the key in more details. Here's my understanding.
If I understand it correctly, using row.id would result in no row rerendering for already loaded rows even if some of row data were changed.
This is not true, the purpose of the key is to identify the item location, so when it comes to the reconciliation (convert element into a node), React knows if a node (fiber) can be reused to speed up the update process.
Let's make an example, if initially the the key order is
1 2 3
And somehow after a re-order, it becomes the following in the new update
2 1 3
Then React is guided to use the node with key 1 to update the item. The item is updated, and in this case, to the right place. BTW, React doesn't know by default the order of items, to React, they look all similar ;)
I'm only giving you a basic case. But you can make a guess for other cases, ex. with one key missing, or a new key added.
Keys should always be unique, stable (as mentioned above by Brian), and never manipulated in your code (hence stable).
A unique ID is preferred. I've seen people pass an entire user object as the key. Let along that there might be duplicate users, this could also be an enormous key.
Do not use the index of any array as your key.

DOJO DGRID Collection Sync With INPUTS

I have a dgrid with inputs. My dgrid is in edit mode so users can add rows, edit rows and sort rows. When I look at my collection, it looks like
id: "1"
COLUMN1: "INPUT TYPE="text"...."
COLUMN2: "INPUT TYPE="text"...."
Note: I could not put the greater than and less than above with describing the inputs.
and so on. When I make a change on screen, for one of the inputs, the collection is not updated. So, when I enter a new row or sort the dgrid, all the entered data refreshes back to its original state. I know the reason is because the collection is not updated. Is it possible to update the collection or do I have to write my own code to do so? Please note, I am using a dgrid and NOT an onDemand grid.
Thanks for your help in advance.
Please add some code on how you are initializing your collection and what all mixins are being used for it. As far as I can understand your problem, you need to add the Trackable mixin in your collection. Read its documentation here.
From the documentation:
We can add support for tracking the position of updates by using the Trackable mixin. With the Trackable mixin added to a store, we can call the store's track method to get a collection that includes index information in its delete, add, and update events.
This might be of your help.

Changing data in a extjs 4.1 store on demand

I am using extjs 4.1 data store. I have attached the store to three grids.
When user selects a record on gridOne, I update addedOnGridOne property to true. Similarly when user add a record on GridTwo, I update addedOnGridTwo property to true.
Now I have a added a checkbox, when this checkbox is checked, I need to reset addedOnGridOne & addedOnGridTwo properties available in the store & while this checkbox is checked, i need to separately maintain addedOnGridOne & addedOnGridTwo properties.
What I want is: After the store is loaded for the first time, I want to create two copies of data available in store.
If the checkbox is chedked, I will load the first copy of data and if user is on tab two I will load second copy of data.
What options are available to me here? is it a good idea. Is there any better approach? Please suggest
One store for more grids almost always leads to troubles as sorting, filtering and editing influences all three grids. If you need three grids working with the same data you could have three separate store instances loaded with the same data.

clear values in jqgrid post parameter array

I'm going to simplify this question.
I have a jqgrid instance which posts an array of ids to the server. I would like the pass in a new list when an event is triggered. Instead of overwriting the old list, jqgrid will add to it. How can i set the post parameters to create a new list each time I reload the grid.
This is the code to reload the grid with new post data
$('#gridConfirm').jqGrid('setGridParam',{postData:{'deviceIDs':$("#device").val()}});
$('#gridConfirm').trigger('reloadGrid');
I've confirmed that $("#device").val() returns a list of id's in the form "5,6,7,8"; So i'm expecting this list to be posted to the server.
Instead, its posting "5,6,7,8" plus the previous list. so if the previous list was "1,2,3,4". It's posting "5,6,7,8,1,2,3,4"
How can i clear the previous posted list when reloading the grid?
*edit*
On slight correction, when i change my postdata list. It does not append it overwrites, but it keeps the length of the list.
so if my original list was 1,2,3,4,5 and i selected 6,7 my new list is 6,7,3,4,5
I'm thinking this is a bug in the grid.
Now you removed all code from your question. So I wrote the demo myself which has no problem which you described. You can look at the source and compare with your version to see where you have a problem. In any way I would recommend to use postData having functions as properties (see here).

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