Nested Grid EditTemplate

5 posts, 1 answers
  1. Andrew
    Andrew avatar
    9 posts
    Member since:
    Feb 2009

    Posted 28 Feb 2010 Link to this post

    Hello, I have a challenge invloving a grid that is nested underneath a panelbal that is, in turn inside a multiview.  I am using the PopUp Edit functionality with the Edit Template nested inside the MasterTableView. 

    To access the Edit Form from this grid, I am using the AutoGenerated edit button.  Upon clicking the button, after the AjaxLoadpanel fires and the page is re-rendered the Edit Template appears as a Modal PopUp, as required.

    The challenge comes in the ItemCommand event handler for the grid, after making a change in the Edit form, and clicking the button that I have designated for Updating the necessary objects and sending off to the database.  I am not using a SqlDataSource. I am running the MVP architecture (not MS MVC) and all of the necessary postback actions happen as required. 

    Here is the page with the necessary parts:
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" 
            ResizeMode="EndPane" Skin="Default" Font-Size="Large" BorderStyle="None">  
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server"  CollapseMode="Forward" /> 
            <telerik:RadPane ID="rdpFollowData" runat="server" Scrolling="Y" Height="590px">  
                   <telerik:RadTabStrip ID="tbFollowData" runat="server" 
                    MultiPageID="rdmultFollowup" SelectedIndex="0"   
                    Width="100%" AutoPostBack="False" > 
                    <tabs> 
                        <telerik:RadTab PageViewID="rpvSeller" Text="Seller Details">  
                        </telerik:RadTab> 
                    </tabs> 
                </telerik:RadTabStrip> 
                <telerik:RadMultiPage ID="rdmultFollowup" runat="server" SelectedIndex="0" Width="100%">  
                      <telerik:RadPageView ID="rpvSeller" runat="server">  
                        <telerik:RadPanelBar ID="rpbSeller" runat="server" Skin="Default"   
                            Style="float:left" Width="100%">  
                            <Items> 
                                <telerik:RadPanelItem ImagePosition="Right" Text="General">  
                                    <Items> 
                                        <telerik:RadPanelItem Value="General" runat="server">  
                                            <ItemTemplate> 
                                                <asp:Button ID="btnAddOwner" runat="server" Text="Add Seller" /><br /> 
                                                <telerik:RadGrid ID="rgSeller" runat="server" AutoGenerateColumns="False" AutoGenerateEditColumn="true" GridLines="None" OnDataBound="rgSeller_DataBound" OnItemDataBound="rgSeller_ItemDataBound" OnNeedDataSource="rgSeller_NeedDataSource" OnItemCommand="rgSeller_ItemCommand" EditItemStyle-Width="300px">  
                                                    <ClientSettings> 
                                                        <ClientEvents OnRowDblClick="RowDblClick" /> 
                                                    </ClientSettings> 
                                                    <MasterTableView Height="100%" Width="50%" EditMode="PopUp" > 
                                                        <EditFormSettings CaptionFormatString="Edit User: {0}" CaptionDataField="UserID" EditFormType="Template" PopUpSettings-Modal="true">  
                                                            <FormTemplate> 
                                                                <table id="editForm" width="400px">  
                                                                    <tr> 
                                                                        <td align="left">  
                                                                            First Name:&nbsp;&nbsp;<asp:TextBox ID="txtFirstname" runat="server" Text='<%# Bind("FirstName") %>'></asp:TextBox> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td align="left">  
                                                                            Last Name :&nbsp;&nbsp;<asp:TextBox ID="txtLastname" runat="server" Text='<%# Bind("LastName") %>'></asp:TextBox> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td align="left" colspan="3">  
                                                                            Mailing Address :&nbsp;&nbsp;<asp:TextBox ID="txtAddress" Width="250px" runat="server" 
                                                                                Text='<%# Bind("MailAddress") %>' />,  
                                                                            <asp:TextBox ID="txtCity" Width="250px" runat="server" Text='<%# Bind("MailCity") %>' />,  
                                                                            <asp:TextBox ID="txtState" Width="25px" runat="server" Text='<%# Bind("MailState") %>' />,  
                                                                            <asp:TextBox ID="txtZip" Width="50px" runat="server" Text='<%# Bind("MailZip") %>' /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td align="left">  
                                                                            <telerik:RadGrid ID="rgPhones" runat="server" Skin="Default" > 
                                                                                <MasterTableView GridLines="Horizontal" Frame="Void" NoMasterRecordsText="No Phone Numbers Listed" 
                                                                                    AutoGenerateColumns="false" Width="100%">  
                                                                                    <Columns> 
                                                                                        <telerik:GridBoundColumn DataField="PhoneID" Visible="false" /> 
                                                                                        <%--<telerik:GridButtonColumn ButtonType="LinkButton" Text="Delete" />--%> 
                                                                                        <telerik:GridBoundColumn HeaderText="Phone Number" DataField="Phone" /> 
                                                                                    </Columns> 
                                                                                </MasterTableView> 
                                                                            </telerik:RadGrid> 
                                                                            <asp:Button ID="btnAddUserPhone" runat="server" Text="Add Phone" /> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td align="left">  
                                                                            Username :&nbsp;&nbsp;<asp:TextBox ID="txtUsername" runat="server" Text='<%# Bind("UserName")%>'></asp:TextBox> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td colspan="3" align="left">  
                                                                            Email :&nbsp;&nbsp;<asp:TextBox ID="txtEmail" runat="server" Text='<%# Bind("Email") %>'></asp:TextBox> 
                                                                        </td> 
                                                                    </tr> 
                                                                    <tr> 
                                                                        <td colspan="3" align="right">  
                                                                            <asp:Button ID="btnResetPassword" runat="server" Text="Reset Password" CommandName="ResetPassword" /> 
                                                                            <asp:Button ID="btnUpdateUser" runat="server" Text="Update" CommandName="UpdateUser"/>  
                                                                            <asp:Button ID="btnCanc" runat="server" Text="Cancel" CommandName="Cancel"/>  
                                                                        </td> 
                                                                    </tr> 
                                                                </table> 
                                                            </FormTemplate> 
                                                        </EditFormSettings> 
                                                        <Columns> 
                                                            <telerik:GridBoundColumn DataField="UserID" Visible="false"/>  
                                                            <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" EditFormColumnIndex="0"/>  
                                                            <telerik:GridBoundColumn DataField="LastName" HeaderText="FirstName" EditFormColumnIndex="0"/>  
                                                        </Columns> 
                                                    </MasterTableView> 
                                                </telerik:RadGrid> 
                       </ItemTemplate> 
                                          
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                  
                                </telerik:RadPanelItem> 
    </Items> 
                  
                        </telerik:RadPanelBar> 
                    </telerik:RadPageView> 
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
     
            <script type="text/javascript">  
                function RowDblClick(sender, eventArgs) {  
                    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());  
                }  
            </script> 
     
        </telerik:RadCodeBlock> 
    </asp:Content>    
    My apologies for the alignment, and missing tags :/

    Here is the code to populate the grid:
    private void ShowSellerData(List<Users> sellers, List<PhoneNumbers> phones)  
    {  
        RadPanelItem pnl = rpbSeller.FindItemByValue("General");  
        RadGrid grid = pnl.FindControl("rgSeller"as RadGrid;  
        grid.DataSource = sellers;  
        grid.DataBind();  
     
        //some other ancilliary methods  


    Here is the code for the ItemCommand Handler method of the grid:
    protected void rgSeller_ItemCommand(object source, GridCommandEventArgs e)  
    {  
       switch (e.CommandName)  
       {  
            case "UpdateUser":  
                 string fn, ln, addr, city, st, zip, unm, email;  
                 GridDataItem item = e.Item as GridDataItem;  
                 GridEditFormItem editor = item.EditFormItem;  
     
                 int uid = 0;  
                 TextBox txt = editor.FindControl("txtFirstname"as TextBox;  
                 fn = txt.Text;  
     
                 txt = editor.FindControl("txtLastname"as TextBox;  
                 ln = txt.Text;  
     
                 txt = editor.FindControl("txtAddress"as TextBox;  
                 addr = txt.Text;  
     
                 txt = editor.FindControl("txtCity"as TextBox;  
                 city = txt.Text;  
     
                 txt = editor.FindControl("txtState"as TextBox;  
                 st = txt.Text;  
     
                 txt = editor.FindControl("txtZip"as TextBox;  
                 zip = txt.Text;  
     
                 txt = editor.FindControl("txtUsername"as TextBox;  
                 unm = txt.Text;  
     
                 txt = editor.FindControl("txtEmail"as TextBox;  
                 email = txt.Text;  
     
                 Presenter.UpdateUser(uid, fn, ln, addr, city, st, zip, unm, email);  
                 RadGrid grid = e.Item.Parent as RadGrid;  
                 grid.Rebind();  
                 rgAction.Rebind();  
                 break;  
           case "Cancel":  
           default:  
             break;  
       }  
    Everything LOOKS correct, and actually provides access to the necessary controls in the template.  However, if I change anything in the Edit form, that edits are not available to me on the postback.  Any Suggestions?
  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Mar 2010 Link to this post

    Hi Andrew,

    Can you please switch to advance binding with NeedDataSource event handling using the same code without the DataBind() call and let me know how it goes.

    Regards,
    Pavlina
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    9 posts
    Member since:
    Feb 2009

    Posted 06 Mar 2010 Link to this post

    pavlina, thanks for you answer.  It worked as described. 

    Now I have another challenge in the same project.  Inside this grid I have another one in the EditTemplate.  I can poplulate this inner grid with the NeedsDataSource event.  But when it comes time to edit the inner grid, the ItemBound event is not hit, and I can't populate the EditForm
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Mar 2010 Link to this post

    Hi,

    You need to access the ItemDataBound event of the nested grid and not of the parent grid. Attach an ItemDataBound event as shown below:
    ASPX:
           <EditFormSettings EditFormType="Template"
                        <FormTemplate> 
                           <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
                            SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"
                        </asp:SqlDataSource> 
                            <telerik:RadGrid onitemdatabound="RadGrid2_ItemDataBound" ID="RadGrid3" DataSourceID="SqlDataSource1" runat="server"
                            <MasterTableView> 
                            <Columns> <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn> 
                            </Columns> 
                            </MasterTableView> 
                            </telerik:RadGrid> 
                        </FormTemplate> 
                    </EditFormSettings> 

    C#
    protected void RadGrid2_ItemDataBound(object sender, GridItemEventArgs e) 
        { 
            if (e.Item is GridEditableItem && e.Item.IsInEditMode) 
            { 
            } 
     
        } 


    Hope this helps.

    Thanks,
    Princy
  6. Andrew
    Andrew avatar
    9 posts
    Member since:
    Feb 2009

    Posted 12 Apr 2010 Link to this post

    Princy, my apologies for taking so long to get back.  I have tried the Item databound event for the inner grid, and it works fine as long as these controls are not nested inside a collapsible panel, which is then inside a multipage view (for tabs), which is inside a splitter panel. (the client wanted them all in one page, and yes he specifies ONE page.)  I've looked at everything that you guys have, and nothing fits my scenario without breaking things into separate pages.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017