Kendo Ui Grid Popup Template Positioning Issue

4 posts, 0 answers
  1. sarat
    sarat avatar
    4 posts
    Member since:
    Aug 2012

    Posted 04 Sep 2012 Link to this post

    HI,
     we are showing a Popup from Kendo Ui Grid, The page is a Searc Page which has Dropdownlist and by selecting the value,
    a kendo ui grid will be shown with data and by clicking the Edit button  a popup is displayed. By using Ajax editing in grid, the popup is shown in center of the browser. but page refresh is not happening and dropdownlist is not populated.

     

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

    .Name(

     

    "Grid")

     

    .Columns(columns =>

    {

    columns.Bound(p => p.RoleType).Width(80);

    columns.Bound(p => p.Name).Width(100);

    columns.Bound(p => p.Status).Width(70);

    columns.Command(command => { command.Edit(); }).Width(100);

     

    })

    .Editable(editable => editable.Mode(

     

    GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

     

    .Pageable()

    .Sortable()

    .Scrollable()

    .DataSource(dataSource => dataSource

    .Ajax()

    .ServerOperation(

     

    false)

     

    .Model(model => model.Id(p => p.RoleID))

    .Read(

     

    "ManageRole", "ManageRole")

     

    .Update(

     

    "Update", "ManageRole")

     

    )

     

     

    By using Server editing the Popup orientation is at the bottom of the page and thewe are not able to set in center of the browser. Request you to help us in this issue.

     

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

    .Name(

     

    "Grid")

     

    .Columns(columns =>

    {

    columns.Bound(p => p.RoleType).Width(80);

    columns.Bound(p => p.Name).Width(100);

    columns.Bound(p => p.Status).Width(70);

    columns.Command(command => { command.Edit(); }).Width(100);

     

    })

    .Editable(editable => editable.Mode(

     

    GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

     

    .Pageable()

    .Sortable()

    .Scrollable()

    .DataSource(dataSource => dataSource

    .Server()

    .ServerOperation(

     

    false)

     

    .Model(model => model.Id(p => p.RoleID))

    .Read(

     

    "ManageRole", "ManageRole")

     

    .Update(

     

    "Update", "ManageRole")

     

    )

    Request you to help us in this

  2. Mark
    Mark avatar
    1 posts
    Member since:
    Sep 2012

    Posted 30 Sep 2012 Link to this post

    I'm running into the same issue where my popup window is positioned below my grid.  Can someone please explain to a newbie how to reposition the container window.  I'm using ASP.NET MVC 4 with the wrappers and Server binding, not Ajax.

    Thanks,
    Mark

  3. Steven
    Steven avatar
    8 posts
    Member since:
    Sep 2012

    Posted 11 Nov 2012 Link to this post

    I am having the same problem. MVC 4, Server editing mode, the popup is not centered on the screen but is displayed on the lower left region of the screen. Some help would be nice and an explanation why.
  4. Steven
    Steven avatar
    8 posts
    Member since:
    Sep 2012

    Posted 11 Nov 2012 Link to this post

    As a work around you can use jQuery to center the popup. In your head section of your _layout view add:
    <script type="text/javascript" language="javascript">
            jQuery.fn.center = function () {
                this.css("position", "absolute");
                this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) +
                                                    $(window).scrollTop()) + "px");
                this.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) +
                                                    $(window).scrollLeft()) + "px");
                return this;
            }
        </script>
    Now in your view where you call your script add this below the validation:
    $(".k-window").center();
    Thank you SO: Stackoverflow Adpated Answer
Back to Top