Conditionally hide/show an icon added via the AddIcon() method

[Sergio Sant'Anna]

Hi,

I would like to know how to conditionally hide/show an icon added via the AddIcon() method.

I have a textbox with 2 icons that are added in the Created event, I need to conditionally hide only the first one.

//First
await _textBoxRef.AddIcon("append", "e-icons e-circle-close-2", new Dictionary<string, object>() { { "onmouseup", clearSelectionMouseUp } });


//Second
 await _textBoxRef.AddIcon("append", "e-icons e-chevron-down-fill", new Dictionary<string, object>() { { "onmouseup", openDialogMouseUp } });

Regards,

Sérgio Sant'Anna

[Vinitha Jeyakumar]

Hi Sergio,

We have created a sample as per your requirement using jsInterop to hide the icon added using AddIcon method. please check the code below,

Code snippet:

@inject IJSRuntime jsRuntime

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <SfButton OnClick="click">Hide 1st icon</SfButton>

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">

                <SfTextBox @ref="TextBoxDropDownObj" ID="textBox" Placeholder="Country" FloatLabelType="@FloatLabelType.Auto" Created="@AddDropDownIcon"></SfTextBox>

            </div>

        </div>

    </div>

</div>

@code  {

    SfTextBox TextBoxDropDownObj;

    SfTextBox TextBoxDateObj;

    SfTextBox TextBoxUploadObj;

    public bool flag = true;

    public void AddDropDownIcon()

    {

 this.TextBoxDropDownObj.AddIconAsync("append", "e-icons e-chevron-down");  

           this.TextBoxDropDownObj.AddIconAsync("append", "e-icons e-agenda-date-range");

      

    }

    public async Task click()

    {

        await jsRuntime.InvokeAsync<object>("accessDOMElement");

    }

}

Host.cshtml

<script>

        function accessDOMElement() {

            document.getElementsByClassName("e-icons e-chevron-down")[0].style.display = "none";

        }

    </script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Text_iconHide191684111

In the above sample, we hidden the first icon on a button click. similary, you can hide the icon based on your requirement.

Regards,

Vinitha

[Sergio Sant'Anna]

Hi Vinitha,

This solved the problem.

Thank you!

Sergio Sant'Anna

[Sureshkumar P]

Sergio, 

 

Thanks for your update. 

 

Regards, 

Sureshkumar P