Quick Help needed: Layout issues

11 posts, 0 answers
  1. Amar
    Amar avatar
    21 posts
    Member since:
    Oct 2008

    Posted 14 Oct 2008 Link to this post

    Hi,

    I have been evaluating Infragistics and Telerik for my company and have to make a recommendation soon. So far Telerik RadScheduler+other controls offers more features so i want the company to purchase the ASP.Net Ajax Suite.

    While prototyping, i have come across this problem, so am in need of assistance....

    See the problem

    http://www.asingh.com/telerik/problem.png

    The issue is that due to our application layout, we have a content div which has the style attribute overflow:auto.
    The RadScheduler is to be hosted in this area.

    So it will be like this

    header div
      begin content div [ overfloat:auto]
         RadScheduler
      end content div
    footer div

    As the above picture shows, the RadScheduler table breaks as it is styled with position:relative. The control header scrolls out of the view but the body is always fixed in position and also floats out of the parent div.

    This problem occurs in IE6 and 7. I have tried overriding the styles in page with some sucess but the whole point of using the controls is to be able to drop them in our pages and start coding. I dont think the other developer will like the idea of having to start hacking with the styles to ensure that control layout does not break in IE6 and 7.

    So can someone please point me to a solution to this problem.

    Thanks in advance

    Amar

  2. Amar
    Amar avatar
    21 posts
    Member since:
    Oct 2008

    Posted 14 Oct 2008 Link to this post

    I have looked at the other forum posts and tried both Overflowmodes and still have the problem.

    http://www.telerik.com/community/forums/thread/b311D-httck.aspx





  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Oct 2008 Link to this post

    Hello Amar,

    Thank you for evaluatin Telerik RadControls.

    We will be happy to help you find a satisfactory solution to this issue, but we will need a sample code or a project which demonstrates the problem. To send us files, please open a support ticket. 

    Looking forward to hearing from you,

    Peter
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Amar
    Amar avatar
    21 posts
    Member since:
    Oct 2008

    Posted 15 Oct 2008 Link to this post

    Hi Peter,

    Thanks for the reply, i have managed to fix the problem by adding the css attribute
    position:relative
    to the parent container which hosts the RadScheduler. This seems to be working so far, i have tested it in IE6,IE7,Firefox 1,2,3 ;)

    While trying to fix this i also discovered that  telerik:RadPane by default adds the css attribute overflow:auto , i know it can be changed through Scrollbars property but it means that if it was required to simply have the splitter functionality present while the splitter container would grow and shink depending on the content, then this property prevents it. For a quick work around i am going to remove it using javascript but i think that the control should not be adding that attribute.

    So far so good, just have to demo the prototype tomorow and hopefully be purchasing the control suite soon.

    Thanks.
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Oct 2008 Link to this post

    Hello Amar,

    In case you assume that if you remove the overflow:auto the splitter will resize itself according to its content, please not this is not so and the result will only be that the content will be cut off. To achieve the desired behavior you should use javascript, similarly to the script shown in this KB article.

    In case you meant something else, please provide more details about the expected behavior when the overlow is not set to auto.

    Regards,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Amar
    Amar avatar
    21 posts
    Member since:
    Oct 2008

    Posted 20 Oct 2008 Link to this post

    Hi Svetlina

    telerik:RadPane has the property Scrolling with values [Both,None,x,y] where as the css overflow property has values [auto = Both, None =None, overflow-x = x, overflow-y=y] .
    But if you do not specify overflow on an element, by default it expands.

    This is the problem with splitter control, if i just want the splitter behaviour with the splitter container expanding with its content, then i cannot have this as by default the RadPane's overflow is set to auto.

    So if i just want this and i dont want any scrollbars in my radpane's i cannot have it.

                <telerik:RadSplitter runat="server" ID="RadSplitter1" Skin="WebBlue" Width="100%">
                    <telerik:RadPane runat="server" ID="CalendarPane" Width="35%" CssClass="schedulerPane">
                <p>Lots of html content</p>
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" CollapseMode="Forward" ID="RadSplitBar1" />
                    <telerik:RadPane runat="server" ID="SchedulerPane" CssClass="schedulerPane" Width="65%">
                <p>Lots of html content</p>
                    </telerik:RadPane>
                </telerik:RadSplitter>

    So , what i am saying is that if the Scrolling Property is not set then overflow attribute should not be rendered on the control.

    Thanks.



  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 22 Oct 2008 Link to this post

    Hello Amar,
    You are correct about the overflow property in general. However, not in the case of RadSplitter. The RadSplitter is a complex control that provides a lot of functionality, a simple HTML control does not. Additionally, the RadPanes are not DIV element, but cells of a TABLE (the RadSplitter). For the time being, the size of the RadPane (Width and Height) is always set in pixels - even when you set it in percents, the size is calculated and recalculated when you resize the browser in pixels and that value is applied to the RadPanes. The overflow style property is always set for the DIV elements, holding the content of the RadPanes, as well so that the correct size is respected.

    I understand what you expect as a result, but the current version of the RadSplitter does not support such behavior and the only way you can achieve it is by means of javascript as Svetlina already mentioned. Indeed, if you just take the HTML, the RadSplitter renders, and remove the overflow setting, you will probably get the desired result. But there is more to the RadSplitter control than the HTML it renders. I hope this explains why we always render the overflow style setting for the RadPanes. 

    All the best,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  9. Deepa Balasundaram
    Deepa Balasundaram avatar
    34 posts
    Member since:
    Jul 2009

    Posted 04 Mar 2010 Link to this post

    Hello,

    I have attached two screen shots here. I have a RadScheduler in a RadPane and I have a RadPanelBar in the other RadPane. When I expand and then collapse the RadSplitter between these two RadPanes to see the RadScheduler, half of the RadScheduler is gone. I think that the AutoResize is not applied (I have set the AutoResize element to true).

    Suggest me some solution.

    Thanks,
    Deepa
  10. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Mar 2010 Link to this post

    Hello Deepa ,

    I tried to reproduce this issue with Scheduler but to no avail. Which version of the controls you're using? Could you please try to isolate it in a simple page and send it to us? You should open a support ticket in order to be able to attach files. 

    I've attached my test page, can you try it and tell us whether you can reproduce the issue with it? Thanks

    Regards,
    Yana
    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. Deepa Balasundaram
    Deepa Balasundaram avatar
    34 posts
    Member since:
    Jul 2009

    Posted 12 Mar 2010 Link to this post

    I am sorry. thats was my mistake. I didn't have LiveResize field.

    I have one more problem. The advancedform of the RadScheduler is not displayed properly. I have attached a screen shot here.

    Following is my code:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="View.ascx.cs" Inherits="CREC.DNNModules.MySource_Calendar.View" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="scheduler" TagName="AdvancedForm" Src="AdvancedForm.ascx" %>
    <%-- The following style is for highlighting today in month view --%>
    <asp:ScriptManagerProxy runat="server">
        <Scripts>
            <asp:ScriptReference path="~/DesktopModules/MySource_Calendar/AdvancedForm.js"/>
            <asp:ScriptReference Path="~/DesktopModules/MySource_Calendar/MySource_Calendar_JS.js"/>
        </Scripts>    
    </asp:ScriptManagerProxy>
        <style type="text/css">
         /* Fix for header wrapping issue in IE6/7 */
         html RadScheduler1 div.rsHeader h2 { position: absolute; }
         html RadScheduler1 div.rsHeader h2 { position: absolute; }  
         .Fix
         {
             position:relative !important;
         }
        </style>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">        
            <script type="text/javascript">
                
                //<![CDATA[

                // Dictionary containing the advanced template client object
                // for a given RadScheduler instance (the control ID is used as key).
                var schedulerTemplates = {};

                function schedulerFormCreated(scheduler, eventArgs) {
                    // Create a client-side object only for the advanced templates
                    var mode = eventArgs.get_mode();
                    if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                        mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
                        // Initialize the client-side object for the advanced form
                        var formElement = eventArgs.get_formElement();
                        var templateKey = scheduler.get_id() + "_" + mode;
                        var advancedTemplate = schedulerTemplates[templateKey];
                        if (!advancedTemplate) {
                            // Initialize the template for this RadScheduler instance
                            // and cache it in the schedulerTemplates dictionary
                            var schedulerElement = scheduler.get_element();
                            var isModal = scheduler.get_advancedFormSettings().modal;
                            advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                            advancedTemplate.initialize();

                            schedulerTemplates[templateKey] = advancedTemplate;

                            // Remove the template object from the dictionary on dispose.
                            scheduler.add_disposing(function() {
                                schedulerTemplates[templateKey] = null;
                            });
                        }                   
                    }
                }

                //]]>
                
                //Client-side events of RadPanelBar1
                function RadPanelBar1_OnClientItemClicking(sender, eventArgs) {
                    //find the item that triggered this client-side event
                    var item = eventArgs.get_item();
                   
                    //Depending upon the item being clicked, perform one the folowing functions
                    if (item.get_text() == 'Export All Events') {
                        if (!clickCalledAfterRadconfirm) {
                            eventArgs.set_cancel(true);
                            lastClickedItem = eventArgs.get_item();
                            radconfirm("Are you sure you want to export all events?", confirmCallbackFunction, 330, 100, null, 'Export All Confirmation');
                        }  
                    }
                    else if (item.get_text() == 'Export Range of Events') {
                        //Call existing global function to obtain a reference to the window manager
                        var radWindow = $find("<%= RadWindow1.ClientID %>")
                        //Show the existing RadWindow1
                        radWindow.show();
                        eventArgs.set_cancel(true); //Server-side event is not needed
                    }
                    else if (item.get_text() == 'Import iCS') {
                        //Import option will be available only to the registered users (only when they are logged in)
                        var loggedin = '<%=UserInfo.IsInRole("Registered Users")%>';
                        if (loggedin == "True") {
                            //If the registered user is logged in, then a window will appear to upload an .ics file with appointments
                            var radWindow = $find("<%= RadWindow2.ClientID %>")
                            radWindow.show();
                            eventArgs.set_cancel(true);
                        }
                        else {
                        //If the user if not logged in, then follwing messgae will be displayed
                            var proceed = radalert("You must be a Registered User on this website to carry out this action.", 500, 100, "Alert!");
                            if (proceed) {
                                eventArgs.set_cancel(true);
                            }
                            
                        }
                    }
                    else if (item.get_text() == 'Export' || item.get_text() == 'Import') {
                    //This is for expanding and collapsing the RadPanel Items 'Export' and 'Import'
                        if (item) {
                            if (!item.get_expanded()) {
                                item.expand();
                            }
                            else {
                                item.collapse();
                            }
                        }
                        //Server-side event is not needed
                        eventArgs.set_cancel(true);
                    }
                }


                function Close() {
                //This will close the instance of the RadWindow. This will not reload a RadWindow on post-back
                    var radWindow = $find("<%= RadWindow1.ClientID %>");
                    radWindow.Close();
                }

                function RadAjaxPanel1_ConditionalPostback(sender, args) {
                    //By default the AJAX Panel ajaxifies all controls placed inside.
                    //If you want to exclude a control from ajaxifying you can use one of the following approaches:
                    //Refer the following page (http://www.telerik.com/help/aspnet-ajax/ajxexclude.html
                    //1. Register Post-Back Controls with the ScriptManager/Proxy Script Manager (Buttons)
                    //2. Disable AJAX for the current request (RadUpload, Export RadGrid content to Excel/Word/CSV/PDF with Ajax enabled)
                    //   Use OnRequestStart client-side event handler to determine the AJAX initiator and disable AJAX for the current request.
                    //3. Add post back function manually i.e.force post-back event for the control (LinkButtons)

                    if (args.get_eventTarget() == "<%= RadPanelBar1.UniqueID %>") {
                        //This function follows the second approach (i.e it disables AJAX for the current request)
                        args.set_enableAjax(false);
                    }
                }

                /* Firefox resize scrollable content */
                function hideScrollableArea(sender, eventArgs) {
                    if ($telerik.isFirefox)
                        $telerik.$('.rsContentScrollArea').css('overflow', 'hidden');
                }
                function showScrollableArea(sender, eventArgs) {
                    if ($telerik.isFirefox)
                        $telerik.$('.rsContentScrollArea').css('overflow', 'auto');
                }

              
               
            </script>         
    </telerik:RadCodeBlock>
    <div id="divRadMgr">
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1"/>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>   
                   <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>            
        </AjaxSettings>    
    </telerik:RadAjaxManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server"
            DecoratedControls="CheckBoxes, Buttons, RadioButtons, Select, Scrollbars, Fieldset" Skin="Office2007" />
    </div>

            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Office2007" BackgroundPosition="Center"></telerik:RadAjaxLoadingPanel>               
            <div class="example-panel">
                <telerik:RadSplitter runat="server" ID="RadSplitter1" PanesBorderSize="0" Width="734px"
                    Height="552px" Skin="Office2007">
                    <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="240" MaxWidth="300"
                        Scrolling="None" OnClientBeforeResize="hideScrollableArea" OnClientResized="showScrollableArea"
                        OnClientBeforeExpand="hideScrollableArea" OnClientExpanded="showScrollableArea"
                        OnClientBeforeCollapse="hideScrollableArea" OnClientCollapsed="showScrollableArea">
                        <div class="calendar-container" style="background-position:center">
                            <telerik:RadCalendar runat="server" ID="RadCalendar1" Skin="Office2007" AutoPostBack="true" CssClass="calendarWrapper"
                                EnableMultiSelect="false" DayNameFormat="FirstTwoLetters" EnableNavigation="true"
                                EnableMonthYearFastNavigation="false" OnSelectionChanged="RadCalendar1_SelectionChanged" DayOverStyle-VerticalAlign="Middle" CalendarTableStyle-HorizontalAlign="Center" CalendarTableStyle-VerticalAlign="Middle" DayOverStyle-HorizontalAlign="Center" DayStyle-HorizontalAlign="Center" DayStyle-VerticalAlign="Middle" DisabledDayStyle-HorizontalAlign="Center" DisabledDayStyle-VerticalAlign="Middle" FastNavigationStyle-HorizontalAlign="Center" FastNavigationStyle-VerticalAlign="Middle" HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle" OtherMonthDayStyle-HorizontalAlign="Center" OtherMonthDayStyle-VerticalAlign="Middle" OutOfRangeDayStyle-HorizontalAlign="Center" OutOfRangeDayStyle-VerticalAlign="Middle" SelectedDayStyle-HorizontalAlign="Center" SelectedDayStyle-VerticalAlign="Middle" TitleStyle-HorizontalAlign="Center" TitleStyle-VerticalAlign="Middle" ViewSelectorStyle-HorizontalAlign="Center" ViewSelectorStyle-VerticalAlign="Middle">
                                 <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" Date="" ItemStyle-CssClass="rcToday" />
                                </SpecialDays>                           
                            </telerik:RadCalendar>
                        </div>
                                <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" ClientEvents-OnRequestStart="RadAjaxPanel1_ConditionalPostback" HorizontalAlign="NotSet" LoadingPanelID="RadAjaxLoadingPanel1">
                        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Office2007" Width="100%" OnItemClick="RadPanelBar1_ItemClick"
                        OnClientItemClicking ="RadPanelBar1_OnClientItemClicking" CssClass="Fix">
                            <Items>                            
                                <telerik:RadPanelItem Text="Export" Expanded="true">
                                    <Items>
                                        <telerik:RadPanelItem Text="Export All Events" Value="Export All"></telerik:RadPanelItem>
                                        <telerik:RadPanelItem Text="Export Current Events" Value="Export Current"></telerik:RadPanelItem>  
                                        <telerik:RadPanelItem Text="Export Range of Events" Value="Export Range"></telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelItem>  
                                <telerik:RadPanelItem Text="Import" Expanded="true">
                                    <Items>
                                        <telerik:RadPanelItem Text="Import iCS" Value="Import iCS"></telerik:RadPanelItem>                                   
                                    </Items>
                                </telerik:RadPanelItem>                              
                            </Items>
                        </telerik:RadPanelBar>
                          </telerik:RadAjaxPanel>
                        <br />                   
                    </telerik:RadPane>
                <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward"/>
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None" Width="490px">                   
                            <asp:Panel ID="Panel1" runat="server" Style="font: normal 12px Arial, Verdana, Sans-serif;
                            color: #a6a896;">
                            <telerik:RadScheduler ID="RadScheduler1" runat="server" Skin="Office2007" EnableEmbeddedSkins="true"
                            OnAppointmentCreated="RadScheduler1_AppointmentCreated"   Height="551px" Width="100%" ShowFooter="false"
                            DataEndField="End" DataKeyField="ApptId" DataSourceID="LinqDataSource1" DataStartField="Start"
                            DataSubjectField="Subject"
                            DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentId"
                            SelectedView="MonthView" CustomAttributeNames="Location,IsPrivate"
                            EnableCustomAttributeEditing="True"   OnNavigationComplete="RadScheduler1_NavigationComplete"  
                            OnClientFormCreated="schedulerFormCreated"                        
                            OnClientTimeSlotClick="OnClientTimeSlotClick"
                            OnClientAppointmentClick="OnClientAppointmentClick"                        
                            onformcreated="RadScheduler1_FormCreated"
                            onformcreating="RadScheduler1_FormCreating">
                            <AppointmentContextMenuSettings EnableDefault="false"/>                                                
                            <%--
                                When the AppointmentContextMenuSettings is "False", Right-click on any context-menu will throw a runtime javascript                               exception. TO avoid this, I have included an "AppointmentContextMenus" section with no menus in it.
                                
                                Deepa
                            --%>
                            <AdvancedForm DateFormat="M/d/yyyy" TimeFormat="h:mm tt" Modal="True"></AdvancedForm>
                            <AppointmentTemplate>
                                <div>
                                    <%# Eval("Subject") %>
                                </div>
                            </AppointmentTemplate>
                            <MonthView FirstDayHeaderDateFormat="dd MMMM" HeaderDateFormat="MMMM, yyyy" />
                            <AdvancedEditTemplate>
                                <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>'
                                    Location='<%# Bind("Location") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'
                                    IsPrivate='<%# Bind("IsPrivate") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' />
                            </AdvancedEditTemplate>
                            <AdvancedInsertTemplate>
                                <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>'
                                    Location='<%# Bind("Location") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'
                                    IsPrivate='<%# Bind("IsPrivate") %>' RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' />
                            </AdvancedInsertTemplate>
                            <TimelineView UserSelectable="false" />                          
                        </telerik:RadScheduler>                                            
                        </asp:Panel>                    
                </telerik:RadPane>
                </telerik:RadSplitter>
                </div>
        
     
        <asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="CREC.DNNModules.MySource_Calendar.MySource_CalendarDataContext"
            EnableDelete="True" EnableInsert="True" EnableUpdate="True" TableName="MySource_Calendar_Appts"
            OnInserting="LinqDataSource1_Inserting" OnSelecting="LinqDataSource1_Selecting"
            OnUpdating="LinqDataSource1_Updating" OnDeleting="LinqDataSource1_Deleting">
        </asp:LinqDataSource>
     
                 
                 <telerik:RadWindow ID="RadWindow1" Skin="Office2007" VisibleOnPageLoad="false" runat="server" Opacity="100" Animation="Fade" AutoSize="true"  VisibleStatusbar="False" Behaviors="Close" Modal="true" Title="Select Date">
                    <ContentTemplate>
                    
                    <fieldset id="fld1">
                    <legend> Select Data Range </legend>                <br />
                    <span style="margin: 6px 0 0 18px;">Choose date:</span>                       
          
                    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Vista">
                    <Calendar ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
                                    ViewSelectorText="x" Skin="Vista"></Calendar>
                    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                    </telerik:RadDatePicker>
                    <span style="margin: 6px 0 0 18px;">Choose date:</span>                
                    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Skin="Vista">
                    <Calendar ID="Calendar2" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"
                                    ViewSelectorText="x" Skin="Vista"></Calendar>
                    <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                    </telerik:RadDatePicker>    
            
                    <br />
                    <div style="margin-top: 4px; text-align: center;">
                    <asp:Button runat="server" ID="btnSelectDate" Text="Submit" OnClick="btnSelectDate_Click" OnClientClick="Close()"/>
                    <asp:Button runat="server" ID="btnCancelSelectDate" Text="Cancel" />
                    </fieldset>            
                    </div>
                   </ContentTemplate>
                </telerik:RadWindow>
                 <div style="height: 435px;">
            &nbsp;</div>
                <div id="divUploadAppointments">
                <telerik:RadWindow ID="RadWindow2" Skin="Office2007" VisibleOnPageLoad="false" runat="server" VisibleStatusbar="False" Behaviors="Close" Opacity="100" Animation="Fade" AutoSize="true" Modal="true" Title="Select File" Width="190">
                    <ContentTemplate>        
                         <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />                      
                          <telerik:RadUpload runat="server" id="RadUpload1" AllowedFileExtensions=".ics" Skin="Office2007"
                                AllowedMimeTypes="text/plain" FocusOnLoad="True" TargetFolder="~/DesktopModules/MySource_Calendar/UploadedFiles" MaxFileInputsCount="1" />
                                 <asp:Button id="btn_upload" runat="server" text="Upload"
                                onclick="btn_upload_Click" CausesValidation="False" />
                                      
                    </ContentTemplate>
                    </telerik:RadWindow>
                </div>
                <div id="div_RadWinMgr">
                    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Office2007" Animation="Fade">
                    </telerik:RadWindowManager>         
                </div>           
    ______________________________________________
    AvancedForm.ascx

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="AdvancedForm.ascx.cs" Inherits="AdvancedForm" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register src="BooleanAttributeControl.ascx" tagname="BooleanAttributeControl" tagprefix="uc1" %>
    <%@ Register Src="~/DesktopModules/MySource_Calendar/CalendarNameControl.ascx" TagName="CalendarNameControl" TagPrefix="uc1" %>

    <style type="text/css">
    .style1Table
        {
            width: 100%;
        }
        .rsNameWrapper {
            list-style-type: none; float: right;
        }    
    </style>
    <div class="rsAdvancedEdit" style="position: relative">
        <%-- Title bar. --%>
        <div class="rsAdvTitle">
            <%-- The rsAdvInnerTitle element is used as a drag handle when the form is modal. --%>
            <h1 class="rsAdvInnerTitle">
                <%= Owner.Localization.AdvancedEditAppointment %></h1>
            <asp:LinkButton runat="server" ID="AdvancedEditCloseButton" CssClass="rsAdvEditClose"
                CommandName="Cancel" CausesValidation="false" ToolTip='<%# Owner.Localization.AdvancedClose %>'>
                <%= Owner.Localization.AdvancedClose %>
            </asp:LinkButton>
        </div>
        <div class="rsAdvContentWrapper">
            <%-- Scroll container - when the form height exceeds MaximumHeight scrollbars will appear on this element--%>
            <div class="rsAdvOptionsScroll">
                <asp:Panel runat="server" ID="AdvancedEditOptionsPanel" CssClass="rsAdvOptions">
                    <asp:Panel runat="server" ID="BasicControlsPanel" CssClass="rsAdvBasicControls" OnDataBinding="BasicControlsPanel_DataBinding">
                        <telerik:RadTextBox runat="server" ID="SubjectText" Width="100%" Label='<%# Owner.Localization.AdvancedSubject + ":" %>'
                            Text='<%# Eval("Subject") %>' TextMode="MultiLine" Rows="5"
                            MaxLength="255" />                    
                        <telerik:RadTextBox runat="server" ID="LocationText" Width="100%" Label="Location: "
                            Text='<%# Eval("Location") %>' TextMode="SingleLine" MaxLength="255"  />
                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="LocationText"
                            EnableClientScript="true" Display="Dynamic" CssClass="rsValidatorMsg" />
                            <asp:RequiredFieldValidator runat="server" ID="SubjectValidator" ControlToValidate="SubjectText"
                            EnableClientScript="true" Display="Dynamic" CssClass="rsValidatorMsg" />
                           <ul class="rsTimePickers">
                            <li class="rsTimePick">
                                <label for='<%= StartDate.ClientID %>_dateInput_text'>
                                    <%= Owner.Localization.AdvancedFrom %>:</label><%--
                                    Leaving a newline here will affect the layout, so we use a comment instead.
                                --%> <telerik:RadDatePicker runat="server" ID="StartDate" CssClass="rsAdvDatePicker"
                                    Width="83px" SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
                                    MinDate="1900-01-01">
                                    <DatePopupButton Visible="False" />
                                    <DateInput ID="DateInput2" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
                                        EmptyMessageStyle-CssClass="radInvalidCss_Default" EmptyMessage=" " />
                                </telerik:RadDatePicker>
                                <%--
                                
                                --%><telerik:RadTimePicker runat="server" ID="StartTime" CssClass="rsAdvTimePicker"
                                    Width="65px" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'>
                                    <DateInput ID="DateInput3" runat="server" EmptyMessageStyle-CssClass="radInvalidCss_Default"
                                        EmptyMessage=" " />
                                    <TimePopupButton Visible="false" />
                                    <TimeView ID="TimeView1" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
                                        EndTime="18:00" Interval="00:30" />
                                </telerik:RadTimePicker>
                            </li>
                            <li class="rsTimePick">
                                <label for='<%= EndDate.ClientID %>_dateInput_text'>
                                    <%= Owner.Localization.AdvancedTo%>: </label><%--
                                
                                --%><telerik:RadDatePicker runat="server" ID="EndDate" CssClass="rsAdvDatePicker"
                                    Width="83px" SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
                                    MinDate="1900-01-01">
                                    <DatePopupButton Visible="False" />
                                    <DateInput ID="DateInput4" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
                                        EmptyMessageStyle-CssClass="radInvalidCss_Default" EmptyMessage=" " />
                                </telerik:RadDatePicker>
                                <%--
                                
                                --%><telerik:RadTimePicker runat="server" ID="EndTime" CssClass="rsAdvTimePicker"
                                    Width="65px" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'>
                                    <DateInput ID="DateInput5" runat="server" EmptyMessageStyle-CssClass="radInvalidCss_Default"
                                        EmptyMessage=" " />
                                    <TimePopupButton Visible="false" />
                                    <TimeView ID="TimeView2" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
                                        EndTime="18:00" Interval="00:30" />
                                </telerik:RadTimePicker>
                            </li>
                            <li class="rsAllDayWrapper">
                                <asp:CheckBox runat="server" ID="AllDayEvent" CssClass="rsAdvChkWrap" Checked="false"/>
                            </li>
                        </ul>
                         <ul class="rsTimePickers">
                            <li class="rsTimePick">
                                 <label>Is Private: </label><uc1:BooleanAttributeControl ID="IsPrivateCheckbox" runat="server" />
                             </li>      
                             <li class="rsNameWrapper">           
                              <label class="rsNameWrapper">Originating Calendar</label><uc1:CalendarNameControl ID="TextBox_CalendarName" runat="server" />
                            </li>  
                         </ul>                        
                        <asp:RequiredFieldValidator runat="server" ID="StartDateValidator" ControlToValidate="StartDate"
                            EnableClientScript="true" Display="Dynamic" CssClass="rsValidatorMsg" />
                        <asp:RequiredFieldValidator runat="server" ID="StartTimeValidator" ControlToValidate="StartTime"
                            EnableClientScript="true" Display="Dynamic" CssClass="rsValidatorMsg" />
                        <asp:RequiredFieldValidator runat="server" ID="EndDateValidator" ControlToValidate="EndDate"
                            EnableClientScript="true" Display="Dynamic" CssClass="rsValidatorMsg" />
                        <asp:RequiredFieldValidator runat="server" ID="EndTimeValidator" ControlToValidate="EndTime"
                            EnableClientScript="true" Display="Dynamic" CssClass="rsValidatorMsg" />
                        <asp:CustomValidator runat="server" ID="DurationValidator" ControlToValidate="StartDate"
                            EnableClientScript="false" Display="Dynamic" CssClass="rsValidatorMsg rsInvalid"
                            OnServerValidate="DurationValidator_OnServerValidate" />                   
                    </asp:Panel>   
                    
                    <asp:Panel runat="server" ID="RecurrenceCheckBoxPanel">
                    <label>Recurrence: </label><asp:CheckBox runat="server" ID="RecurrentAppointment" CssClass="rsAdvChkWrap" Checked="false"
                            Style="float: none" />
                    </asp:Panel>
                    <asp:Panel runat="server" ID="RecurrencePanel" Style="display: none;" CssClass="rsAdvRecurrencePanel">
                        <asp:Panel runat="server" ID="RecurrencePatternPanel" CssClass="rsAdvRecurrencePatterns"
                            OnDataBinding="RecurrencePatternPanel_DataBinding">
                            <span class="rsAdvResetExceptions">
                                <asp:LinkButton runat="server" ID="ResetExceptions" OnClick="ResetExceptions_OnClick" />
                            </span>                        
                            <asp:Panel runat="server" ID="RecurrenceFrequencyPanel" CssClass="rsAdvRecurrenceFreq">                           
                                 <ul class="rsRecurrenceOptionList">
                                    <li style='list-style-type:none'>
                                        <asp:RadioButton runat="server" GroupName="RepeatFrequency" ID="RepeatFrequencyHourly" /></li>
                                    <li style='list-style-type:none'>
                                        <asp:RadioButton runat="server" GroupName="RepeatFrequency" ID="RepeatFrequencyDaily" /></li>
                                    <li style='list-style-type:none'>                                    
                                        <asp:RadioButton runat="server" GroupName="RepeatFrequency" ID="RepeatFrequencyWeekly" /></li>
                                    <li style='list-style-type:none'>
                                        <asp:RadioButton runat="server" GroupName="RepeatFrequency" ID="RepeatFrequencyMonthly" /></li>
                                    <li style='list-style-type:none'>
                                        <asp:RadioButton runat="server" GroupName="RepeatFrequency" ID="RepeatFrequencyYearly" /></li>
                                </ul>                             
                            </asp:Panel>                                              
                            <asp:Panel runat="server" ID="RecurrencePatternHourlyPanel" CssClass="rsAdvPatternPanel rsAdvHourly"
                                Style="display: none;">
                                <div>
                                    <%= Owner.Localization.AdvancedEvery %>
                                    <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="HourlyRepeatInterval"
                                        Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                        MinValue="1"  Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                    <%= Owner.Localization.AdvancedHours %>
                                </div>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="RecurrencePatternDailyPanel" CssClass="rsAdvPatternPanel rsAdvDaily"
                                Style="display: none;">                           
                                 <ul>
                                    <li style="list-style-type:none">
                                        <asp:RadioButton runat="server" ID="RepeatEveryNthDay" Checked="true" GroupName="DailyRecurrenceDetailRadioGroup"
                                            CssClass="rsAdvRadio" />
                                        <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="DailyRepeatInterval"
                                            Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                            MinValue="1" Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                        <%= Owner.Localization.AdvancedDays %>
                                    </li>
                                    <li style="list-style-type:none">
                                        <asp:RadioButton runat="server" ID="RepeatEveryWeekday" GroupName="DailyRecurrenceDetailRadioGroup"
                                            CssClass="rsAdvRadio" />
                                    </li>
                                </ul>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="RecurrencePatternWeeklyPanel" CssClass="rsAdvPatternPanel rsAdvWeekly"
                                Style="display: none;">
                                <div>
                                    <%= Owner.Localization.AdvancedRecurEvery %>
                                    <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="WeeklyRepeatInterval"
                                        Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                        MinValue="1" Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                    <%= Owner.Localization.AdvancedWeeks %>
                                </div>

                               <ul class="rsAdvWeekly_WeekDays">
                                    <li style="list-style-type:none">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDaySunday" /></li>
                                    <li style="list-style-type:none">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDayMonday" /></li>
                                    <li style="list-style-type:none">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDayTuesday" /></li>
                                    <li style="list-style-type:none">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDayWednesday" /></li>
                                    <li style="clear: left; list-style-type:none;">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDayThursday" /></li>
                                    <li style="list-style-type:none">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDayFriday" /></li>
                                    <li style="list-style-type:none">
                                        <asp:CheckBox runat="server" CssClass="rsAdvCheckboxWrapper" ID="WeeklyWeekDaySaturday" /></li>
                                </ul>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="RecurrencePatternMonthlyPanel" CssClass="rsAdvPatternPanel rsAdvMonthly"
                                Style="display: none;">
                               <ul>
                                    <li style="list-style-type:none">
                                        <asp:RadioButton runat="server" ID="RepeatEveryNthMonthOnDate" Checked="true" GroupName="MonthlyRecurrenceRadioGroup"
                                            CssClass="rsAdvRadio" />
                                        <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="MonthlyRepeatDate"
                                            Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                            MinValue="1" MaxValue="31" Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                        <%= Owner.Localization.AdvancedOfEvery %>
                                        <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="MonthlyRepeatIntervalForDate"
                                            Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                            MinValue="1" Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                        <%= Owner.Localization.AdvancedMonths %>
                                    </li>
                                    <li style="list-style-type:none">
                                        <asp:RadioButton runat="server" ID="RepeatEveryNthMonthOnGivenDay" GroupName="MonthlyRecurrenceRadioGroup"
                                            CssClass="rsAdvRadio" />                                   
                                        <%--<telerik:RadComboBox runat="server" ID="MonthlyDayOrdinalDropDown" Width="70px"  Skin='<%# Owner.Skin %>'
                                            CssClass="rsAdvRecurrenceDropDown">                                       
                                            <%--Populated from code-behind--%>
                                         <%--</telerik:RadComboBox> --%>
                                         <asp:DropDownList runat="server" ID="MonthlyDayOrdinalDropDown" Width="70px" CssClass="rsAdvRecurrenceDropDown"></asp:DropDownList>
                                         <asp:DropDownList runat="server" runat="server" ID="MonthlyDayMaskDropDown" Width="100px" CssClass="rsAdvRecurrenceDropDown"></asp:DropDownList>
                                        <%--<telerik:RadComboBox runat="server" ID="MonthlyDayMaskDropDown" Width="110px" Skin='<%# Owner.Skin %>'
                                            CssClass="rsAdvRecurrenceDropDown">
                                            <%--Populated from code-behind--%>
                                        <%--</telerik:RadComboBox>--%>
                                        <%= Owner.Localization.AdvancedOfEvery %>
                                        <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="MonthlyRepeatIntervalForGivenDay"
                                            Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                            MinValue="1" Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                        <%= Owner.Localization.AdvancedMonths %>
                                    </li>
                                </ul>
                            </asp:Panel>
                            <asp:Panel runat="server" ID="RecurrencePatternYearlyPanel" CssClass="rsAdvPatternPanel rsAdvYearly"
                                Style="display: none;">
                                <ul>
                                    <li style="list-style-type:none">
                                        <asp:RadioButton runat="server" ID="RepeatEveryYearOnDate" Checked="true" GroupName="YearlyRecurrenceRadioGroup"
                                            CssClass="rsAdvRadio" />
                                         <%--<telerik:RadComboBox runat="server" ID="YearlyRepeatMonthForDate" Width="90px" Skin='<%# Owner.Skin %>'>
                                            <%--Populated from code-behind--%>
                                         <%--</telerik:RadComboBox>--%>
                                         <asp:DropDownList runat="server" ID="YearlyRepeatMonthForDate" Width="90px" CssClass="rsAdvRecurrenceDropDown"></asp:DropDownList>
                                        <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="YearlyRepeatDate"
                                            Value="1" Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true"
                                            MinValue="1" MaxValue="31" Skin='<%# Owner.Skin %>'></telerik:RadNumericTextBox>
                                    </li>
                                    <li style="list-style-type:none">
                                        <asp:RadioButton runat="server" ID="RepeatEveryYearOnGivenDay" GroupName="YearlyRecurrenceRadioGroup"
                                            CssClass="rsAdvRadio" />
                                       <%-- <telerik:RadComboBox runat="server" ID="YearlyDayOrdinalDropDown" Width="70px" Skin='<%# Owner.Skin %>'
                                            CssClass="rsAdvRecurrenceDropDown">--%>
                                            <%--Populated from code-behind--%>
                                       <%-- </telerik:RadComboBox>--%>
                                        <asp:DropDownList runat="server" ID="YearlyDayOrdinalDropDown" Width="70px" CssClass="rsAdvRecurrenceDropDown" ></asp:DropDownList>
                                       <asp:DropDownList runat="server" ID="YearlyDayMaskDropDown" Width="100px" CssClass="rsAdvRecurrenceDropDown" ></asp:DropDownList>
                                       <asp:DropDownList runat="server" ID="YearlyRepeatMonthForGivenDay" Width="90px" CssClass="rsAdvRecurrenceDropDown"></asp:DropDownList>
                                       
                                        <%--<telerik:RadComboBox runat="server" ID="YearlyDayMaskDropDown" Width="110px" Skin='<%# Owner.Skin %>'
                                            CssClass="rsAdvRecurrenceDropDown">
                                            <%--Populated from code-behind--%>
                                        <%--</telerik:RadComboBox>
                                        <%= Owner.Localization.AdvancedOf %>
                                       <%-- <telerik:RadComboBox runat="server" ID="YearlyRepeatMonthForGivenDay" Width="90px"
                                            Skin='<%# Owner.Skin %>'>
                                            <%--Populated from code-behind--%>
                                        <%--</telerik:RadComboBox>--%>
                                     </li>
                                </ul>
                            </asp:Panel>
                        </asp:Panel>
                        <asp:Panel runat="server" ID="RecurrenceRangePanel" CssClass="rsAdvRecurrenceRangePanel"
                            OnDataBinding="RecurrenceRangePanel_DataBinding">
                            <ul>
                                <li style="list-style-type:none">
                                    <asp:RadioButton runat="server" ID="RepeatIndefinitely" Checked="true" GroupName="RecurrenceRangeRadioGroup"
                                        CssClass="rsAdvRadio" />
                                </li>
                                <li style="list-style-type:none">
                                    <asp:RadioButton runat="server" ID="RepeatGivenOccurrences" GroupName="RecurrenceRangeRadioGroup"
                                        CssClass="rsAdvRadio" />
                                    <telerik:RadNumericTextBox runat="server" CssClass="rsAdvInput" Width="50px" ID="RangeOccurrences"
                                        Type="Number" NumberFormat-DecimalDigits="0" ShowSpinButtons="true" MinValue="1" Skin='<%# Owner.Skin %>'
                                        ></telerik:RadNumericTextBox>
                                    <%= Owner.Localization.AdvancedOccurrences %>
                                </li>
                                <li class="rsTimePick" style="list-style-type:none">
                                    <asp:RadioButton runat="server" ID="RepeatUntilGivenDate" GroupName="RecurrenceRangeRadioGroup"
                                        CssClass="rsAdvRadio" />
                                    <telerik:RadDatePicker runat="server" ID="RangeEndDate" CssClass="rsAdvDatePicker"
                                        Width="83px" Skin='<%# Owner.Skin %>' SharedCalendarID="SharedCalendar" Culture='<%# Owner.Culture %>'>
                                        <DatePopupButton Visible="False" />
                                        <DateInput ID="DateInput1" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>' />
                                    </telerik:RadDatePicker>
                                </li>
                            </ul>
                        </asp:Panel>
                    </asp:Panel>
                    <asp:HiddenField runat="server" ID="OriginalRecurrenceRule" />
                    <telerik:RadCalendar runat="server" ID="SharedCalendar" Skin='<%# Owner.Skin %>'
                        CultureInfo='<%# Owner.Culture %>' ShowRowHeaders="false" RangeMinDate="1900-01-01" />
                </asp:Panel>
            </div>
            <asp:Panel runat="server" ID="ButtonsPanel" CssClass="rsAdvancedSubmitArea">
                <div class="rsAdvButtonWrapper">
                    <asp:LinkButton runat="server" ID="UpdateButton" CssClass="rsAdvEditSave">
                        <span><%= Owner.Localization.Save %></span>
                    </asp:LinkButton>
                    <asp:LinkButton runat="server" ID="CancelButton" CssClass="rsAdvEditCancel" CommandName="Cancel"
                        CausesValidation="false">
                        <span><%= Owner.Localization.Cancel %></span>
                    </asp:LinkButton>
                </div>
            </asp:Panel>       
        </div>    
    </div>


  12. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 17 Mar 2010 Link to this post

    Hi Deepa,

    You can control the positioning of the advanced modal form as shown in this forum thread:

    http://www.telerik.com/community/forums/aspnet-ajax/scheduler/advanced-form-xy-position.aspx


    All the best,
    Peter
    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
UI for ASP.NET Ajax is Ready for VS 2017