[Solved] RadGrid edit form popup

[pbarron]

I have a RadGrid wich use a popup form.
I have disabled 'EnableEmbeddedSkins' and so using my own style.  What I can not seam to do is change the close (x) button at the top right of the popup box.

I have tried setting the EditColumn-CancelImageUrl to a differet img but not nothing had changed.

 <EditFormSettings CaptionFormatString="Edit Business Unit: {0}" EditFormType="Template"  EditColumn-CancelImageUrl="../img/grid/Cancel.gif" CaptionDataField="BusinessUnit" >
                <FormStyle BackColor="#eef1ba" BorderColor="#3b3b3a"   BorderWidth="1" BorderStyle="Solid"  />
                <FormTemplate>
                    <div class="Editform">
                        <!-- Business unit -->
                        <div>
                            <label>
                                <asp:Label ID="lblBusinessUnit" runat="server" Text="Business Unit: "></asp:Label></label>
                            <asp:TextBox ID="txtBusinessUnit" runat="server" CssClass="textInput" Width="200"
                                TabIndex="1" Text='<%# Bind( "BusinessUnit") %>'></asp:TextBox>
                        </div>
                        <br style="clear: both;" />
                        <!-- Archive -->
                        <div>
                            <label>
                                <asp:Label ID="lblArchive" runat="server" Text="Archive"></asp:Label>
                            </label>
                            <asp:CheckBox ID="chkArchive" runat="server" Checked='<%# (DataBinder.Eval(Container.DataItem,"Archive").ToString()!="False"?true:false) %>' />
                            <telerik:GridCheckBoxColumnEditor ID="GridCheckBoxColumnEditor1" runat="server">
                            </telerik:GridCheckBoxColumnEditor>
                        </div>
                        <br style="clear: both;" />
                        <div>
                            <label>
                            </label>
                            <asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                            </asp:Button>&nbsp;
                            <asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                CommandName="Cancel"></asp:Button>
                        </div>
                    </div>
                </FormTemplate>
                <PopUpSettings ScrollBars="None" Height="150" Width="400"></PopUpSettings>
            </EditFormSettings>

Thanks
Paul

[Shinu]

Hi,

Go through the following help document link.
Popup Edit Form

Shinu.

[pbarron]

Yes I have already been there but can not see anything that helps

[Dimo]

Hi Paul,

I have to admit that currently the popup edit form does not provide a flexible way to change its "close" button. We will consider improving this for a future release.

However, you can use some CSS code to change the icon. Basically, you will hide the current image and set a new background image to the hidden image's parent element (which is an <a> element).


CSS
====

/* hides the close image */

.GridEditForm_Skin  .GridHeader_Skin  a  img
{
    display: none;
}

/*sets a new background and dimensions to the hidden image's parent */

.GridEditForm_Skin  .GridHeader_Skin  a
{
    display: block;
    width: ...px ;
    height: ...px ;
    background: url(_new_image_url_here_) center center no-repeat;
}


The width and height styles above depend on the dimensions of the new "close" icon you would like to use.

Let us know how it goes.


All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[pbarron]

Great thanks that has fixed that.