RadGrid with UserControl Edit Mode

[Kevin]

I'm using a custom user control to handle inserting/updating data displayed in my RadGrid.  When using the popup edit mode, with modal set to 'true', some of my web controls within the user control do not load properly.  For example, I am using AJAX HTMLExtender with asp:textbox.  If I load the user control in editforms mode the the control displays normally with the toolbar across the top of the textbox.  However, when I load the user control in popup mode with modal set to 'true' textbox doesn't load at all.  Also, it appears that javascript within the user control does not fire in popup mode with modal turned on.  Can some one explain this disparity?  I wish to use the popup mode with modal set to 'true', as it's more intuitive to my user community.

Thanks,
Kevin

[Andrey]

Hi,

Could you elaborate a bit more about your project, RadGrid declaration with the respective event handlers, all the Ajax setting if you are using Ajax will be a good start.

Thus all the people who want to help you will better understand your project and they will be able to give you more accurate suggestions in less time.

Regards,
Andrey
the Telerik team

[Kevin]

Hi Andrey,

I was able to get around my issues by using the RadEditor.  I had no problems at all viewing toolbars for RadEditor when viewing my user control with popup modal settings.

However, I would have thought the AJAX HTMLExtender could have worked as well.  It did not, as the textbox w/HtmlExtender seemed to render at the size of a checkbox with no visible toolbar in popup modal=true.  If I viewed the user control in EditForms mode, I could see my textbox w/the respective HtmlExtender and toolbar.  Here's a snippet of the settings (BTW I have not added scriptmanager b/c it's already included in the master page):

<%

 

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

 

<

 

 

style type="text/css">

 

 

 

.rgExpand

 

{

 

 

background: url('../Images/plus.gif') center center no-repeat !important;

 

}

 

 

 

.rgCollapse

 

{

 

 

background: url('../Images/minus.gif') center center no-repeat !important;

 

}

 

 

 

</style>

 

<!-- Main Form -->
<asp:Content>

<

 

 

telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

 

<AjaxSettings>

 

 

 

<telerik:AjaxSetting AjaxControlID="RadGrid1">

 

 

 

<UpdatedControls>

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

 

<telerik:AjaxUpdatedControl ControlID="divMsgs" />

 

 

 

</UpdatedControls>

 

 

 

</telerik:AjaxSetting>

 

 

 

<telerik:AjaxSetting AjaxControlID="lnkbtnShowAll">

 

 

 

<UpdatedControls>

 

 

 

<telerik:AjaxUpdatedControl ControlID="lbtnShowAll" />

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

 

</UpdatedControls>

 

 

 

</telerik:AjaxSetting>

 

 

 

<telerik:AjaxSetting AjaxControlID="lnkbtnHideAll">

 

 

 

<UpdatedControls>

 

 

 

<telerik:AjaxUpdatedControl ControlID="lbtnHideAll" />

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

 

 

 

</UpdatedControls>

 

 

 

</telerik:AjaxSetting>

 

 

 

</AjaxSettings>

 

 

 

</telerik:RadAjaxManager>

 

 

 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Hay" />

 

 

 

<telerik:RadGrid ID="RadGrid1" runat="server" 
    

 

 

 

DataSourceID="MyDataSource" AutoGenerateColumns="False" Skin="Hay"

 

 

 

AllowPaging="True" CellSpacing="0" Width="100%" GridLines="None">

 

 

 

 

 

 

 

<MasterTableView DataKeyNames="KeyID" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Wrap="false"

 

 

 

InsertItemPageIndexAction="ShowItemOnCurrentPage" AllowSorting="true" EditMode="PopUp" Width="100%" CommandItemDisplay="Top"

 

 

 

 

 

 

 

CommandItemSettings-ShowRefreshButton="false" CommandItemSettings-AddNewRecordText=" Add New Master"

 

 

 

CommandItemSettings-AddNewRecordImageUrl="../images/newitem.gif">

 

 

 

 

 

 

 

<Columns>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="KeyID" HeaderText="Key ID" UniqueName="KeyID" SortExpression="KeyID"

 

 

 

ForceExtractValue="Always" ItemStyle-Wrap="false" ItemStyle-Font-Bold="true" ReadOnly="true" />

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="KeyArea" HeaderText="Key Area" UniqueName="KeyArea" SortExpression="KeyArea" />

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Description" UniqueName="KeyDescription" DataField="KeyDescription">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

 

<asp:Label ID="lblKeyDescription" runat="server"

 

 

 

Text='<%# TrimDescription(DirectCast(IIF(Eval("KeyDescription") IsNot DBNull.Value,Eval("KeyDescription"),string.Empty),String)) %>'

 

 

 

Tooltip='<%# Eval("KeyDescription") %>' />

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="Sponsor" HeaderText="Sponsor" UniqueName="KeySponsor" SortExpression="KeySponsor" />

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Image" UniqueName="KeyImage" DataField="ImageID">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

 

<asp:Image ID="imgKeyImage" Height="80px" Width="80px" ImageAlign="Middle" runat="server" ToolTip="KeyImage"

 

 

 

ImageUrl='<%# Eval("ImageID", "../../FileHandler.ashx?ID={0}") %>' />

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="../images/edititem.gif" />

 

 

 

 

 

 

 

</Columns>

 

 

 

 

 

 

 

<DetailTables>

 

 

 

 

 

 

 

<telerik:GridTableView DataSourceID="DtlDataSource" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Wrap="false"

 

 

 

DataKeyNames="SkillID" InsertItemPageIndexAction="ShowItemOnCurrentPage" AllowSorting="true"

 

 

 

 

 

 

 

EditMode="PopUp" Width="100%" BorderWidth="10px" CommandItemDisplay="Top" CommandItemSettings-ShowRefreshButton="false"

 

 

 

 

 

 

 

CommandItemSettings-AddNewRecordText=" Add New Detail" CommandItemSettings-AddNewRecordImageUrl="../images/newitem.gif">

 

 

 

 

 

 

 

<ParentTableRelation>

 

 

 

 

 

 

 

<telerik:GridRelationFields DetailKeyField="KeyID" MasterKeyField="KeyID" />

 

 

 

 

 

 

 

</ParentTableRelation>

 

 

 

 

 

 

 

<Columns>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="DtlID" HeaderText="Detail ID" UniqueName="DtlID" SortExpression="DtlID"

 

 

 

ForceExtractValue="Always" ItemStyle-Wrap="false" ItemStyle-Font-Bold="true" ReadOnly="true" />

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="KeyID" UniqueName="AreaID" SortExpression="KeyID"

 

 

 

ForceExtractValue="Always" ItemStyle-Font-Bold="true" ReadOnly="true" Visible="false" />

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="Detail" HeaderText="Detail" UniqueName="Detail" SortExpression="Detail" />

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Description" UniqueName="DtlDescription" DataField="Description">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

 

<asp:Label ID="lblDescription" runat="server"

 

 

 

Text='<%# TrimDescription(DirectCast(IIF(Eval("DtlDescription") IsNot DBNull.Value,Eval("DtlDescription"),string.Empty),String)) %>'

 

 

 

Tooltip='<%# Eval("DtlDescription") %>' />

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="Sponsor" HeaderText="Sponsor" UniqueName="SkillSponsor" SortExpression="SkillSponsor" />

 

 

 

 

 

 

 

<telerik:GridCheckBoxColumn DataField="IsFoundation" HeaderText="Is Foundation?" ItemStyle-HorizontalAlign="Center" />

 

 

 

 

 

 

 

<telerik:GridTemplateColumn HeaderText="Image" UniqueName="DtlImage" DataField="ImageID">

 

 

 

 

 

 

 

<ItemTemplate>

 

 

 

 

 

 

 

<asp:Image ID="imgSkillImage" Height="80px" Width="80px" ImageAlign="Middle" runat="server" ToolTip="Skill Image"

 

 

 

ImageUrl='<%# Eval("ImageID", "../../FileHandler.ashx?ID={0}") %>' />

 

 

 

 

 

 

 

</ItemTemplate>

 

 

 

 

 

 

 

</telerik:GridTemplateColumn>

 

 

 

 

 

 

 

<telerik:GridBoundColumn DataField="None" HeaderText="None" Visible="false" />

 

 

 

 

 

 

 

 

 

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="../images/edititem.gif" />

 

 

 

 

 

 

 

</Columns>

 

 

 

 

 

 

 

<EditFormSettings EditFormType="WebUserControl" UserControlName="../controls/DtlDetails.ascx"

 

 

 

CaptionFormatString="Details for: {0}" CaptionDataField="DtlID">

 

 

 

 

 

 

 

<EditColumn ButtonType="ImageButton" />

 

 

 

 

 

 

 

<PopUpSettings Modal="true" Width="1265px" />

 

 

 

 

 

 

 

</EditFormSettings>

 

 

 

 

 

 

 

</telerik:GridTableView>

 

 

 

 

 

 

 

</DetailTables>

 

 

 

 

 

 

 

<EditFormSettings EditFormType="WebUserControl" UserControlName="../controls/KeyDetails.ascx"

 

 

 

CaptionFormatString="Key Details for: {0}" CaptionDataField="KeyID">

 

 

 

 

 

 

 

<EditColumn ButtonType="ImageButton" />

 

 

 

 

 

 

 

<PopUpSettings Modal="true" Width="700px" />

 

 

 

 

 

 

 

</EditFormSettings>

 

 

 

</MasterTableView>

 

 

 

 

 

 

 

<PagerStyle Mode="NumericPages"></PagerStyle>

 

 

 

 

 

 

 

</telerik:RadGrid>
</asp:Content>

<!-- User Control -->

 

<%

 

@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 

 

 

 

 

<

 

 

style type="text/css">

 

 

 

 

 

 

 

 

.sklTDLayout

 

 

 

 

{

 

 

 

vertical-align: top;

 

 

 

width: 535px;

 

}

 

 

 

.sklTableLayout

 

 

 

 

{

 

 

 

width: 100%;

 

 

 

border-collapse: collapse;

 

}

 

 

 

label

 

 

 

 

{

 

 

 

display: block;

 

 

 

float: left;

 

 

 

width: 18%;

 

}

 

 

</

 

 

style>

 

 

 

 

 

 

 

 

<table cellspacing="3" cellpadding="2" border="0" rules="none" class="sklTableLayout">

 

 

 

 

 

 

 

<tr>

 

 

 

 

 

 

 

<td class="sklTDLayout">

 

 

 

 

 

 

 

<label>None:</label><asp:TextBox ID="txtNone" runat="server" Height="150px" Width="420px"

 

 

 

 

 

 

 

TextMode="Multiline" Text='<%# DataBinder.Eval(DataItem, "None") %>' />
<asp:HtmlEditorExtender ID="hee" runat="server" TargetControlID="txtNone" />

 

 

 

 

 

 

 

</td> 

 

 

 

</tr>

 

 

 

 

 

 

 

 

 

[Andrey]

Hi,

The problem with the popup edit form is caused by that the HTMLEditorExtender  control calculates its dimensions and set them as zero. This is caused by that the extender control is rendered before the popup form and it could not get the correct dimensions of the form.

You could overcome this issue by modifying the CSS class that is applied to the extender control as follows:

.ajax__html_editor_extender_container
{
    height: auto !important;
    width: auto !important;
}

In addition I will recommend to use RadEditor, because it allows precise customization of the look and feel and it is easier to use.

Give this approach a try and check whether the issue is resolved.

Greetings,
Andrey
the Telerik team

[Kevin]

Thanks Andrey!

The CSS change for HTMLExtender did worked for me, so good education for next time.  For now, I'm going to stick with the RadEditor solution I have in place.

One other thing I noticed is that when I set a height value for the user control in the PopupSettings property of EditFormSettings, the height is only maintained if a user edits a griditem.  However, when using the CommandItem in both the mastertableview and detail tables to add new records, the specified height is not maintained.  Thus the Insert and Cancel command buttons appear to float in an area outside the user control form.  Any recommendations for maintaining consistent behavior?

[Andrey]

Hi,

I made a sample project to test this case, but it is working as expected on my end. Could you give the project a try and let me know if I am missing something.

All the best,
Andrey
the Telerik team

[Kevin]

Yes, this appears to be working as it should in the sample project.  I will re-check my project.

Thanks!