Forums Home / Wijmo / General Discussion
Posted by: sdayal on 8 January 2023, 9:12 pm EST
sdayal
Posted 8 January 2023, 9:12 pm EST
Hi Wijmo team,
When we keep editing test boxe (full name and short name columns values) with thousands of data the focus does not apper at the end of the test, sometimes we need to click double on the cell to edit the value.
To this we alredy added ’
startEditing ’ function but it is not giving us proper result.
How can we solve this?
https://stackblitz.com/edit/angular-hfym2t?file=src%2Fapp%2Fapp.component.html
Thanks
sdayal
Posted 9 January 2023, 4:02 pm EST - Updated 9 January 2023, 4:17 pm EST
There is one more issue with this -
++ When we edit the cell the update does not happen at the very same time if we try to open the dropdown it flickers in that time interval(consider subjects dropdown).
https://stackblitz.com/edit/angular-hfym2t?file=src%2Fapp%2Fapp.component.ts
Please provide a solution for this.
sdayal
Posted 10 January 2023, 3:26 pm EST
Please provide solution
Thanks
sonu.pandey
Posted 10 January 2023, 5:24 pm EST
Hello,
Sorry for the delayed response, regarding your first issue, you may provide some delay before calling the startEditing() method to let the grid update the previous cell edit transaction completely. I have updated the startEditing() method in your shared sample to resolve the issue, you can verify the same from the sample link given below:
Regarding your second issue, sorry but we are unable to replicate the issue at our end, could you please provide steps to replicate the issue at our end along with screenshots/video of the exact issue? so that we can investigate the issue further on our end.
Regards
sdayal
Posted 10 January 2023, 10:00 pm EST - Updated 10 January 2023, 10:26 pm EST
1 scenario ) Tried the solution for first bug as well but still try out for 8 thousands of records, it will still take time to show focus can we make it better?
2 scenario) Steps to reproduce second bug:
try the link: https://stackblitz.com/edit/angular-hfym2t?file=src%2Fapp%2Fapp.component.ts
sometimes dropdown flickers for first time, sometimes dropdown gets stuck added a screen shot for that
sonu.pandey
Posted 11 January 2023, 10:01 pm EST - Updated 11 January 2023, 10:06 pm EST
Hello,
Regarding the first scenario, sorry but we are still unable to replicate the issue at our end. Please refer to the following gif that demonstrates the steps and the observation at our end and let us know if we are missing any steps to replicate the issue:
Regarding the second scenario, we were able to replicate the issue on our end. Thank you for providing the steps. To resolve the issue you may hide the existing opened dropdown inside the mousedown event listener. Please refer to the code snippet and updated sample link below demonstrating the same:
if (!wjcCore.closestClass(e.target, 'multiselect-editor-parent')) {
this.hidePopUp();
}Sample link: https://stackblitz.com/edit/angular-k1t5ej?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Regards
sdayal
Posted 15 January 2023, 3:51 pm EST - Updated 15 January 2023, 4:11 pm EST
Hi Wijmo team,
Thanks for reply.
You can get the first scenario in below snippet: Sometimes when we try to edit the cell focus does not come to cell at first time you need to click twice on the cell or white highlight comes to cell but the cursor does not appear it appear after a delay
https://stackblitz.com/edit/angular-cugg7t?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Is there any issue with ‘cellEditEnded’ event after this event we are passing the data to store as well but even though I comment the store related code still we are facing this issue. I am able to rproduce this bug even in the snippet withough store
The second scenario bug got fixed after above solution.
Thanks
sonu.pandey
Posted 16 January 2023, 5:02 pm EST - Updated 16 January 2023, 5:07 pm EST
Hello,
Sorry but still we are unable to replicate the issue on our end. Please refer to the following gif that demonstrates the steps and the observation at our end using your shared sample link, let us know if we are missing any steps to replicate the issue:
Also, please make sure if you delay the process of cell edit ending transaction then you would be required to provide the delay before calling startEditing() method for another cell so the grid rendering gets finished properly.
Regards
sdayal
Posted 16 January 2023, 9:29 pm EST - Updated 16 January 2023, 9:38 pm EST
I will try to get the gif.
There is one more bug : when we edit full name and directly click on the subject dropdonw it does not open for the first time.
second scenario bug although the bug got fixed for add button case but As we focusout form full name cell it takes time to focusout in our application drodown flickers for which earlier we added code like: but after above code chnages the issue is reoccurring…
grid.hostElement.addEventListener(
‘click’,
e => {
if (e.target.classList.contains(‘wj-state-active’)) {
grid.startEditing();
const selection = window.getSelection();
selection.collapseToEnd();
}
// SOrting Case
// const ht = grid.hitTest(e);
// if (
// e.target.classList.contains(‘wj-header’) &&
// ht.cellType === wjcGrid.CellType.ColumnHeader
// ) {
// e.preventDefault();
// e.stopImmediatePropagation();
// }
const ht = grid.hitTest(e);
if (ht.col === 4 && ht.cellType !== wjcGrid.CellType.ColumnHeader) {
e.target.parentElement.click();
e.target.parentElement.focus();
setTimeout(() => {
this.grid1.select(ht.row, ht.col);
e.target.parentElement.click();
e.target.parentElement.focus();
}, 0);
}
if (
(e.target.classList.contains(‘wj-header’) ||
e.target.classList.contains(‘mandatory-symbol’)) &&
ht.cellType === wjcGrid.CellType.ColumnHeader
) {
e.preventDefault();
e.stopImmediatePropagation();
}
},
sonu.pandey
Posted 17 January 2023, 3:39 pm EST
Hello,
We apologize but we are unable to replicate the issues at our end, would you please clarify if you are facing the issue with the below-shared sample link too? If yes, please share some screenshots/gifs of the issue or error along with the steps to replicate the issues. If you are facing this issue only in your application but not in the shared sample then it is possible that the issue is arising due to some code specific to your application. Since we are unable to replicate the issue, I would request you share a sample that demonstrates the issue so that we could further investigate the root cause of the issue and assist you accordingly. Without a sample to replicate the issue, we cannot comment on the actual nature of the issue.
Sample link: https://stackblitz.com/edit/angular-fckgbr?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
If your resources are private and you can’t share them here then you may create a ticket on our private support portal and share the resources there
https://www.grapecity.com/my-account/my-support
Regards
sdayal
Posted 17 January 2023, 4:31 pm EST - Updated 17 January 2023, 4:49 pm EST
Hi Wijmo Team,
Yes we are able to reproduce the issue even in the snippet:
In below snippet:
In full name: erin && ieesha cell(full name) I am clicking multiple times even on ‘e’ short name corresponding to erin full name: refer: (Example2)
In brian full name again I am clicking twice refer (example1)
Second Scenario: After editing full name we need to click twice on dropdown and it flickers and sometimes we need to click twice and the dropdown does not closes on add click refer (Example3)
Issue is there in the snippet
Thanks
Example1:
Example2:
Example3:
sonu.pandey
Posted 18 January 2023, 4:21 pm EST
Hello,
Sorry, but we are still unable to replicate your issue shared in examples 1 and 2 at our end. We have tested this behavior on different systems as well but we didn’t replicate the issue on our end. However, we were able to replicate the issue of the dropdown remaining open even on adding a new row in the grid. To resolve this issue you may call the hidePopUp() method inside addNewUser().
Regarding examples 1 and 2, from your shared gif we noticed that the sample was not fully loaded and was still compiling the files. That might be causing this strange behavior at your end. Therefore I have created an offline sample for the same, could you please confirm if you are able to replicate the issue in the below-shared sample zip as well?
Our system configuration:
RAM- 16 GB
Processor- 11th Gen Intel(R) Core™ i7-11850H @ 2.50GHz
Window- Windows 10 Pro
Chrome Version- 109.0.5414.75 (Official Build) (64-bit)
Regards
sdayal
Posted 18 January 2023, 4:38 pm EST - Updated 18 January 2023, 5:04 pm EST
Use laptop touchpad instead of mouse and try. Other configurations are same and RAM is 32 GB
Ans I have created a gif in which all the files are compiled:
sonu.pandey
Posted 18 January 2023, 6:28 pm EST
Hello,
Thank you for the information, we were able to replicate the issue of editing cells on the first click at our end using the shared information. However, we cannot comment on the nature of the issue whether it is an issue with a product or something else. Therefore I have escalated the issue to our Dev team for further investigation with an internal tracking ID WJM-25860. We will provide you with a response as soon as we get an update.
Regards
sdayal
Posted 18 January 2023, 10:12 pm EST
In case if we don’t get a proper solution can we connect with Wijmo team by scheduling a meeting as we are licensed user
sonu.pandey
Posted 19 January 2023, 11:07 pm EST
Hello,
I have asked the Wijmo PM to look into this issue and provide some updates as soon as possible.
However, on our initial investigation, we found that the issue doesn’t seem to be related to Wijmo and can be reproduced anywhere on the web where we have two input fields but with specific laptop models(new models). You can also verify this behavior at your end using the following steps with the below-shared sample:
Perform click only using a laptop touchpad(not button)
In case you have any other issues or need assistance with other requirements then please let us know, and we will schedule a meeting with you.
Sample: Sample.zip
Regards
sdayal
Posted 22 January 2023, 8:40 pm EST - Updated 22 January 2023, 8:48 pm EST
Okay thanks for reply…
We will confirm this. But I have found one more scenario of delay is the below function bcz this is getting called initially as well as if we edit a cell(text value) this I found as one of the reason.
grid.formatItem.addHandler((s, e) => {
})
Here we already formatting the dropdowns value initially can we avoid this formatting after cell edit event bcz if I am editing a full name then idealy it should not run if (col.binding === ‘subjects’) {} block
https://stackblitz.com/edit/angular-yy9ecp?file=src%2Fapp%2Fapp.component.ts
sonu.pandey
Posted 23 January 2023, 8:12 pm EST
Hello,
In your sample, the formatItem event handler is used to create custom editors in cells. When you perform edits to any cell in the grid, the grid re-renders the cell elements again to update them as per the latest content. Thus it’s important to re-apply the formatting done on the cells again after editing or any modification on cells, that is the reason formatItem gets triggered each time the cell is edited or the grid is rendered. Therefore it is being called multiple times in the sample link to re-create the custom editors in cells.
Hope it clears.
Regards
sdayal
Posted 24 January 2023, 3:31 pm EST - Updated 24 January 2023, 10:09 pm EST
I can see this is one of the reason of delay and we don’t want to reapply the dropdowns on text field edit. Is there any way to avoid this?
Although the second issue after we change the short name and click on subjects the dropdonw gets closed is still reproducible in below snippet:
https://stackblitz.com/edit/angular-hfym2t?file=src%2Fapp%2Fapp.component.ts
Apart from this for cell edit delay issue will come up with the sample of our data and connect you with private support soon bcz here we cant post our data
Thanks
sonu.pandey
Posted 26 January 2023, 5:42 pm EST
Hello,
I apologize, but it is not possible to prevent the formatItem event from being triggered after cell edits. This is because custom editors will not be re-rendered into cells again, as I previously explained.
Regarding the issue you mentioned, it is reproducible in the sample you shared. However, this issue has already been resolved and does not occur in the sample link that we provided earlier. You can confirm this by checking the provided link.
https://stackblitz.com/edit/angular-qi7yh5?file=src%2Fapp%2Fapp.component.ts
Regards
