Popup Edit Form
RadGrid supports Popup edit forms. The only prerequisite required is setting the EditMode property to Popup. Then, on switching an item in edit mode, RadGrid will display the edit form in a popup as shown in the following image:
Below is the markup, used in the example:
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AutoGenerateEditColumn="True" runat="server" AllowAutomaticDeletes="True"
Skin="Silk" DataSourceID="SqlDataSource1" AllowPaging="True" CellSpacing="0" GridLines="None"
OnItemDataBound="RadGrid1_ItemDataBound">
<PagerStyle Mode="NextPrevAndNumeric" />
<MasterTableView EditMode="PopUp" CommandItemDisplay="Top" DataKeyNames="CustomerID"
AutoGenerateColumns="True">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
</RowIndicatorColumn>
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
</ExpandCollapseColumn>
<EditFormSettings InsertCaption="Add new item" CaptionFormatString="Edit CustomerID: {0}"
CaptionDataField="CustomerID">
<EditColumn FilterControlAltText="Filter EditCommandColumn column">
</EditColumn>
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False">
<WebServiceSettings>
<ODataSettings InitialContainerName="">
</ODataSettings>
</WebServiceSettings>
</FilterMenu>
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Hay">
<WebServiceSettings>
<ODataSettings InitialContainerName="">
</ODataSettings>
</WebServiceSettings>
</HeaderContextMenu>
</telerik:RadGrid>
All types of edit forms can be displayed in Popup Edit Form: AutoGenerated, Template and WebUserControl.
The Popup EditForm settings are controlled through the PopUpSettings property of the GridEditFormSettings object. It exposes the following properties:
-
Height - defines the height of the popup in pixels or percentage.
-
Width - defines the width of the popup in pixels or percentage.
-
ScrollBars - defines whether and which scrollbars should appear in the edit form. This setting is with higher priority, so if Height is set but the vertical scrollbar is not shown and the content requires more room, the popup will be resized to accommodate the entire content. The default value is None.
-
KeepInScreenBounds - defines whether the popup EditForm will be allowed to leave the boundaries of the screen
Customizing the Popup Edit Form titlebar's appearance
In order to change the titlebar text appearance, please use the following CSS selector ("SkinName" should be replaced with the actual skin name):
<style type="text/css">
div.RadGrid_[SkinName] .rgEditForm .rgHeader
{
/*your custom styles here*/
}
</style>
Currently using Popup Edit Form when both grouping and scrolling are enabled is not supported in RadGrid due to browser limitation.
You can find this Popup Edit Forms in the following online examples:
Popup edit form live demo (C#)
Popup edit form live demo (VB)
Setting focus to an input control in the Popup edit form
Any input control could be focused with a call to its server-side Focus() method. However, when the input control is located in RadGrid PopUp edit form, the container of the form is added after focus has been set and the focus of the input control is lost. In this case to focus the input control you can define an extension method which will execute the code for focusing the control after certain delay.
This method is used the same way as the regular Focus method with the only difference that you need to pass as a parameter an int number that shows how many miliseconds to wait before setting the focus:
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
GridEditableItem editItem = (GridEditableItem)e.Item;
TextBox nameBox = (TextBox)editItem["CustomerID"].Controls[0];
//nameBox.Focus();
nameBox.Focus(100);
}
}
And the respective extension method:
public static class ControlExtensions
{
/// <summary>
/// Set input focus to a control after the specified number of milliseconds.
/// </summary>
public static void Focus(this Control control, int delay)
{
if (control == null)
{
throw new ArgumentNullException("control");
}
if (delay < 0)
{
throw new ArgumentOutOfRangeException("delay");
}
control.Focus();
ScriptManager.RegisterStartupScript(control, control.GetType(), "focus",
String.Format("setTimeout(\"WebForm_AutoFocus('{0}')\", {1});", control.ClientID, delay), true);
}
}