Nested Grid EditTemplate

[Andrew]

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?

[Pavlina]

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.

[Andrew]

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

[Princy]

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

[Andrew]

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.