ZIndex issue with advanced form

15 posts, 0 answers
  1. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 24 Nov 2010 Link to this post

    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>

  2. Daniel
    Daniel avatar
    175 posts
    Member since:
    Feb 2009

    Posted 24 Nov 2010 Link to this post

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

    Daniel
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 24 May 2011 Link to this post

    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.
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 25 May 2011 Link to this post

    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
  6. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 25 May 2011 Link to this post

    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.
  7. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 30 May 2011 Link to this post

    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.

  8. Keith
    Keith avatar
    61 posts
    Member since:
    May 2008

    Posted 02 Jun 2011 Link to this post

    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.

  9. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 02 Jun 2011 Link to this post

    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
  10. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 08 Jun 2011 Link to this post

    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.

  11. vamshi
    vamshi avatar
    2 posts
    Member since:
    Aug 2012

    Posted 09 Oct 2012 Link to this post

    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. 
  12. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 12 Oct 2012 Link to this post

    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.
  13. vamshi
    vamshi avatar
    2 posts
    Member since:
    Aug 2012

    Posted 12 Oct 2012 Link to this post

    Hi,

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

  14. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 17 Oct 2012 Link to this post

    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.
  15. Wilher
    Wilher avatar
    2 posts
    Member since:
    Sep 2014

    Posted 24 Sep 2014 Link to this post

    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.
  16. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 24 Sep 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017