Show 'ALL' checkbox in dropdown if dropdown is empty

Show 'ALL' checkbox in dropdown if dropdown is empty

Posted by: technical.store.technical on 22 June 2021, 7:36 am EST

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 June 2021, 7:36 am EST - Updated 3 October 2022, 1:24 pm EST

  Hi Team,

  How can I show only ‘ALL’ checkbox in dropdown if the dropdown is empty.
  
  Example -
  
  For 2nd row - Subjects = “French” and SubSubjects = “11, 12”.
  
  Subsubjects dropdown is getting filtered based on the value present in the subjects column cell in the same row.
  
  So, Subject = “French” is not present in the dropdown of subjects column so my dropdown for subSubjects is empty (because subject = “French” has no associated subsubjects collection) and it is disabled in the sample.
  
  Now, my requirement is - when subsubjects dropdown is empty then the dropdown should be active and should show ‘ALL’ checkbox in it.

  https://stackblitz.com/edit/angular-jzx84h?file=src/app/app.component.ts

  Image of how dropdown should look like -
  
  Thank you.

  Can you please provide solution for the above issue.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 22 June 2021, 7:46 am EST

  Updated Sample -
  
  https://stackblitz.com/edit/angular-jzx84h?file=src/app/app.component.ts

  Regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 4:52 am EST

  Hi team,

  Can you please provide solution for the above issue.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 June 2021, 11:21 pm EST

  Hi,

  We are working on this and will update you as soon as possible.

  Regards,
  
  Ashwin

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 25 June 2021, 5:58 am EST

  Hi Ashwin,

  Is there any update ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2021, 8:14 am EST

  Hi,

  To achieve the mention functionality, you need to check the subSubject column which has no items in the collectionView, and push the ALL inside the items. And to check the ALL at the time of initialization you need to push the new item into the checkedItems array of multiSelect. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-d6garh

  Also to you need to remove the wj-state-disabled class from the multiSelect to show drop down. Please refer to the sample.

  Regards,
  
  Ashwin

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 28 June 2021, 2:28 am EST

  Hi Ashwin,

  1. This is not our requirement, we want single ‘ALL’ value in dropdown .
     
     In your snippet we can see ‘All’ and ‘ALL’ in dropdown. We want single ‘All’ in our dropdown.

  2. Also, This code works if you have direct data. This doesn’t work when we load data from the server because we don’t know the delay time. Is there any function or method in which we can run the enabling dropdown icon code.

  
  setTimeout(() => {
        let ele = document.querySelectorAll('.wj-input-group-btn');
        ele.forEach(btn => {
          if (wjcCore.hasClass(btn, 'wj-state-disabled')) {
            btn.classList.remove('wj-state-disabled');
            btn.children[0].removeAttribute('disabled');
          }
        });
      }, 100);
  
  

  https://stackblitz.com/edit/angular-be7sbh?file=src/app/app.component.ts
  
  In above snippet, We are not getting dropdown icon enabled because of the code execution sequence and we don’t want to increase the delay.

  Is there any other event which will work after initialized event.

  Thanks.

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 28 June 2021, 2:37 am EST - Updated 3 October 2022, 1:24 pm EST

  We only want the highlighted part in dropdown if we don’t have data.
  
  Image : -

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 29 June 2021, 12:26 am EST

  Hi team,

  Can you please provide solution for the above issue.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 June 2021, 11:35 pm EST

  Hi,

  1. The all checkBox is displayed when all the items inside the multiSelect are checked. So if we add only the all to the multiSelect the dropDown will not open as there will be no data to display. However, you can show the ALL in the dropDown which will be displayed on the multiSelect input. You also need to set the showSelectAllCheckbox property to false in order to show only one ALL checkbox in the dropdown.

  2. To resolve the issue regarding the delay, you may use the updatedView event of FlexGrid, which gets fired after the grid finishes creating/updating the elements that make up the current view.

  Please refer to the sample demonstrating both points:

  https://stackblitz.com/edit/angular-dks7bt

  ~regards

• 

  technical.store.technical

  • Post Options:
  • Link
    Copy

  Posted 2 July 2021, 9:22 am EST

  Hi Ashwin,

  There is one issue with the above solution.
  
  When i click on 2nd row subsubjects column cell - it is getting cleared and ALL value is getting displayed in the dropdown.
  
  But after doing this if I add a new row or do pagination then the previous data appears on that cell.

  https://stackblitz.com/edit/angular-gvpp2r?file=src/app/app.component.ts

  Please Provide solution.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 July 2021, 6:08 am EST

  Hi,

  I have updated the sample to not hide the ‘ALL’ value from the input element when the drop-down is displayed. Refer to line 105 where I have pushed the ALL value to the checkedItems:

  https://stackblitz.com/edit/angular-fycn3i

  ~regards