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

Popup in editmode is missplaced, not centered

5 Answers 141 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mattias
Top achievements
Rank 1
Mattias asked on 23 Nov 2012, 01:26 PM
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

5 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 28 Nov 2012, 07:48 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Scott
Top achievements
Rank 1
answered on 06 Nov 2015, 02:52 PM

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

0
Konstantin Dikov
Telerik team
answered on 10 Nov 2015, 02:27 PM
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:
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devin
Top achievements
Rank 1
answered on 10 Mar 2017, 03:31 PM
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
0
Preslav
Telerik team
answered on 13 Mar 2017, 03:51 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Mattias
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Scott
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Devin
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or