New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Center PopUp Edit Form in RadGrid

In some case where RadGrid uses PopUp edit forms for inserting/updating records, you may want to specify the pop-up form position on the page. For that purpose hook up the OnPopUpShowing client-side event of RadGrid to change the default position of the PopUp edit form.

Below is an example showing how to center the edit form in RadGrid:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">

    var popUp;
    function PopUpShowing(sender, eventArgs) {
      popUp = eventArgs.get_popUp();
      var gridWidth = sender.get_element().offsetWidth;
      var gridHeight = sender.get_element().offsetHeight;
      var popUpWidth =,"px"));
      var popUpHeight =,"px")); = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px"; = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";


<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AutoGenerateEditColumn="true" runat="server" AllowAutomaticDeletes="True"
  AllowAutomaticInserts="True" AllowAutomaticUpdates="True" DataSourceID="SqlDataSource1"
  AllowSorting="true" Skin="Silk" AllowPaging="true">
  <MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="ProductID">
    <EditFormSettings CaptionFormatString="Edit ProductID: {0}" CaptionDataField="ProductID"
      PopUpSettings-Height="260px" PopUpSettings-Width="400px" />
    <ClientEvents OnPopUpShowing="PopUpShowing" />
    <Selecting AllowRowSelect="true" />
In this article