Design of RadUpload and RadProgressArea messed up..

3 posts, 0 answers
  1. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 24 Oct 2012 Link to this post

    Design of rad upload and progress area is messed up after partial page load.

    Below is the page markup.
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
    <div id="ImageGallery_MainDiv">
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" EnableSkinTransparency="true" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" HorizontalAlign="NotSet" LoadingPanelID="LoadingPanel" Width="672px"
            Height="610px" ClientEvents-OnResponseEnd="mb_ManageBase_ImageGallery_SetInterface">
            <asp:HiddenField ID="hfGalleryID" runat="server" Value="0" />
            <asp:HiddenField ID="hfContentItemID" runat="server" Value="0" />
            <ModuleControls:MessageNotification ID="Notification" runat="server" MessageMode="Success">
            </ModuleControls:MessageNotification>
            <%----%>
            <ModuleControls:ConfigurationDockLayout ID="RadDockLayout1" runat="server">
                <ModuleControls:ConfigurationDockZone ID="RadDockZone1" runat="server">
                    <telerik:RadDock ID="GalleryEditConfigurationArea" runat="server" Title="ManageBase Gallery" DockMode="Docked" Collapsed="True"
                        DefaultCommands="ExpandCollapse" EnableRoundedCorners="true" EnableAnimation="True" Index="0" Tag="" EnableDrag="false">
                        <Commands>
                            <telerik:DockExpandCollapseCommand />
                            <telerik:DockToggleCommand AutoPostBack="true" CssClass="RadDockCustomSaveCommand" AlternateCssClass="RadDockCustomSaveCommandHover"
                                Name="CommandSaveGallery" />
                            <telerik:DockToggleCommand AutoPostBack="true" CssClass="RadDockCustominfoCommand" AlternateCssClass="RadDockCustomInfoCommandHover"
                                Name="Info" />
                        </Commands>
                        <ContentTemplate>
                            <table border="0" cellpadding="2" cellspacing="6" width="98%">
                                <tr>
                                    <td>
                                        <asp:Label ID="ltrSelectGallery" runat="server" Text="Administrera"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:Label ID="ltrGalleryName" runat="server" Text="Gallery-namn"></asp:Label>
                                    </td>
                                    <td>
                                        <asp:Label ID="ltrGallerystill" runat="server" Text="Gallery still"></asp:Label>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <GalleryControl:ImageGalleryDropDown ID="ddlImageGallerys" runat="server" EmptyMessage="Välj Galleri" AutoPostBack="True"
                                            Font-Names="Arial" ForeColor="#666666" Font-Size="14px" Width="180px">
                                        </GalleryControl:ImageGalleryDropDown>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox runat="server" ID="txtGalleryName" Columns="23" Skin="Default" Font-Names="Arial" ForeColor="#666666"
                                            Font-Size="14px" Width="180px">
                                        </telerik:RadTextBox>
                                    </td>
                                    <td>
                                        <GalleryControl:GelleryViewTypeDropDown ID="ddlGalleryPreviewType" runat="server" EmptyMessage="Välj still" AutoPostBack="True"
                                            Font-Names="Arial" ForeColor="#666666" Font-Size="14px" Width="180px">
                                        </GalleryControl:GelleryViewTypeDropDown>
                                    </td>
                                    <td>
                                        <telerik:RadButton ID="btnUpdateGallery" CssClass="ImageGallery_glUpdateGalleryStrip" Text="" runat="server">
                                            <Image EnableImageButton="true" IsBackgroundImage="true" />
                                        </telerik:RadButton>
                                    </td>
                                    <td>
                                        <telerik:RadButton ID="btnDeleteGallery" runat="server" CssClass="ImageGallery_glDelete" HoveredCssClass="ImageGallery_glDeleteHover"
                                            Text="">
                                            <Image EnableImageButton="true" IsBackgroundImage="true" />
                                        </telerik:RadButton>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                    <td colspan="3" align="right">
                                        <telerik:RadButton ID="btnSaveGallery" runat="server" Text="Spara som nytt Galleri">
                                        </telerik:RadButton>
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </telerik:RadDock>
                </ModuleControls:ConfigurationDockZone>
            </ModuleControls:ConfigurationDockLayout>
            <div style="margin-top: 18px;">
                <asp:Panel ID="pnlDisplayGalleryConfiguration" runat="server">
                    <table border="0" cellpadding="2" cellspacing="6">
                        <tr>
                            <td>
                                <telerik:RadComboBox ID="ddlThunmnailSize" runat="server" AutoPostBack="true" Font-Names="Arial" ForeColor="#666666" Font-Size="14px"
                                    Width="180px">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="100 X 60" Value="100-60" Selected="true" />
                                        <telerik:RadComboBoxItem Text="110 X 70" Value="110-70" />
                                        <telerik:RadComboBoxItem Text="120 X 80" Value="120-80" />
                                        <telerik:RadComboBoxItem Text="140 X 90" Value="140-90" />
                                        <telerik:RadComboBoxItem Text="170 X 120" Value="170-120" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                            <td>
                                <telerik:RadComboBox ID="ddlBorder" runat="server" EmptyMessage="Välj inramning" AutoPostBack="True" Font-Names="Arial" ForeColor="#666666"
                                    Font-Size="14px" Width="180px">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Raka hörn utan skugga" Value="CornerSimple" />
                                        <telerik:RadComboBoxItem Text="Raka hörn med skugga" Value="CornerShadow" />
                                        <telerik:RadComboBoxItem Text="Runda hörn utan skugga" Value="RoundedSimple" />
                                        <telerik:RadComboBoxItem Text="Runda hörn med skugga" Value="RoundedShadow " />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                            <td>
                                <telerik:RadComboBox ID="ddlEffect" runat="server" EmptyMessage="Välj effekt" Font-Names="Arial" ForeColor="#666666" Font-Size="14px"
                                    Width="180px">
                                </telerik:RadComboBox>
                            </td>
                            <td>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: middle">
                                <asp:Label ID="ltrImageWidth" runat="server" Text="Visning bredd pixl"></asp:Label>
                                <asp:TextBox runat="server" ID="txtImagePixelSize" Text="1000" Enabled="false" Font-Names="Arial" Width="40px" ForeColor="#666666"
                                    Font-Size="14px">
                                </asp:TextBox>
                            </td>
                            <td valign="middle">
                                <telerik:RadButton ID="btnOpenUploadWindow" runat="server" Text="Ladda upp bilder">
                                </telerik:RadButton>
                            </td>
                            <td valign="middle">
                            </td>
                            <td valign="middle">
                                   
                            </td>
                            <td valign="middle">
                            </td>
                        </tr>
                    </table>
                    <asp:PlaceHolder ID="phGalleryView" runat="server"></asp:PlaceHolder>
                    <uc1:GalleryViewSimple ID="GalleryViewSimple1" runat="server" Visible="true" />
                </asp:Panel>
                <asp:Panel ID="pnlUploadImages" runat="server" Visible="false">
                    <div style="text-align: right; margin-right: 20px;">
                        <telerik:RadButton ID="btnBackFromUpload" runat="server" Text="Tillbaka">
                        </telerik:RadButton>
                    </div>
                    <telerik:RadProgressManager runat="server" ID="RadProgressManager1" Skin="Transparent" />
                    <telerik:RadAsyncUpload ID="upImages" runat="server" MaxFileSize="10485760" MultipleFileSelection="Automatic" AllowedFileExtensions=".jpg,.png,.jpeg,.bmp,.gif"
                        PostbackTriggers="btnUploadToServer" OnClientFilesUploaded="onClientFileUploaded" OnClientValidationFailed="onValidationFailed"
                        Skin="Transparent" Width="300px">
                        <Localization Cancel="Avbyrt" Remove="Ta bort" Select="Välj bilder" />
                    </telerik:RadAsyncUpload>
                    <telerik:RadButton ID="btnUploadToServer" runat="server" Text="Ladda upp till Galleriet" Enabled="false" AutoPostBack="false"
                        OnClientClicked="updatePictureAndInfo">
                    </telerik:RadButton>
                    <telerik:RadProgressArea runat="server" ID="RadProgressArea1" Skin="Transparent" Width="100%">
                    </telerik:RadProgressArea>
                    <telerik:RadNotification ID="RadNotification1" runat="server" Skin="Transparent" EnableRoundedCorners="true" EnableViewState="false"
                        EnableShadow="true" ShowTitleMenu="false" Position="Center" Width="300" Height="100">
                    </telerik:RadNotification>
                </asp:Panel>
            </div>
        </telerik:RadAjaxPanel>
    </div>
     I have also attached the image to show the messed page .







  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 29 Oct 2012 Link to this post

    Hello Farid,

    From the image that you provided it seems that the styles for the RadAsyncUpload don not get applied. Unfortunately using the code that you provided I am not able to replicate the issue locally and help you out. However, I would suggest that you check if there are any errors on the page indicating the issue.

    Regards,
    Kate
    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
  4. shadow
    shadow avatar
    58 posts
    Member since:
    Jun 2008

    Posted 30 Oct 2012 Link to this post

    Hello Kate,

    I have checked there are no errors on the page. My assumption is that upload control is not getting the designed in ajax panel.

    I am creating a support ticket with the complete code. 
Back to Top