Popup in editmode is missplaced, not centered

6 posts, 0 answers
  1. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 23 Nov 2012 Link to this post

    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?
        .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 =>
                }).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.

  2. Vladimir Iliev
    Vladimir Iliev avatar
    2200 posts

    Posted 28 Nov 2012 Link to this post

    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() {       
        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");

    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!
  3. Scott
    Scott avatar
    6 posts
    Member since:
    May 2015

    Posted 06 Nov 2015 Link to this post

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

  4. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 10 Nov 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Devin
    Devin avatar
    8 posts
    Member since:
    May 2015

    Posted 10 Mar 2017 in reply to Konstantin Dikov Link to this post

    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
  6. Preslav
    Preslav avatar
    570 posts

    Posted 13 Mar 2017 Link to this post

    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.

    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.
Back to Top