On the mixed use of sorting and editing functions

[LC]

Hello! Recently, I have encountered some problems when using grid’s sorting and editing functions, which need your enthusiastic answers.
I created an array type data source, for example:
[
{
“name”: “Atest”,
“age”: 1
},
{
“name”: “Btest”,
“age”: 2
},
{
“name”: “Ctest”,
“age”: 3
}
]
Display them in the grid component. Then sort it by the letter Z-A. The display is as follows:
name age
Ctest 3
Btest 2
Atest 1
However, if I choose to delete the first row, that is, Ctest data, the cursor will automatically jump to the third row, that is, the original first line : Atest. How to solve this problem?
In addition, if I add a new row of data, such as “DTest / 4”, the newly added data will always be in the last row and will not be moved to the first row according to the sorting rules. Is there a good solution to this problem?
Thank you. looking forward to your early reply.

[admin]

Hi LC,
1. We were unable to reproduce the ‘jumping cursor’. We will need a codepen or stackblitz example to see the behavior.
2. Regarding the second issue with the sorting being not applied after adding a new row. We were able to reproduce this. You can call ‘refreshSort’ after adding a new datagrid row. This can be used as a workaround.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[LC]

Hi Peter,
Glad to see your reply. On the second question, I tried the method you recommended, using the ‘refresh’ and ‘refreshview’ methods, which can be successfully solved at present. Thank you.
As for the first question, it is suggested to try the example on the official website. The specific address is as follows:
https://www.htmlelements.com/angular/demos/grid/selection-mode-auto-show-checkbox/
You can see that before sorting in the instance, we can select each row through the check box on the left. But when I sort the First Name column according to the letters A-Z, and then select a separate row, the order will be disordered. For example, when I click the check box in the first row, the second line is actually selected. Maybe you can have a try.
Thank you very much for your help.
BR,
LC

[admin]

Hi LC,
The selection is by row, not by index. When you select a row and change the sort order, the row stays selected even if it is not in the same position in the data grid. For example, select the row with first name = “Andrew”. Now change the sort order. The row remains selected after changing the sort order.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[LC]

Hi Peter,
OK, thank you for your explanation. Now I have a certain understanding of this phenomenon.
In addition, is it possible to select rows based on index values instead of rows? For instance, in the example, if I want to select all the rows with the ‘First Name’ beginning with the letter ‘A’, I may need to sort first and then select. This is more conveniently in this situation.
Thank you very much for your reply.
BR,
LC

[admin]

Hi LC,
The selection with sorting behavior is the same as in the most datagrids available and is always by the Row ID. The ‘select’ method accepts a row id as an argument.
To select a row by its index, you can use this: grid.rows[0].selected = true; to select a first row.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts