Show/hide the MultiSelect's groupBy text depending from the number of selectable items left in that group

[Ignacy Mielniczek]

Hello,

I would like to ask you if there are any way to show/hide the MultiSelect's groupBy text depending from the number of selectable items left in that group? Show if there are one or more selectable items or hide when there are no selectable items left in that group. 

I am using the Syncfusion MultiSelectDropDown v. 19.4.42.

Best Regards,

Ignacy Mielniczek

[Ponmani Murugaiyan]

Hi Ignacy, 

You can disable the items in the list using the itemCreated in fields property in the initial rendering.  

Sample: https://stackblitz.com/edit/angular-jpjb1c-luomlo?file=app.component.html 

public fields: Object = { 

    groupBy: 'Category', 

    text: 'Vegetable', 

    value: 'Id', 

    itemCreated: (e) => { 

      if (this.disableItems.indexOf(e.curData.Id) > -1) { 

        e.item.classList.remove('e-list-item'); 

        e.item.classList.add('e-disable-list-item'); 

        e.item.classList.add('e-disabled'); 

      } 

    }, 

  }; 

If you would like to disable the items dynamically you need to iterate through the list items and disable the li using the style display or add attribute e-disabled. 

  function onOpen() { 

        setTimeout(function (e) { 

            var instances = document.getElementById('vegetable').ej2_instances[0]; 

            var LIElement = instances.popupObj && instances.popupObj.element.getElementsByClassName('e-list-item'); 

            var LICount = LIElement.length; 

            for (var item = 0; item < LICount; item++) { 

                var LIvalue = LIElement[item].getAttribute('data-value'); 

                if (LIvalue == value) { 

                    if (isDisable) { 

                        LIElement[item].style.display = "none"; 

                    } else { 

                        LIElement[item].style.display = "block"; 

                    } 

                } 

            } 

        }, 100) 

Regards, 

Ponmani M 

[Ignacy Mielniczek]

Hello Ponmani,

Thank you very much for a quick response. 

However, the example which you have shown above just is not working in Typescript. I am facing the following problems when I chose to use the dynamic approach in my project:

I have encountered an error Property 'ej2_instances' does not exist on type 'HTMLElement', when I tried to get the instances like you have shown above and tried to access its ej2_instances[0].

const instances = document.getElementById('abc').ej2_instances[0];

Luckily, I was able to find a fix to that problem by importing and using the getInstance method from '@syncfusion/ej2-base'. 

import {getInstance} from '@syncfusion/ej2-base';

const instance = getInstance(document.getElementById('assignedAuthors'), MultiSelectComponent);

But now I am encountering a new error 'Property 'popupObj' does not exist on type 'Object' on the next line, where I want to get the 'e-list-item' from this instance.

const LIElement = instance.popupObj && instance.popupObj.element.getElementsByClassName('e-list-item');

Best Regards,

Ignacy Mielniczek

Attachment: Multiselect_iteration_over_popup_items_eff36063.rar

[Ponmani Murugaiyan]

Hi Ignacy, 

You can resolve this issue by using as any type as like below code snippet. Please find the sample below for reference. 

Sample: https://stackblitz.com/edit/angular-jpjb1c-sx95w5?file=app.component.ts 

var instances = (document.getElementById('sample-list1') as any).ej2_instances[0]; 

Regards, 

Ponmani M 

[Ignacy Mielniczek]

Hello Ponmani,

Thank you very much for a quick reply.

Unfortunately, the code you provided didn't work. I was still facing the same issue 'Property 'popupObj' does not exist on type 'Object' again on the next line when I tried to get the e-list-group-items.

However, I was able to resolve all the issues by myself with a little bit different approach. I am sharing it in case if anyone faces the same problems as me:

const popInstance = (document.getElementById('{MULTISELECT_ID}_popup') as any).ej2_instances[0];
const liElements = popupInstance.element.getElementsByClassName('e-list-group-item');

Best Regards,

Ignacy Mielniczek

[Ponmani Murugaiyan]

Hi Ignacy, 

Thanks for the update, we are glad to hear that the issue has been resolved. 

Regards, 

Ponmani M