Popup in editmode is missplaced, not centered

[Mattias]

Hi,
I'm using the grid with server binding and asp.net mvc.
When I click "add new item"-button to open popup editing, the window wont center on the screen.
As you see in image below it placed below the grid.


What have I done wrong?

@(Html.Kendo().Grid(Model.Items)

    .Name("PlacesGrid")

    .ToolBar(commands => commands.Create())

    .DataSource(dataBinding =>

    {

        dataBinding.Server().Model(mod => mod.Id(x => x.ID))

            .Create("Insert", "Place")

            .Update("Update", "Place")

            .Destroy("Delete", "Place");

    })

    .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))

         

    .Columns(columns =>

    {

        columns.Bound(x => x.Name).Title(Resources.Resource.PlaceName);

        columns.Bound(x => x.IsPublished).Title(Resources.Resource.IsPublished)

            .HeaderHtmlAttributes(new { @class = "center" })

            .HtmlAttributes(new { @class = "center" });

        columns.Bound(x => x.WebserviceUrl).Title(Resources.Resource.WebserviceUrl);

        columns.Bound(x => x.CreateDate).Title(Resources.Resource.CreateDate).Format("{0:g}")

            .HeaderHtmlAttributes(new { @class = "right" })

            .HtmlAttributes(new { @class = "right" });

 

        columns.Command(commands =>

            {

                commands.Edit();

                commands.Destroy();

            }).Width(200).Title("").HtmlAttributes(new { @style = "text-align:right" });

    })

)

Just for test I took one of your javascript demogrids and added to the page, and that one is centered when I click its button.
So the problem is just with mvc grid and server binding.

Regards,
Mattias

[Vladimir Iliev]

Hi Mattias,

 

Thank you for bringing that issue to our attention - I informed our dev team and they are after it. As a workaround you should call JavaScript function on document ready to center the Popup. Please check the example below:

<script type="text/javascript">
    $(document).ready(function() {
        centerWindow("PlacesGrid");
    });

    function centerWindow(gridName) {
        var popupId = "#" + gridName + "PopUp";
        $(popupId).parent().css("top", Math.max(0, (($(window).height() - $(popupId).parent().outerHeight()) / 2) + $(window).scrollTop()) + "px");
        $(popupId).parent().css("left", Math.max(0, (($(window).width() - $(popupId).parent().outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    }
</script>

 
Kind Regards,
Vladimir Iliev
the Telerik team

[Scott]

I am also having this issue. I tried the solution above but it did not fix the problem.

Kendo version - 2015.2.624

This is my javascript for the editable object of the grid.

editable: {
               mode: "popup"
               ,
               window: {
                   resizable: false,
                   modal: true,
                   draggable: false,
                   visible: true
               }             }

[Konstantin Dikov]

Hi Scott,

With version 2015.2 624 there should be no problems with the popup window and you could test this in the following dojo example:

• http://dojo.telerik.com/AYADi

If the issue on your side persists, please try to prepare a dojo example that replicates it, so we can test it locally.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Devin]

This is still an issue. The popup in your example shows up at the bottom of the window and not in the center. Please advise

[Preslav]

Hello Devin,

As you have submitted a support ticket on the same topic, it would be better to get the details and investigate the issue through the ticket which is private and comes with a guaranteed response time. Once we get to the bottom of this. I'll update this thread with more information for the community in case anyone else encounters the same.

Regards,
Preslav
Telerik by Progress