Edit Caption Behavior

[Mike]

I am using a usercontrol for my grid edit form and have editmode set to popup.

When I edit an item in my grid, the popup edit form shows along with a caption bar along the top with a big "X" close-button at the right end of the caption bar.

I read here:

http://www.telerik.com/help/aspnet-ajax/grdcustomeditforms.html       

"Please note that all settings related to the edit form caption are applied only if the EditFormType is "AutoGenerated". Otherwise a caption is not rendered automatically by RadGrid, however, you can add a custom caption in the edit form template or user control edit form."

I thought this meant that having my EditFormType set to "WebUserControl" would suppress the rendering of a caption on the popup edit form.

I don't mind having a caption (I am able to put change the caption content via the captiondatavield and captionformatstring) but I am having trouble controlling its appearance.  The caption bar that renders is only about half as wide as the usercontrol that I have created as my edit form and any of the formatting I apply to *it* seems to only render as wide as the caption.  That is, I put a border around my edit form control and when it pops up, the border only shows around the left half of the form (showing only as wide as the rendered caption).

Is there a way to force the caption to be as wide as my control?  If not, is there a way to specifically suppress the rendering of the caption?

Thanks,

Mike

[Martin]

Hello Mike,

The caption of the popup edit form is rendered inside the form just below the title bar when AutoGenerated edit form is used. This online example demonstrates this behavior (the title bar contains the same text as the caption that is just bellow it).

In your case when title bar is not needed, you can hide it with a CSS rule:

<style type="text/css">
    .rgEditForm .rgHeader
    {
        display: none;
    }
</style>

I hope this helps.

All the best,
Martin
the Telerik team

[Mike]

Thanks for the reply.

What was puzzling to me was that I was seeing an automatically-generated caption even when I was using a pop-up UserControl as my edit form.  I thought the caption was only supposed to appear if the form was auto-generated.

I can put text into the caption, but it is only rendering half as wide as the usercontrol that I have defined.

Is there any way to control how wide the top caption-bar is rendered?  If not, I will probably use the css display control you suggested and simply suppress it entirely.

Mike

[Martin]

Hello Mike,

Straight onto your questions:

"What was puzzling to me was that I was seeing an automatically-generated caption even when I was using a pop-up UserControl as my edit form.  I thought the caption was only supposed to appear if the form was auto-generated."

As I tried to explain in my previous post, the caption itself is different that the title bar of the popup edit form. The title bar is always rendered no matter what kind of edit form type you are using (AutoGenerated, FormTemplate or UserControl). On the other hand the caption is just a text that is displayed inside the edit form when AutoGenerated edit form type is used. I have attached a sample image that shows the difference. In your scenario since UserControl edit form type is used, only the title bar should be visible.

"I can put text into the caption, but it is only rendering half as wide as the usercontrol that I have defined."

Unfortunately I can not reproduce the half-wide rendering of the title bar on my side. If you provide a sample runnable example demonstrating the problem, I will be able to provide you with more to the point resolution.

I hope this helps.

Greetings,
Martin
the Telerik team

[Mike]

Thanks, Martin.  That does help.  I didn't realize that the "title bar" and the "caption" were two different things.  Perhaps this was because the text that I was telling it to put into the caption was rendered in the title bar, as well as inside the edit form.

I'm not sure why the title bar of the popup is only half as wide as my usercontrol but I'm also not sure how to get an example to you that you could run.   I'm going to fool with it a while and see what happens and perhaps put together a small example for you if I can't make any further progress.

Mike

[Augusto]

Hello.

Thanks for you explanation about caption and title bar.

What should I change in the grid definition below to get rid of the caption (the text inside the form). I want to keep the title. In the current version the text in the title bar is replicated to the first line of the form.

The edit form is of type Popup, the columns are not auto generated.

Thanks for you help
Regards
Augusto

PS: I have solved the issue:

<PopUpSettings ShowCaptionInEditForm="false" />

<MasterTableView AutoGenerateColumns="false" TableLayout="Fixed" HeaderStyle-Wrap="false" EnableViewState="true" EditMode="PopUp">
     <Columns>
         <telerik:GridEditCommandColumn UniqueName="Edit" EditImageUrl="~/Images/Edit.gif" ButtonType="ImageButton" HeaderStyle-Width="20px" ItemStyle-HorizontalAlign="Center" EditText="Click to edit" />
         <telerik:GridBoundColumn DataField="DataVersionId" DataType="System.String" Visible="false" ReadOnly="true" />
         <telerik:GridBoundColumn DataField="ShortName" DataType="System.String" HeaderText="Name"
             SortExpression="ShortName" UniqueName="ShortName" HeaderStyle-Width="80px" />
         <telerik:GridImageColumn HeaderText="Locked" DataImageUrlFields="IsLockedImage"
             SortExpression="IsLockedImage" UniqueName="IsLocked"
             HeaderStyle-Width="45px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" DataImageUrlFormatString="../Images/{0}.gif" />
         <telerik:GridBoundColumn DataField="IsLockedImage" UniqueName="IsLockedImage" Visible="false" ReadOnly="true" />
         <telerik:GridDropDownColumn DataField="TypeId" UniqueName="ComboType"
             ListTextField="TypeName" ListValueField="TypeId"
             HeaderText="Type" HeaderStyle-Width="50px" DataSourceID="ComboDataSource" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
         <telerik:GridBoundColumn DataField="Name" DataType="System.String" HeaderText="Description"
             SortExpression="Name" UniqueName="Name" HeaderStyle-Width="275px" />
         <telerik:GridBoundColumn DataField="Year" DataType="System.Int32" HeaderText="Year"
             SortExpression="Year" UniqueName="Year" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
         <telerik:GridBoundColumn DataField="BaseVersion" DataType="System.String" HeaderText="Base Version"
             SortExpression="BaseVersion" UniqueName="BaseVersion" HeaderStyle-Width="100px" />
     </Columns>
     <EditFormSettings InsertCaption="New Data Version" CaptionFormatString="Edit Data Version <b>{0}</b>" CaptionDataField="ShortName" >
     </EditFormSettings>
 </MasterTableView>