cell text password field

[Christopher Scholl]

I have a password field that needs to show as **** but still be edited.  How can not only display the grid field as a password field but also edit the field without displaying the characters?

[Renjith Singh Rajendran]

Hi Christopher, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We have prepared a sample based on your requirement which could be downloaded from the link below, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionASPNETWebApplication7-1086033790 

We have achieved your requirement by using the cell edit template feature and QueryCellInfo event of Grid control. While rendering the Grid, we have modify the innerText of the Password column row element in the QueryCellInfo event. In editing the Grid record we have render the input text box as password text box and it will show the dot values in the input box instead of showing original values. 

Refer the below code example. 

<ej:Grid ID="OrdersGrid" runat="server" AllowSorting="True" AllowPaging="True"> 

            ... 

           <Columns> 

                ... 

               <ej:Column Field="ShipCity" HeaderText="Password" TextAlign="Right" Width="80"> 

                    <EditTemplate Create="create" Read="read" Write="write"/> 

                </ej:Column> 

            </Columns> 

       <ClientSideEvents QueryCellInfo="queryCellInfo" /> 

</ej:Grid> 

 

     <script type="text/javascript"> 

         function create() { 

             return $("<input type='password' >"); 

         } 

 

         function write(args) { 

             args.element.val(args.rowdata.ShipCity); 

         } 

 

         function read(args) { 

             return args.val(); 

         } 

 

         function queryCellInfo(args) { 

 

             if (args.column.field == "ShipCity") { 

                 args.cell.innerText = "*********"; 

             } 

         } 

      </script> 

Please refer the documentation links below, 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

https://help.syncfusion.com/aspnet/grid/editing#cell-edit-template 

Regards, 

Renjith Singh Rajendran. 

[Christopher Scholl]

Thank you that worked perfectly

[Renjith Singh Rajendran]

Hi Christopher, 

We are happy to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.