Update password in the grid with password match option

2 posts, 0 answers
  1. JOHNY
    JOHNY avatar
    9 posts
    Member since:
    Oct 2012

    Posted 20 Mar 2013 Link to this post

    Hi Telerik team
       I have a grid with InCell editing
          .Name("UserDetailsGrid").Editable(editable=> editable.Mode(GridEditMode.InCell) )

     This grid has a column Password      
       columns.Bound(p=> p.Password).ClientTemplate("***").Title("Password").Width(200);

       On  Edit / Create New  I need to have
    a password confirm option which will force the user to type the password two times.

       This is required because I am not
    displaying the password to the user in the grid. I am displaying it using
     ClientTemplate("***") which will show * on the grid 

      Can you help me to solve this issue. This way or some other better way.
     
    Thanks

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Mar 2013 Link to this post

    Hello Johny,

    Basically to achieve such behavior you will have to create custom editor template like explained here and also combine it with the save event of the Grid - so you can perform that custom validation.

    Here is an example :
    //specify custom editor
     
    columns.Bound(c => c.Password).EditorTemplateName("password");
     
    //... add handler to the save event
     
     .Events(ev=>ev.Save("onSave"))   
     
    // declare the save handler
     
    <script type="text/javascript">
        function onSave(e) {       
            if (!e.model.get('Password') || e.model.get('Password') != $('#rpt').val()) {
                e.preventDefault(); //prevent from saving if the values does not match
            }
        }
    </script> 

    The custom editor should be something like this:

    @model string
      
    @Html.PasswordFor(m=>m)
    <br />
    <input type="password" id="rpt" />


    I hope this helps.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top