0

I have a lightning component which is basically a filter having two buttons, Apply All and Clear All. I would like to remove the selected values on a button click "Clear All"

The filter looks like below when the values are selected: enter image description here

The "Clear All" button should be able to remove the values from the drop down selection.

Component Markup:

<div class="slds-panel__header slds-hide" aura:id="P-Panel"> 
    <lightning:button variant="neutral" label="Clear All" onclick="{! c.ClearAll }" />
    <lightning:button variant="brand" label="Apply All" onclick="{! c.ApplyAll }" />
</div>
<br/>

<div class="slds-size_medium slds-hide" aria-hidden="true" aura:id="P-Panel">

    <!-- Start of Program Type-->         
    <div class="slds-combobox_container">
        <div class="slds-text-heading_small">ProgramType</div>
        <div aura:id="program" class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-expanded="false" aria-haspopup="listbox" role="combobox">
            <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                <input type="text" class="slds-input slds-combobox__input" id="combobox-id-1" aria-controls="listbox-id-1" autoComplete="off" role="textbox" placeholder="{!v.PinfoText}" readonly="" onclick="{!c.handleClick}" onmouseleave="{!c.handleMouseOutButton}" />
                <span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
                    <lightning:icon iconName="utility:down" size="x-small" class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" />
                </span>

            </div>

            <div class="{!'slds-dropdown  slds-dropdown_fluid slds-dropdown_length-5' + v.dropdownLength}" onmouseenter="{!c.handleMouseEnter}" onmouseleave="{!c.handleMouseLeave}" role="listbox">
                <ul class="slds-listbox slds-listbox_vertical" role="presentation">
                    <aura:iteration items="{!v.picklistArr}" var="option" indexVar="index">

                        <li class="slds-listbox__item" role="presentation" data-id="chkmark" onclick="{!c.handleSelection}"  data-value="{!option.value}" data-selected="{!option.selected}">

                            <div class="{!' slds-media  slds-listbox__option_plain slds-media_small slds-listbox__option ' + (option.selected == true ? ' slds-is-selected' : '')}" role="option">
                                <span class="slds-media__figure">
                                    <lightning:icon iconName="utility:check" size="x-small" class="slds-icon-utility-check slds-current-color slds-listbox__icon-selected slds-icon_container" />
                                </span>{!option.value}

                            </div>

                        </li>
                    </aura:iteration>
                </ul>
            </div>
        </div>
    </div>

I am seeking help on the Java script controller function ClearAll, which can remove all the selected values on the press of a button.

Kindly advise

0

If you use data-selected attribute while displaying the drop down value, then on click on Clear all button, in controller you just need to set false to data-selected attribute. Like below -

<aura:attribute name="options_" type="String[]" />
<aura:iteration items="{!v.options_}" var="option">
    <li class="{!'slds-dropdown__item ' + (option.selected ? 'slds-is-selected' : '')}" role="presentation" onclick="{!c.handleSelection}" data-value="{!option.Name}" data-selected="{!option.selected}">
        <a href="javascript:void(0);" role="menuitemcheckbox" aria-checked="true" tabindex="0">
            <span class="slds-truncate">
                <lightning:icon iconName="utility:check" size="x-small" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small" />
                {!option.Name}
            </span>
        </a>
    </li>

</aura:iteration>
<lightning:button variant="neutral" label="Clear All" onclick="{! c.ClearAll }" />

ClearAll: function(component, event, helper) {

    var allOptions = component.get("v.options_");
    allOptions.forEach(function(val){
      if(val.selected != undefined){
        val.selected = false;  //Making all selected dropdown values to false.
      }
    });
    component.set("v.options_", allOptions);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.