AdvancedForm Modal Popup CSS Definition

8 posts, 0 answers
  1. Steven
    Steven avatar
    27 posts
    Member since:
    May 2012

    Posted 13 Jun 2012 Link to this post

    The code that Telerik provides for a Use custom modal advanced template includes many css classes such as rsAdvanceEdit and rsAdvanceModal.  I would like to style these but I don't know where they are defined. 

    Can someone please tell me where I can find the css for them?

    <AdvancedEditTemplate>
       <div class="rsAdvancedEdit rsAdvancedModal" style="position: relative">
           <div class="rsModalBgTopLeft">
           </div>
           <div class="rsModalBgTopRight">
           </div>
           <div class="rsModalBgBottomLeft">
           </div>
           <div class="rsModalBgBottomRight">
           </div>    
           <div class="rsAdvTitle">         
               <h1 class="rsAdvInnerTitle">
                   <%# Container.Appointment.Owner.Localization.AdvancedEditAppointment %></h1>
               <asp:LinkButton runat="server" ID="LinkButton1" CssClass="rsAdvEditClose"
                   CommandName="Cancel" CausesValidation="false" ToolTip='<%# Container.Appointment.Owner.Localization.AdvancedClose %>'>
    <%# Container.Appointment.Owner.Localization.AdvancedClose%>
               </asp:LinkButton>
           </div>
           <div class="rsAdvContentWrapper">
               <telerik:RadTextBox ID="SubjectTextBox" runat="server" Text='<%# Bind("Subject") %>'
                   Label='<%# Container.Appointment.Owner.Localization.AdvancedSubject%>'>
               </telerik:RadTextBox>
               <p>
                   Custom content here...
               </p>
               <asp:Panel runat="server" ID="Panel1" CssClass="rsAdvancedSubmitArea">
                   <div class="rsAdvButtonWrapper">
                       <asp:LinkButton CommandName="Update" runat="server" ID="LinkButton2" CssClass="rsAdvEditSave">
    <span><%# Container.Appointment.Owner.Localization.Save%></span>
                       </asp:LinkButton>
                       <asp:LinkButton runat="server" ID="LinkButton3" CssClass="rsAdvEditCancel" CommandName="Cancel"
                           CausesValidation="false">
    <span><%# Container.Appointment.Owner.Localization.Cancel%></span>
                       </asp:LinkButton>
                   </div>
               </asp:Panel>
           </div>
       </div>
    </AdvancedEditTemplate>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jun 2012 Link to this post

    Hi Steven,

    You can override the default CSS using "!important" as follows.

    CSS:
    <style type="text/css">
     .RadScheduler .rsAdvancedEdit
      {
       position: relative !important;
      }
     .RadScheduler .rsAdvancedEdit .rsAdvTitle
      {
       your own style
      }
     .RadScheduler .rsAdvancedEdit .rsAdvInnerTitle
      {
       your own style
      }
     .RadScheduler .rsAdvancedEdit .rsAdvEditClose
      {
       your own style
      }
     .RadScheduler .rsAdvancedModal
      {
       your own style
      }
     .RadScheduler .rsModalBgTopLeft, .RadScheduler .rsModalBgTopRight, .RadScheduler .rsModalBgBottomLeft, .RadScheduler .rsModalBgBottomRight
      {
       your own style
      }
     .RadScheduler .rsAdvancedEdit .rsAdvancedSubmitArea
      {
       your own style
      }
     .RadScheduler .rsAdvancedEdit div.rsAdvancedSubmitArea a.rsAdvEditSave
      {
       your own style
      }
     .RadScheduler .rsAdvEditClose
      {
       your own style
      }
    </style>

    Hope this helps.

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steven
    Steven avatar
    27 posts
    Member since:
    May 2012

    Posted 18 Jun 2012 Link to this post

    When I use this method, how do I access the Save and Cancel buttons?  I see they have a commandname but I do not know how to write code for when the user clicks save.

    Edit: This event handles it:
    schMasterScheduler_AppointmentUpdate
  5. Steven
    Steven avatar
    27 posts
    Member since:
    May 2012

    Posted 18 Jun 2012 Link to this post

    How do I access the controls inside of the popup?
  6. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 19 Jun 2012 Link to this post

    Hello Steven,

    Please, review the help topics on Customizing the advanced form using:
    To your original questions, the styles are automatically served as embedded resources by RadScheduler. If you want to override them, you need to set EnableEmbeddedBaseStylesheet="false" for RadScheduler and manually register the css file. Instructions on this can be found here.


    Regards,
    Peter
    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.
  7. khadeer
    khadeer avatar
    2 posts
    Member since:
    Nov 2015

    Posted 30 Mar in reply to Steven Link to this post

    Can u please share the default css for advanced form 
  8. khadeer
    khadeer avatar
    2 posts
    Member since:
    Nov 2015

    Posted 30 Mar in reply to Steven Link to this post

    as am using multiple radschedulers i can't able to show the delete confirmation popup in the middle of the screen/above all the scheduler. Can any one help me in this??

     

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 04 Apr Link to this post

    Hello,

    You can find the styles for the advanced form in the Scheduler.css file located in: {Default Installation Path}\Telerik\UI for ASP.NET AJAX {version}\Skins

    As for the issue with the dialog being cut off by the next Scheduler on the page you can apply the following CSS rule to remedy that:
    html .RadScheduler,
    html .RadScheduler .rsTopWrap {
        overflow: visible;
    }


    Regards,
    Ivan Danchev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017