Cell responsive icon for password

I want the password cell to have an eye icon that is responsive when clicking. When I click the eye icon the password must hide.Screenshot (421).png


3 Replies

RS Renjith Singh Rajendran Syncfusion Team November 25, 2021 02:36 PM UTC

Hi Belle, 
 
Greetings from Syncfusion support. 
 
We suggest you to use the Column Template feature of Grid to customize a Grid cell’s display based on your requirement. 
References :  
 
We have also prepared a sample based on this requirement for your convenience, please download the sample from the link below, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 



BC Belle Cruz November 27, 2021 03:45 AM UTC

When I click the eye icon the password like user will hideeye.png



RS Renjith Singh Rajendran Syncfusion Team November 29, 2021 10:11 AM UTC

Hi Belle, 
 
We are not clear about your exact requirement. We suspect that you would like to display the Password column contents at initial rendering itself and when clicking on eye icon show the text in Password column. If so then we suggest you to check for the not condition as like below highlighted code. 
 
<GridColumn HeaderText="Password" TextAlign="TextAlign.Center" Width="120"> 
    <Template> 
        @{ 
            var employee = (context as EmployeeData); 
            <div class="e-icons e-eyeicon" @onclick="() => onclick(employee.EmployeeID, employee.ShowOrHidePassWord)"></div> 
            <div class="template_checkbox"> 
                @if (!employee.ShowOrHidePassWord) 
                { 
                    <div>@employee.LastName</div> 
                } 
            </div> 
        } 
    </Template> 
</GridColumn> 
 
 
 
And also we would like to inform you that you can customize the Grid cell’s display based on your requirement using this Column Template feature. So we suggest you to customize your codes inside Template based on your requirement. 
 
If you are still facing any difficulties then kindly get back to us with a detailed explanation of your exact/complete requirement along with a video demo explaining your requirement or the problem you are facing to proceed further. 
 
Regards, 
Renjith R 


Loader.
Up arrow icon