Dropdown getting freezed in wijmo grid

Dropdown getting freezed in wijmo grid

Posted by: technical.store.technical on 8 July 2021, 4:16 am EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 July 2021, 4:16 am EST

  Hi team,

  In below snippet i’ve few things.

  1. startEditing - for making the full name column editable on first click

  2. got focus - for getting the cell highlighted.
     
     So after adding these two things I’m getting few issues: -

  3. On first click of any cell with dropdown- the dropdown get close at first time.

  4. dropdown is getting freezed.

  Steps to reproduce the 2nd issue:

  1. click on any full name cell and then keep clicking on the different dropdowns of different columns . the dropdown freezes .

  Snippet of the above code : -
  
  https://stackblitz.com/edit/angular-u9hewt?file=src/app/app.component.ts

  please provide solution for this issue.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 9 July 2021, 12:34 am EST

  Hi team,

  Please provide solution.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 10 July 2021, 1:06 am EST

  Hi team,

  Please provide solution.

  Thank you.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 12 July 2021, 7:16 am EST

  Hi team,

  Please provide solution.

  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2021, 7:32 am EST

  Hi

  The issue is observed because cellEditEnded event is being fired after gotFocus event of multi select.
  
  To resolve this issue you may add and remove wj-state-active and wj-state-selected css class by handling gotFocus/lostFocus event of multiselect and combobox as follows -

  gotFocus: s => {
             let currentActive = document.querySelector(
               '.wj-state-active.wj-state-active'
             );
             if (currentActive) {
               currentActive.classList.remove('wj-state-selected');
               currentActive.classList.remove('wj-state-active');
             }
  
             let ac = s.hostElement.parentElement;
  
             ac.classList.add('wj-state-active');
             ac.classList.add('wj-state-selected');
           },
           lostFocus: (s, e) => {
             if (s.hostElement.parentElement) {
               s.hostElement.parentElement.classList.remove('wj-state-selected');
               s.hostElement.parentElement.classList.remove('wj-state-active');
             }
           }
  

  For better understanding you may refer to the below code sample -
  
  https://stackblitz.com/edit/angular-gnfif7?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 13 July 2021, 3:47 am EST

  Hi sharad,

  Thank you .