This is a migrated thread and some comments may be shown as answers.

RadUpload inside several other controls

12 Answers 157 Views
Upload (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Rui Lopes
Top achievements
Rank 1
Rui Lopes asked on 14 Apr 2010, 05:45 PM
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.

12 Answers, 1 is accepted

Sort by
0
Accepted
Genady Sergeev
Telerik team
answered on 15 Apr 2010, 02:04 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 20 Apr 2010, 02:31 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 20 Apr 2010, 04:26 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 22 Apr 2010, 06:51 PM
Can anyone help me out with this "little" problem? I still can't figure it out....
0
Genady Sergeev
Telerik team
answered on 23 Apr 2010, 01:50 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 23 Apr 2010, 05:15 PM
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
0
Rui Lopes
Top achievements
Rank 1
answered on 28 Apr 2010, 03:12 PM
Is there any way you could help me out with this problem. I still can't figured it out yet...
0
Genady Sergeev
Telerik team
answered on 28 Apr 2010, 04:56 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 30 Apr 2010, 12:06 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 04 May 2010, 11:54 AM
Hello again,

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

Thank you.
0
Genady Sergeev
Telerik team
answered on 04 May 2010, 01:50 PM
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.
0
Rui Lopes
Top achievements
Rank 1
answered on 05 May 2010, 06:26 PM
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.
Tags
Upload (Obsolete)
Asked by
Rui Lopes
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
Rui Lopes
Top achievements
Rank 1
Share this question
or