ZIndex issue with advanced form

[Daniel]

Hi. We've recently upgraded to version 2010_3_1109 from the Q2 version and the advanced form seems to be partially hidden. Controls like RadTextBox and regular ASP buttons seem okay. But it looks like the whole container is hidden behind the "faded" style that is applied when entering a modal form. I've tried setting ZIndex on the advanced form property but nothing happens.  We use a custom advanced form which is in an ASCX that is basically a table with textboxes. I've also attached a screen. Thanks.

Daniel

<telerik:RadScheduler ID="rsCalendar" runat="server" Skin="Vista" DataEndField="end_date"
                                                DataKeyField="id" DataSourceID="sdsCalendar" DataStartField="start_date" DataSubjectField="subject"
                                                CustomAttributeNames="location" SelectedView="MonthView" DataDescriptionField="details"
                                                DataRecurrenceField="recurrence_rule" DataRecurrenceParentKeyField="recurrence_rule_parent_id"
                                                EnableDescriptionField="true" EnableCustomAttributeEditing="true" AppointmentStyleMode="Default"
                                                OnAppointmentDelete="rsCalendar_AppointmentDelete" OnAppointmentInsert="rsCalendar_AppointmentInsert"
                                                OnAppointmentUpdate="rsCalendar_AppointmentUpdate" OnAppointmentCreated="rsCalendar_AppointmentCreated"
                                                DayStartTime="07:00:00" DayEndTime="19:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday"
                                                Culture="en-AU" OnClientFormCreated="schedulerFormCreated" Height="100%" StartInsertingInAdvancedForm="true">
                                                <AdvancedForm Modal="true" ZIndex="10005" />
                                                <AdvancedEditTemplate>
                                                    <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("subject") %>'
                                                        Description='<%# Bind("description") %>' Start='<%# Bind("start") %>' End='<%# Bind("end") %>'
                                                        Location='<%# Bind("location") %>' />
                                                </AdvancedEditTemplate>
                                                <AdvancedInsertTemplate>
                                                    <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("subject") %>'
                                                        Description='<%# Bind("description") %>' Start='<%# Bind("start") %>' End='<%# Bind("end") %>'
                                                        Location='<%# Bind("location") %>' />
                                                </AdvancedInsertTemplate>
                                            </telerik:RadScheduler>

<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;
                    });
                }

                // Are we using Web Service data binding?
                if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                    // Populate the form with the appointment data
                    var apt = eventArgs.get_appointment();
                    var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                    advancedTemplate.populate(apt, isInsert);
                }
            }
        }

        function hideActiveToolTip() {
            var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
            if (tooltip) {
                tooltip.hide();
            }
        }

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
        function beginRequestHandler(sender, args) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            if (args.get_postBackElement().id.indexOf('rsCalendar') != -1) {
                hideActiveToolTip();
            }
        }

        function clientBeforeShow(sender, eventArgs) {
            w = $telerik.$(window).width() / 2;
            h = $telerik.$(window).height() / 2;

            if ((sender._mouseX > w) && (sender._mouseY > h)) {
                sender.set_position(Telerik.Web.UI.ToolTipPosition.TopLeft);
                return;
            }
            if ((sender._mouseX < w) && (sender._mouseY > h)) {
                sender.set_position(Telerik.Web.UI.ToolTipPosition.TopRight);
                return;
            }
            if ((sender._mouseX > w) && (sender._mouseY < h)) {
                sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomLeft);
                return;
            }
            sender.set_position(Telerik.Web.UI.ToolTipPosition.BottomRight);
        }

        function openRadWindowTrainingDates() {
            var oWnd = radopen("/teams/hr/training.aspx");
            oWnd.add_close("OnClientClose");
            oWnd.Center();
        }

        function ClientClicked() {
            window.location.href = "/teams/hr/corporate_training_calendar/add_content/";
        }

        function ToolbarOnClientButtonClicked(sender, args) {
            var button = args.get_item();
            if (button.get_text() == "Show Training Courses") {
                var oWnd = radopen("/teams/hr/training.aspx");
                oWnd.add_close("OnClientClose");
                oWnd.Center();
            }
        }

        //]]>
    </script>

[Daniel]

Apologies, I just read this thread. It solves my problem.

Daniel

[Keith]

We also have an issue with the Advanced Edit z-index, although it is slightly different.

Our site has a header with drop down menus, so the header's z-index is 99, so that the drop down menus will appear above the rest of the site's content.

We are using the RadScheduler's Advanced Edit and have set <advancedform model="true" ZIndex="100000" />

In IE7 or IE8 set to Browser Mode: IE 7 and Document Mode: IE7 Standards, the popup "Advanced Edit" form appears tucked behind the header, even though when inspected with the IE developer toolbar the z-index is higher than the header. (See Attached scheduler.jpg)

As a reality check, I looked aTelerik Demo "Scheduler / Defining Resources" http://demos.telerik.com/aspnet-ajax/scheduler/examples/resources/defaultcs.aspx to see if there was similar behavior and that is the case (See Attached scheduler1.jpg) The scheduler gets hidden behind objects in the page.

Unfortunately, I cannot attached code files, this is a massive site with millions of lines of code.

Is there a fix.
Thanks in advance

Keith E.

[Jayesh Goyani]

Hi Keith,

please set z-index of advancemodal panel.

.rsAdvancedModal
        {
            z-index:10000 !important;
        }

Default z-index of Telerik Control,
http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html

Thanks,
Jayesh Goyani

[Keith]

Adding the style rule does apply the z-index to the popup, you can see it when you inspect the element in the developer toolbar. However it does not change the rendering. The Advanced Edit form is still tucked behind the heard. I am beginning to think it's an IE7 rendering bug.

K.E.

[Veronica]

Hi Keith,

Could you please open a new support thread and attach a sample project that reproduces the issue? That way we can further inspect it and be able to help you.

Thank you!

All the best,
Veronica Milcheva
the Telerik team

[Keith]

Veronica,

No sample project necessary. The Telerik Demo "Scheduler / Defining Resources" http://demos.telerik.com/aspnet-ajax/scheduler/examples/resources/defaultcs.aspx illustrates the behavior (See the images attached to my

 May 24, 2011 post - scheduler1.jpg) The scheduler gets hidden behind objects in the page.

Keith E.

[Jayesh Goyani]

Hi Keith and Veronica,

sorry for late reply.
i m able to generate this issue but still i m not able to find standard/good solution so i m not giving reply to you.
temporary solution is set the z-index of radmenu but its generate issue for modalpopup and combobox.

Thanks,
Jayesh Goyani

[Veronica]

Hello Keith,

Thank you for clarification.

At first I tried to increase the z-index of the Advanced Form by setting it to 2000 in this demo where the issue reproduces. However my changes made no effect. The reason was that the z-index of the menu was 30000:

* + HTML .head2
{
   z-index : 30000;
}

So when I set the z-index to 300 for example - the Advanced Form appeared above.

My advice is to try to descrease the z-index of the menu in your particular example.

Please test it and let me know how it goes. 

All the best,
Veronica Milcheva
the Telerik team

[vamshi]

What is the solution for the above problem? The z-index of the radmenu is 7000 the z-index of the advanced modal form is 30000 but still the menu shows on top of the advanced edit form of the radscheduler. 

[Ivana]

Hi Vamshi,

Would you please clarify which RadMenu do you refer in the following demo: http://demos.telerik.com/aspnet-ajax/scheduler/examples/resources/defaultcs.aspx. Would you specify the version of RadControls for ASP.NET AJAX that you use in your application as well?

Thank you!

Regards,
Ivana
the Telerik team

[vamshi]

Hi,

We are using Telerik Product version: 2012.1.215.40. And we are using Client-side API menu.

[Ivana]

Hello Vamshi,

Would you please provide some more specifics about the scenario that you are trying to implement?
If you could open a support ticket and send a sample project, would be even more helpful.

Thank you!

Regards,
Ivana
the Telerik team

[Wilher]

I have a similar problem, upgraded from version 2011 to version 2013, 2014 ... and the same problem happens in the picture attached AdvancedForm component is below the note that is taking into consideration only the Scheduler. 

I need that window is in modal window at all. 

This error only happens with Chrome 

In firefox, ie 9 works correctly.

[Ivan Zhekov]

Hello, Wilher.

The original thread is almost 4 years old and the last activity was about 2 years ago. Any information in this thread is likely to be outdated. In addition the problem is quite project specific due to each project having slightly different scenario.

Can you please open a new thread with detailed information for your project  /live URL / sample page. From the screenshot I saw you have custom styles. Please make sure you include those.

Regards,
Ivan Zhekov
Telerik