How to set style of the PopUp Window

[Adam]

I'm having trouble getting the popup window to look like what I want it to. First of all, the content is bleeding outside the window (I'm using a fixed height for the window and Scrollbars="Auto"). I'd like some control over the way the caption/header looks, as well as over the content/body. There are properties of an edit form for FormCaptionStyle, FormStyle, FormMainTableStyle, etc., but these don't appear to apply to the PopupForm.

I checked into this post, but unless I'm using an older version of the control, there is no <FormTemplate> beneath <PopUpSettings>. I'm using 2008_2_286.

Lastly, I can't seem to get any CssClass property to override the default settings.

Here's a simplified version of what my code currently looks like. Does anyone have any suggestions on how to style up the popup a bit more?

<EditFormSettings  CaptionDataField="ID" EditFormType="webUserControl" UserControlName="myControl.ascx">

     <FormCaptionStyle Font-Bold="true" HorizontalAlign="right" />

     <PopUpSettings ScrollBars="Auto" Modal="true" Width="650" Height="500" />

</EditFormSettings>

[Shinu]

Hi Adam,

Try the following code snippet in the ItemDataBound event.

CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if((e.Item is GridEditFormItem)&& (e.Item.IsInEditMode))
        {
            GridEditFormItem editForm = (GridEditFormItem)e.Item;
            editForm.EditFormCell.CssClass = "class1";
        }
   }

Style.css:

  <style  type="text/css" >

   .class1
   {
     position:absolute;
     top:100px;
     left:100px;

   }

</style>

Thanks
Shinu.

[Steve Newbery]

Shinu,

How does this set the editforms's caption style? I don't see how it can do that ...

[Yavor]

Hello Steve,

You have two options to style the caption. First, you can get a reference to it programatically, and set the necessaty style attributes. Alternatively, you can use the EditFormSettings-CaptionFormatString setting, if you are only interested in setting the text.
Another option would be to use a template, to style the look of the popup edit form:

.aspx

<EditFormSettings EditFormType="Template">
<FormTemplate>
test
</FormTemplate>
</EditFormSettings>

I hope these suggestions help.

All the best,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Princy]

Hi Steve,

You can use following code snippet in order to set the style of the edit form caption programmatically.

CS:

RadGrid1.MasterTableView.EditFormSettings.FormCaptionStyle.Font.Bold = true;

Thanks,
Princy.

[Ben]

I have tried to style the caption from within the designer as well as programmatically and haven't had any luck.  My caption text is being set OK, but on insert the caption is not bold as I would expect based on the code block below:

	protected void DepartmentGrid_ItemCommand(object source, GridCommandEventArgs e)
	{
	if (e.CommandName == RadGrid.EditCommandName)
	{
	e.Item.OwnerTableView.EditFormSettings.CaptionDataField = "DepartmentName";
	e.Item.OwnerTableView.EditFormSettings.CaptionFormatString = "Update {0}";
	}
	else if (e.CommandName == RadGrid.InitInsertCommandName)
	{
	// need to set CaptionDataField to "" otherwise caption will be blank
	e.Item.OwnerTableView.EditFormSettings.CaptionDataField = "";
	e.Item.OwnerTableView.EditFormSettings.CaptionFormatString = "Add Department";
	e.Item.OwnerTableView.EditFormSettings.FormCaptionStyle.Font.Bold = true;
	e.Item.OwnerTableView.EditFormSettings.FormCaptionStyle.Height = 55;
	e.Item.OwnerTableView.Rebind();
	}
	}

Any thoughts?  I've tried with and without a skin and still no luck.

Thanks,
Ben

[Shinu]

Hi Ben,

I tried with your code on my end and it is working fine. Not sure what is wrong on your end. Which version of the Grid you are using? I am using RadGrid(2008.03.1125.20).

Shinu

[Ben]

I am using version 2008.2.1001.20.

Are you using a Skin?  I have not been able to get to work with no Skin, a Skin, or a Custom Skin...

Thanks,
Ben

[Shinu]

Hi Ben,

Yes, I am using the Default Skin.

Shinu

[Steve Newbery]

Shinu, Yavor, Adam,

I have tried setting the form caption's style declaratively:

<EditFormSettings EditFormType="Template"
    CaptionFormatString="Edit Order"
    FormCaptionStyle-CssClass="captionStyle">

and also programatically in the ItemCreated event:

    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)
        If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
            RadGrid1.MasterTableView.EditFormSettings.FormCaptionStyle.CssClass = "captionStyle"
        End If
    End Sub

But neither approach works. The only way I have found so far to work is by overriding the skin's GridHeader style like so:

div.GridHeader_Web20
{
    font-size: 16px !important;
    font-weight: bold !important;
}

This is probably not the best practice, but it does work.

Here is a complete simple page that demonstrates the problem, it just needs the usual Nwind.mdb for it to run. I'm wondering if the issue is to do with using form templates?

<%@ Page Language="VB"  ValidateRequest="false" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs)
        If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
            RadGrid1.MasterTableView.EditFormSettings.FormCaptionStyle.CssClass = "captionStyle"
        End If
    End Sub

    Protected Sub RadGrid1_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs)
        If e.CommandName = "InitInsert" Or e.CommandName = "Edit" Then
            RadGrid1.MasterTableView.EditFormSettings.FormCaptionStyle.CssClass = "captionStyle"
        End If
    End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style>
        .captionStyle
        {
            font-weight:bold;
            color:Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid1" runat="server"
                AutoGenerateColumns="False"
                PageSize="3"
                AllowSorting="True"
                AllowPaging="True"
                DataSourceID="AccessDataSource1"
                onitemcreated="RadGrid1_ItemCreated"
                onitemcommand="RadGrid1_ItemCommand">
                <MasterTableView
                    DataKeyNames="OrderID"
                    Name="Orders" Width="100%"
                    DataSourceID="AccessDataSource1"
                    EditMode="PopUp"
                    CommandItemDisplay="Bottom">
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                            DataField="OrderID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                            DataField="OrderDate">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Freight" HeaderText="Freight" HeaderButtonType="TextButton"
                            DataField="Freight">
                        </telerik:GridBoundColumn>
                        <telerik:GridEditCommandColumn
                            ButtonType="LinkButton"
                            EditText="Edit"
                            UniqueName="EditColumn">
                        </telerik:GridEditCommandColumn>
                    </Columns>
                        <EditFormSettings EditFormType="Template"
                            CaptionFormatString="Edit Order"
                            FormCaptionStyle-CssClass="captionStyle">
                        <FormTemplate>

                            <table runat="server">
                                <tr>
                                    <td>OrderDate</td>
                                    <td><telerik:RadTextBox ID="OrderDateTextBox" runat="server"
                                            Text='<%# Bind("OrderDate") %>'>
                                        </telerik:RadTextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Freight</td>
                                    <td><telerik:RadTextBox ID="FreightRadTextBox" runat="server"
                                            Text='<%# Bind("Freight") %>'>
                                        </telerik:RadTextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right" colspan="2">
                                        <asp:Button ID="EditFormUpdateButton" Text='<%# Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'
                                            runat="server"
                                            CommandName='<%# Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'>
                                        </asp:Button>&nbsp;
                                        <asp:Button ID="EditFormCancelButton" Text="Cancel" runat="server"
                                            CausesValidation="False" CommandName="Cancel">
                                        </asp:Button>
                                    </td>
                                </tr>
                            </table>
                        </FormTemplate>
                    </EditFormSettings>

                </MasterTableView>
            </telerik:RadGrid>

            <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"
                SelectCommand="SELECT * FROM Orders">
            </asp:AccessDataSource>

        </div>
    </form>
</body>
</html>

Regards, Steve

[Yavor]

Hi Steve,

Can you please temporarily disable the current skin that you are using for the control, to make sure that it is not overriding the setting(s) that you want to apply.

Best wishes,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Newbery]

Yavor, I'm not explicitly using a skin, so the Default one is used.

When I put Skin="", then the whole thing becomes a mess - the popup window loses all its elements etc etc.

Are you able to reproduce this using the page I attached in my last post? If you like I can send a complete project.

Steve

[Sebastian]

Hi Steve,

Unfortunately we are not able to recreate the issue locally - does using the technique with higher specificity explained in this blog post on our site produces the desired result? If the problem remains, please isolate a stripped working version of your project and send it enclosed to a regular support ticket. We will examine it locally and will get around to you with more info on the subject.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Newbery]

Sebastian,

The blog you refer to is interesting, but is about overriding specific skin css. I'm just trying to use EditFormSettings -> FormCaptionStyle-CssClass. 

I have started a ticket, and uploaded a simple project that demonstrates the problem.

Regards, Steve

[Sebastian]

Hi Steve,

We will review the project from the support thread and will get back to you with our findings shortly.

Kind regards,
Sebastian
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Josh]

I've found a method for altering the caption style.  On the page that contains my RadGrid I have some Javascript that is hiding the close button of the Popup (which I found in another thread of this forum.)  I altered the code slightly and was able to access the div tag that contains the Caption.

<script type="text/javascript">
            var popUp;
            function PopUpShowing(sender, eventArgs) {
                //center the pop-up edit form
                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";

                //hide the form close button
                var closeImage;
                var caption;
                if (popUp.childNodes[0].tagName == "DIV") {
                    //IE
                    closeImage = popUp.childNodes[0].childNodes[1].childNodes[0];
                    caption = popUp.childNodes[0].childNodes[0];
                }
                else {
                    //FF
                    closeImage = popUp.childNodes[1].childNodes[2].childNodes[1];
                    caption = popUp.childNodes[1].childNodes[1];
                }
                closeImage.style.display = "none";
                caption.style.fontSize = "Large";
            }
        </script>

To fire this Javascript off when the window is opening hook into the OnPopUpShowing ClientEvent of your RadGrid

 <ClientSettings>
            <ClientEvents OnPopUpShowing="PopUpShowing" />
</ClientSettings>

[Kunal]

Hi,

I want to disable double click on close button of  <EditFormSettings> popup window.
Because
if I double click on the close button of any <EditFormSettings>
popup window it takes more time to close the popup.
Code :

<EditFormSettings EditFormType="WebUserControl" PopUpSettings-Modal="true" UserControlName="../abc.ascx"
                                PopUpSettings-Width="800px" PopUpSettings-Height="500px" CaptionFormatString="Invoice for {0}"
                                CaptionDataField="InvoiceNumber" EditColumn-HeaderButtonType="LinkButton" >
                               
<EditColumn CancelImageUrl="cancelIcon.png"
InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif"
                                    EditImageUrl="editIcon.png">
                                </EditColumn>
                                <PopUpSettings Width="830px"></PopUpSettings>
                            </EditFormSettings>

[Eyup]

Hello Kunal,

I am afraid it is difficult to figure out your exact requirement - can you provide us detailed steps how can we reproduce the described behavior? Do you replicate it with the following live sample?
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/edit-form-types/defaultcs.aspx

Kind regards,
Eyup
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.