Intergrating jquery ui

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    2 posts
    Member since:
    Feb 2013

    Posted 05 Apr 2013 Link to this post

    Hi All,

    I'll put my hand up now and say I am a javascript n00b so I don't even know if my question is possible. The long and the short of it is that my client wants to have to enter a password whenever they open a file from the RadFileExplorer (they are a little paranoid about security). Now I've managed to figure out how to do this using a mixture of page methods and javascript but the problem is the password dialog that is displayed is just a javascript prompt box and as such the password they are entering isn't masked like a normal password box would be. After some research I discovered that the only way to make it a masked password box was to use something like jquery ui to create a modal popup that contains a password masked textbox - my problem - how the &*^@ do I intergrate that into my solution? You will see in my code that I call a 'prompt' box and this is obviously where the jquery ui box needs to be but I just have no clue about how to do this.

    Any help or direction would be greatly appreciated.

    Oh....here's my code :)

    function OnClientFileOpen(sender, args) {
        args.set_cancel(true);
        var password = prompt("Enter Password");
        PageMethods.MyAuthorisationMethod(password, onSuccess, onerror);
        function onSuccess(response) {
            if (response == true) {
                var item = args.get_item();
                var fileExtension = item.get_extension();
     
                var fileDownloadMode = true;
                if ((fileDownloadMode == true) && (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "doc" || fileExtension == "mp3" || fileExtension == "txt")) {// Download the file
                    // File is an image document or a word document, do not open a new window
                    args.set_cancel(true);
     
                    // Tell browser to open file directly
                    var requestImage = "Handler.ashx?path=" + item.get_url();
                    document.location = requestImage;
                }
            }
            else { alert("The password entered is incorrect"); }
        }
     
    }
  2. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 08 Apr 2013 Link to this post

    Hi Jeff,

    The desired behavior could not be achieved with the default prompt, but you could use the RadPrompt, which template could be customized to use <input type="password">. Detailed information on the subject is available in the following online resources:
    Change the templates of the predefined dialogs (radalert, radconfirm and radprompt)
    Window - Alert, Confirm and Prompt

    In order to prevent the PageMethod to be executed before the password is entered, you have to move it to the RadPrompt's Callback function:
    function OnClientFileOpen(sender, args) {
        args.set_cancel(true);
        radprompt("Enter Password", promptCallback, 300, 190);
     
        function promptCallback(arg) {
            PageMethods.MyAuthorisationMethod(arg, onSuccess, onerror);
        }
     
        function onSuccess(response) {
            if (response == true) {
                var item = args.get_item();
                var fileExtension = item.get_extension();
     
                var fileDownloadMode = true;
                if ((fileDownloadMode == true) && (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "doc" || fileExtension == "mp3" || fileExtension == "txt")) {// Download the file
                    // File is an image document or a word document, do not open a new window
                    args.set_cancel(true);
     
                    // Tell browser to open file directly
                    var requestImage = "Handler.ashx?path=" + item.get_url();
                    document.location = requestImage;
                }
            }
            else { alert("The password entered is incorrect"); }
        }
    }

    For your convenience I am attaching a sample project, demonstrating the approach.

    Regards,
    Veselina Raykova
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top