RadGrid with UserControl Edit Mode

7 posts, 1 answers
  1. Kevin
    Kevin avatar
    4 posts
    Member since:
    Jan 2012

    Posted 28 Feb 2012 Link to this post

    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

  2. Andrey
    Admin
    Andrey avatar
    836 posts
    Member since:
    Dec 2014

    Posted 02 Mar 2012 Link to this post

    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

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  3. Kevin
    Kevin avatar
    4 posts
    Member since:
    Jan 2012

    Posted 07 Mar 2012 Link to this post

    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>

     

     

     

     

     

     

     

     

     

  4. Answer
    Andrey
    Admin
    Andrey avatar
    836 posts
    Member since:
    Dec 2014

    Posted 12 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  5. Kevin
    Kevin avatar
    4 posts
    Member since:
    Jan 2012

    Posted 12 Mar 2012 Link to this post

    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?

  6. Andrey
    Admin
    Andrey avatar
    836 posts
    Member since:
    Dec 2014

    Posted 14 Mar 2012 Link to this post

    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

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

  7. Kevin
    Kevin avatar
    4 posts
    Member since:
    Jan 2012

    Posted 21 Mar 2012 Link to this post

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

    Thanks!

Back to Top