RadUpload inside several other controls

Thread is closed for posting
13 posts, 1 answers
  1. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 14 Apr 2010 Link to this post

    Hi,

    I'm having some problems regarding the radupload and radajaxpanel controls. In my page I have one radajaxpanel, inside of it I have a RadMultiPage and in one of the MultiPages exists one UserControl and one radgrid just below. Inside of this UC I have another radajaxpanel (with the ClientEvents-OnRequestStart defined so the RadUpload can upload the files) with one table, one radupload, one button (to upload) and a repeater to show the already uploaded files.

    My problem regards the behavior of the radajaxpanel inside the UserControl because it expands when I click to create a new upload form but the outer page doesn't, witch causes the usercontrol to expand behind the radgrid.

    Is there any way I can disable the ajax to the update button only from the main page or force the main radajaxpanel to expand with the inner ajaxpanel?

    Thanks in advance.
  2. Answer
    Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 15 Apr 2010 Link to this post

    Hello Rui Lopes,

    In order to disable the update button only you can use the technique described here. (under the heading Workaround for RadGrid for ASP.NET AJAX).

    Best wishes,
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 20 Apr 2010 Link to this post

    Situation resolved. Actually there was no need to use the Workaround for RadGrid for ASP.NET AJAX.

    It was, since the beginning, an error of my own. When I dragged the RadAjaxPanel from the ToolBox it automatically used the default Width and Height. That was the reason why the main page didn't grown with the UserControl. Without those attributes the page is working great.

    Thank you for your time and sorry for taking so long to respond.
  5. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 20 Apr 2010 Link to this post

    Now I have another situation regarding the same Upload.

    I've customized the template so I could have 2 labels and 1 textbox like Genady Sergeev  said in here with JQuery. My code is:
    var idAddField = radUpload.getID("additional"); 
    $(".ruInputs li[class='']:last span").each(function(i) 
        { 
            var labelTitle = CreateLabel("<%=Resources.OperationalControl.Resource.String_Title %>", idAddField.id); 
            var input = CreateInput("Title", "text"); 
            inputinput.id = input.name = radUpload.getID(input.name); 
            var label1 = CreateLabel1("*", idAddField.id); 
            var label = CreateLabel("<%=Resources.OperationalControl.Resource.String_File %>", idAddField.id); 
            var radupload=$(this); 
            var table=$('<table><tr><td class="tdTitle"></td><td class="txtTitle"></td><td class="tdFile"></td><td class="upload"></td></tr></table>'); 
            table.insertBefore(radupload); 
            table.find('td.tdTitle').append(labelTitle); 
            table.find('td.txtTitle').append(input); 
            table.find('td.txtTitle').append(label1); 
            table.find('td.tdFile').append(label); 
            table.find('td.upload').append(radupload); 
        }); 
     

    The problem is that the Remove Button is now under the created template. I would like it to be after the upload control. Another column in the table. I thought about creating another table column so I could append the Remove Button but I have no idea how to get the control. Something similar to:
    var idAddField = radUpload.getID("additional"); 
    $(".ruInputs li[class='']:last span").each(function(i) 
        { 
            var labelTitle = CreateLabel("<%=Resources.OperationalControl.Resource.String_Title %>", idAddField.id); 
            var input = CreateInput("Title", "text"); 
            inputinput.id = input.name = radUpload.getID(input.name); 
            var label1 = CreateLabel1("*", idAddField.id); 
            var label = CreateLabel("<%=Resources.OperationalControl.Resource.String_File %>", idAddField.id); 
            var radupload=$(this); 
            var table=$('<table><tr><td class="tdTitle"></td><td class="txtTitle"></td><td class="tdFile"></td><td class="upload"></td><td class="RemoveButton"></td></tr></table>'); 
            table.insertBefore(radupload); 
            table.find('td.tdTitle').append(labelTitle); 
            table.find('td.txtTitle').append(input); 
            table.find('td.txtTitle').append(label1); 
            table.find('td.tdFile').append(label); 
            table.find('td.upload').append(radupload); 
            table.find('td.RemoveButton').append(REMOVEBUTTON); 
        }); 
     

    Is there any way I could do this? Thank you in advance.
  6. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 22 Apr 2010 Link to this post

    Can anyone help me out with this "little" problem? I still can't figure it out....
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 23 Apr 2010 Link to this post

    Hi Rui Lopes,

    I have managed to workaround the issue you experience with the following code:

    function onClientAddedHandler(radUpload, args) {
        var idAddField = radUpload.getID("additional");
        $(".ruInputs li[class='']:last span").each(function(i) {
            var labelTitle = CreateLabel("TestLabel", idAddField);
            var input = CreateInput("Title", "text");
            input.id = input.name = radUpload.getID(input.name);
            var label1 = CreateLabel("*", idAddField);
            var label = CreateLabel("TestLabel2", idAddField);
            var table = $('<table><tr><td class="tdTitle"></td><td class="txtTitle"></td><td class="tdFile"></td><td class="upload"></td></tr></table>');
            table.insertBefore(args.get_row());
            table.find('td.tdTitle').append(labelTitle);
            table.find('td.txtTitle').append(input);
            table.find('td.txtTitle').append(label1);
            table.find('td.tdFile').append(label);
        });
    }
     
    function CreateLabel(content, id) {
        return $("<label>" + content + "</label>").attr("for", id);
    }
     
    function CreateInput(content, id) {
        return $("<input type='text' />").attr("id", id).attr("name", id).val(content);
    }

    <telerik:RadUpload runat="server" ID="RadUpload1" OnClientAdded="onClientAddedHandler">
    </telerik:RadUpload>

    Since I don't have the implementation of your CreateLabel/CreateInput functions I have used my own. However, there should be no problems when you replace them with yours.

    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.
  8. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 23 Apr 2010 Link to this post

    Thank you for your reply Genady but unfortunately it's not exactly what I need to do.

    I've attached 2 files, one is the result of your code (named actual.jpg) and the other is what I need to do (named imagem4.jpg). With your code the Upload control is underneath the table generated by jQuery (outside the table) but I need it to be in the same line of the other controls.

    One more thing with your code, if I click the Remove button it removes the upload control but not the table.

    Thank you one more time but I really need to put this to work.

    Best Regards
  9. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 28 Apr 2010 Link to this post

    Is there any way you could help me out with this problem. I still can't figured it out yet...
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 28 Apr 2010 Link to this post

    Hi Rui Lopes,

    You can achieve the desired layout with the following code:

    <script type="text/javascript">
     
    function onClientAddedHandler(radUpload, args) {
                var idAddField = radUpload.getID("additional");
                $(args.get_row()).each(function(i) {
                    var labelTitle = CreateLabel("TestLabel", idAddField);
                    var input = CreateInput("Title", "text");
                    input.id = input.name = radUpload.getID(input.name);
                    var label1 = CreateLabel("*", idAddField);
                    var label = CreateLabel("TestLabel2", idAddField);
                    var container = $($("<span></span>"));
     
                    container.append(labelTitle);
                    container.append(input);
                    container.append(label1);
                    container.append(label);
     
                    $(container).insertBefore(".ruFileWrap", this);
                });
            }
     
            function CreateLabel(content, id) {
                return $("<label>" + content + "</label>").attr("for", id);
            }
     
            function CreateInput(content, id) {
                return $("<input type='text' />").attr("id", id).attr("name", id).val(content);
            }
             
            
        </script>
     
            <telerik:RadUpload runat="server" ID="RadUpload1" OnClientAdded="onClientAddedHandler" Width="1000px" ControlObjectsVisibility="RemoveButtons">
            </telerik:RadUpload>


    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. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 30 Apr 2010 Link to this post

    Hi Genady,

    unfortunately that is not the solution for my problem. It keeps putting the Remove button beneath the upload control :(

    Attached I send a print screen for you to see with Developer Tools for IE8 enable and the Upload control selected... I've also outlined the areas for better understanding of the generated layout...

    Thank you for your time.
  12. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 04 May 2010 Link to this post

    Hello again,

    Is there any news about this problem? I still can't figure this out...

    Thank you.
  13. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 04 May 2010 Link to this post

    Hi Rui Lopes,

    It is strange that the remove button is dropping bellow the inputs. Do you have some css styles applied to it? On my sample project it does not behave in that way and stays on the same line as the other inputs. I am attaching my sample project as an attachment. Can you reproduce the problem on it?

    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.
  14. Rui Lopes
    Rui Lopes avatar
    12 posts
    Member since:
    Dec 2009

    Posted 05 May 2010 Link to this post

    Hello again,

    You're right, it was a problem with CSS style. That was causing the button to stay below the control.

    But your code still had one problem, when inserting a new upload, the span was created between the Label and the upload control.
    Replace your function to:
            function onClientAddedHandler(radUpload, args) { 
                var uploadElement = radUpload.get_element(); 
     
                var idAddField = radUpload.getID("additional"); 
                $(".ruInputs li[class='']:last span") 
                    .before($("<label><%=Resources.OperationalControl.Resource.String_Title %></label>").attr("for", idAddField)) 
                    .before($("<input type='text' />").attr("id", "Title").attr("name", "text")) 
                    .before($("<label>*</label>")) 
                    .before($("<label><%=Resources.OperationalControl.Resource.String_File %></label>").attr("for", idAddField)) 
                    ; 
            } 
     

    This way everything is working great.

    Thank you for your patience and time.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017