Custom Client-side Implementation

13 posts, 0 answers
  1. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 02 Oct 2010 Link to this post

    Hello,
    I have an MVC view where I want the functionality of presenting a dialog to upload a file. I was thinking about using a hidden RadAsyncUpload control, and customizing the UI. For example, i have a link with text '[Upload File'], and clicking this pops open the dialog, and I show the selected file path inside a div.
    Is this possible? What relevant client-side methods would i need, e.g. to open the dialog?
    Thanks!
    Pete
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 06 Oct 2010 Link to this post

    Hello Pete,

    To approaches here.

    The first one is to set EnableEmbeddedStyleSheets property of RadAsyncUpload to false and write your own skin with the desired view.

    The second approach is to put the async upload inside an absolutely positioned div with opacity zero. Then position the div above the label [Upload File].

    I hope that this helps.

    Greetings,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 06 Oct 2010 Link to this post

    Hi Genady,
    Can you please give me a simple example of the second option? I'm not sure I understand
    Thanks
    Pete
  4. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 11 Oct 2010 Link to this post

    Hello Pete,

    You can find a sample as an attachment. The sample can upload a single file only.

    Sincerely yours,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 11 Oct 2010 Link to this post

    Hi Genady,
    I'm using MVC, and using almost identical code in my view that you've supplied, I'm having no luck. (can't get anything to happen)
    Thanks
    Pete

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    <%@ Register Assembly="Telerik.Web.UI" TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
        CustomSkin
    </asp:Content>
     
    <asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
     
    <style type="text/css">
            .invisible
            {
                opacity:0;
                position:absolute;
                filter:alpha(opacity=100);
                top:0px;
                left:0px;
            }
             
        </style>
     
         <script type="text/javascript">
             var uploadsInProgress = 0;
     
             function uploading(sender, args) {
                 uploadsInProgress++;
                 $telerik.$(".container").html("uploading");
             }
     
     
             function uploaded(sender, args) {
                 uploadsInProgress--;
                 if (!uploadsInProgress) {
                     $telerik.$(".container").html("uploaded");
                 }
             }
        </script>
     
    </asp:Content>
     
     
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
        <h2>Custom Skin</h2>
        <div>
         
            <span class="container">
                [Select file]
            </span>
             
            <div class="invisible">
            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileUploading="uploading"
                OnClientFileUploaded="uploaded">
            </telerik:RadAsyncUpload>
            </div>
     
        </div>
        </form>
     
    </asp:Content>
  6. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 15 Oct 2010 Link to this post

    Hello Pete,

    This is expected. The CSS I've given you is just a sample. Please take a look at the Top and Right declarations. You need to modify them in accordance to your scenario. For example, for a default ASP.NET MVC WebProject the correct  top value is 190px. Remeber that this values specify how much pixels should the container be place with respect to the upper left corner. The easiest way to fine tune this is to use FireBug and its layout tab.

    Kind regards,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 15 Oct 2010 Link to this post

    ok, i see what you're saying. I was hoping i could just call it's click method from another action, but i guess that's not possible? One more thing, i'm having trouble setting the width of the control. Because i want to overlay it directly over my other link, i want it to have the same dimensions. Can you suggest best way to do that? Setting width on the control and width on container div element is not working
  8. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 21 Oct 2010 Link to this post

    Hi Pete,

    Please use the InputSize property of RadAsyncUpload. It accepts an integer value which specifies how much columns should the text box contain. The async upload's default is 22. You can increase it in order to make it match your layout better.

    All the best,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 21 Oct 2010 Link to this post

    Not working. Changing InputSize has no effect:

    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
      HttpHandlerUrl="~/Helpers/UploadHandler.ashx"
      AllowedFileExtensions= ".csv, .txt, .xml, .xls, .xlsx"
      OverwriteExistingFiles="true"
      InputSize="5"
      AllowedMimeTypes="text/plain, text/csv, application/vnd.ms-excel, text/xml, application/xml"
                        >
    </telerik:RadAsyncUpload>

  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 27 Oct 2010 Link to this post

    Hello Pete,

    This is strange, the property should be working. Which version of the controls do you use? Here is screenshot of InputSize 5 on a test project. It is visible that the width of the text box is significantly reduced.

    Regards,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 27 Oct 2010 Link to this post

    Eureka! 
    I had a style applied to all text-type inputs: input[type="text"] 
    This was overriding the InputSize
    Problem solved
    Thanks!
  12. Pete
    Pete avatar
    17 posts
    Member since:
    Sep 2010

    Posted 29 Oct 2010 Link to this post

    Hey Genady,
    One more thing here. What's the best way to change the style to my [Upload File] text on a mouseover? I want to make it look like a real link, e.g. change cursor to a pointer on a hover, etc.

    I can't seem to capture the hover event tho, tried this in jQuery which doesn't work:

    $(".ruFakeInput").hover(function() {
              alert('hover1');
          });
     
     
          $(".ruButton").hover(function() {
              alert('hover2');
          });
            
           $(".ruFakeInput").mouseover(function() {
              alert('hover1');
          });
     
     
          $(".ruButton").mouseover(function() {
              alert('hover2');
          });

    Any suggestions?
    Thanks!
    Pete

     $(".ruFakeInput").hover(function() {
                alert('hover1');
            });


            $(".ruButton").hover(function() {
                alert('hover2');
            });
             
             $(".ruFakeInput").mouseover(function() {
                alert('hover1');
            });

    $(".ruFakeInput").hover(function() {
              alert('hover1');
          });
     
     
          $(".ruButton").hover(function() {
              alert('hover2');
          });
            
           $(".ruFakeInput").mouseover(function() {
              alert('hover1');
          });
     
     
          $(".ruButton").mouseover(function() {
              alert('hover2');
          });

      
      $(".ruFakeInput").hover(function() {
                alert('hover1');
            });


            $(".ruButton").hover(function() {
                alert('hover2');
            });
             
             $(".ruFakeInput").mouseover(function() {
                alert('hover1');
            });


            $(".ruButton").mouseover(function() {
                alert('hover2');
            });
         $(".ruButton").mouseover(function() {
                alert('hover2');
            });
      $(".ruFakeInput").hover(function() {
                alert('hover1');
            });


            $(".ruButton").hover(function() {
                alert('hover2');
            });
             
             $(".ruFakeInput").mouseover(function() {
                alert('hover1');
            });


            $(".ruButton").mouseover(function() {
                alert('hover2');
            }
  13. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1600 posts

    Posted 03 Nov 2010 Link to this post

    Hello Pete,

    I suggest that you try the following JavaScript:

    $(".ruFileWrap", $get("RadAsyncUpload1"))
                   .live("hover", (function(e) { alert('mousein') }, function(e) { alert('mouseout') }));


    Greetings,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top