This is a migrated thread and some comments may be shown as answers.

How to set style of the PopUp Window

17 Answers 406 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 23 Sep 2008, 05:32 PM

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>

17 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 24 Sep 2008, 05:23 AM
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.
0
Steve Newbery
Top achievements
Rank 1
answered on 07 Dec 2008, 12:32 PM
Shinu,

How does this set the editforms's caption style? I don't see how it can do that ...
0
Yavor
Telerik team
answered on 08 Dec 2008, 07:07 AM
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.
0
Princy
Top achievements
Rank 1
answered on 08 Dec 2008, 07:47 AM
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.
0
Ben
Top achievements
Rank 1
answered on 09 Dec 2008, 11:57 PM

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
0
Shinu
Top achievements
Rank 1
answered on 10 Dec 2008, 05:21 AM
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
0
Ben
Top achievements
Rank 1
answered on 10 Dec 2008, 06:54 AM
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
0
Shinu
Top achievements
Rank 1
answered on 10 Dec 2008, 07:07 AM
Hi Ben,

Yes, I am using the Default Skin.

Shinu
0
Steve Newbery
Top achievements
Rank 1
answered on 10 Dec 2008, 09:57 PM

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




0
Yavor
Telerik team
answered on 11 Dec 2008, 06:48 AM
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.
0
Steve Newbery
Top achievements
Rank 1
answered on 11 Dec 2008, 01:24 PM
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

0
Sebastian
Telerik team
answered on 15 Dec 2008, 12:50 PM
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.
0
Steve Newbery
Top achievements
Rank 1
answered on 17 Dec 2008, 09:06 AM
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
0
Sebastian
Telerik team
answered on 17 Dec 2008, 09:09 AM
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.
0
Josh
Top achievements
Rank 1
answered on 22 Jan 2009, 06:16 PM
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> 



0
Kunal
Top achievements
Rank 1
answered on 19 Aug 2014, 02:53 PM
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>
0
Eyup
Telerik team
answered on 22 Aug 2014, 11:11 AM
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.
Tags
Grid
Asked by
Adam
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Steve Newbery
Top achievements
Rank 1
Yavor
Telerik team
Princy
Top achievements
Rank 1
Ben
Top achievements
Rank 1
Sebastian
Telerik team
Josh
Top achievements
Rank 1
Kunal
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or