Make column password hidden with eye symbol

[Stefan Habets]

Hello,

I would like to mark a field as type password so it shows the *** with an eye symbol in my grid. When I edit in the dialog I want this functionality.

Greetings,

Stefan Habets

Attachment: webusers_a218afc4.zip

[Rajapandi Ravi]

Hi Stefan,

Greetings from Syncfusion support

Based on your query, it seems that you want to display the Password column value as a password type in edit mode instead of showing its actual value. This can be achieved using the Grid's edit parameters feature. The default TextBox component in the Grid's edit form can be customized using its properties, and the editor component's behavior can be adjusted through the columns->edit->params property.

For your convenience, a sample has been provided where the TextBox component's type is set to "password" using the edit parameters feature. Please refer to the code example and sample below for more details.

App.component.ts

 

public passwordparams: any;

 

public ngOnInit(): void {

        this.data = orderDetails;

        this.passwordparams = {params: {type: 'password'}};

    }

 

App.component.html

 

<ejs-grid #grid id='Grid' [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar'>

        <e-columns>

            .  .  .  .  .  .  .  .  .  .

            .  .  .  .  .  .  .  .  .  .            

            <e-column field='CustomerName' headerText='Customer Name' [edit]='passwordparams' width='120' ></e-column>

            .  .  .  .  .  .  .  .  .  .

            .  .  .  .  .  .  .  .  .  .

        </e-columns>

    </ejs-grid>

 

 

Sample: https://stackblitz.com/edit/angular-pmbbeqjt-4vkulbuc?file=src%2Fapp.component.ts,src%2Fapp.component.html

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types#customize-textbox-component-of-stringedit-type

Screenshot:

Regards,

Rajapandi R

[Stefan Habets]

Thank you Rajapandi, this works for me

[Rajapandi Ravi]

Stefan,

We are happy to hear that the provided solution was helpful.

Please get back to us if you need any other assistance.