Datepicker appearing behind dialog

[Christopher Ronak]

I'm using a datepicker on a Jquery-UI dialog and the calendar appears behind the dialog.

I've set the z-index of the dialog to be 0. I tried both htmlattributes and Inputhtmlattributes z-index, and still no luck. The input box appears fine, but when i click on the button for the calendar, it's hidden.

Here's my call:

<%= Html.Telerik().DatePicker()
    .HtmlAttributes(new{style="z-index:1000"})
          .Name("NewLaborHireDate")
          .Format("yyyy-mm-dd")
          .InputHtmlAttributes(new { style = "z-index:1000" })
          .ShowButton(true)
%>

Thanks for your help,

Chris

[dstj]

Hi,

Did you ever get an answer on this ?

I've got the same problem with my DatePicker in a jQuery Fancybox: the calendar is appearing behind the fancybox popup.

Dominic.

[Yitzhak Khabinsky]

We had the same problem.
The solution was to set jQuery UI dialog z-index, instead of the Telerik Datepicker, like the following snippet:

    $("#NewFeeDialog").dialog({

        autoOpen: false,

        modal: true,

        height: 200,

        width: 400,

        position: 'center',

        resizable: false,

        zIndex: -1,

        overlay: {

            backgroundColor: '#000',

            opacity: 0.9

        },

        buttons: {

            "Submit": function() {

                if ($("#newFee").text().trim() == "") {

                    $(this).dialog("close");

                }

                else {

                    $("#NewFeeForm").submit();

                }

            },

            "Cancel": function() {

                $(this).dialog("close");

            }

        }

    });

Regards,
Yitzhak