This is a migrated thread and some comments may be shown as answers.

ZIndex issue with advanced form

14 Answers 130 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 25 Nov 2010, 01:55 AM
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>

14 Answers, 1 is accepted

Sort by
0
Daniel
Top achievements
Rank 1
answered on 25 Nov 2010, 03:59 AM
Apologies, I just read this thread. It solves my problem.

Daniel
0
Keith
Top achievements
Rank 1
answered on 24 May 2011, 07:46 PM
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.
0
Jayesh Goyani
Top achievements
Rank 2
answered on 25 May 2011, 06:46 AM
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
0
Keith
Top achievements
Rank 1
answered on 25 May 2011, 05:29 PM
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.
0
Veronica
Telerik team
answered on 30 May 2011, 08:21 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Keith
Top achievements
Rank 1
answered on 02 Jun 2011, 03:51 PM
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.

0
Jayesh Goyani
Top achievements
Rank 2
answered on 02 Jun 2011, 05:33 PM
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
0
Veronica
Telerik team
answered on 08 Jun 2011, 08:19 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
vamshi
Top achievements
Rank 1
answered on 09 Oct 2012, 03:09 PM
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. 
0
Ivana
Telerik team
answered on 12 Oct 2012, 09:01 AM
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
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.
0
vamshi
Top achievements
Rank 1
answered on 12 Oct 2012, 02:57 PM
Hi,

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

0
Ivana
Telerik team
answered on 17 Oct 2012, 08:53 AM
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
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.
0
Wilher
Top achievements
Rank 1
answered on 24 Sep 2014, 02:41 PM
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.
0
Ivan Zhekov
Telerik team
answered on 24 Sep 2014, 04:50 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Scheduler
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Top achievements
Rank 1
Keith
Top achievements
Rank 1
Jayesh Goyani
Top achievements
Rank 2
Veronica
Telerik team
vamshi
Top achievements
Rank 1
Ivana
Telerik team
Wilher
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Share this question
or