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 = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));
var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));
popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";
popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";
}
</script>
</telerik:RadCodeBlock>
<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" />
</MasterTableView>
<ClientSettings>
<ClientEvents OnPopUpShowing="PopUpShowing" />
<Selecting AllowRowSelect="true" />
</ClientSettings>
</telerik:RadGrid>