AdvancedForm Modal Popup CSS Definition

[Steven]

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>

[Shinu]

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.

[Steven]

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

[Steven]

How do I access the controls inside of the popup?

[Peter]

Hello Steven,

Please, review the help topics on Customizing the advanced form using:

• Using javascript/jQuery and CSS
• Using the Advanced Templates

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

[khadeer]

Can u please share the default css for advanced form 

[khadeer]

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??

 

[Ivan Danchev]

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