Kendo Ui Grid Popup Template Positioning Issue

[sarat]

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

[Mark]

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

[Steven]

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.

[Steven]

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