How can I achieve edit/delete and update functionality in Panel Bar?

[Adeel]

I use Panel bar for Personal Information and its look like:

Email: abc@com
Name: Abc
etc.

now at end I mention a edit button. How can I achieve this functionality when user click on edit button than another panel bar is coming and convert all my data(abc@com) into textboxes. I have attached two pictures which show my all scena

Thanks

[Princy]

Hi Adeel,

One suggestion is that you can use two RadPanelItems for editing as follows.

ASPX:

<telerik:RadPanelBar ID="RadPanelBar1" runat="server">
     <Items>
                <telerik:RadPanelItem Text="Contact Information">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text="Email Address"></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text="[e-mail]"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label3" runat="server" Text="Phone number"></asp:Label>
                                </td>
                                <td>
                                    <asp:Label ID="Label4" runat="server" Text="0000000000"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Edit" />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Contact Information" Enabled="false" Visible="false">
                    <ItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:Label ID="Label5" runat="server" Text="Email Address"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="Label2" runat="server" Text="[e-mail]"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Label ID="Label6" runat="server" Text="Phone Number"></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="Label4" runat="server" Text="0000000000"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Save" />
                                </td>
                                <td>
                                    <asp:Button ID="BtnCancel" runat="server" OnClick="BtnCancel_Click" Text="Cancel" />
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </telerik:RadPanelItem>
      </Items>
</telerik:RadPanelBar>

C#:

protected void Button1_Click(object sender, EventArgs e)
    {
        RadPanelBar1.Items[1].Visible = true;
        RadPanelBar1.Items[1].Enabled = true;
        RadPanelBar1.Items[0].Visible = false;
        RadPanelBar1.Items[0].Enabled = false;
    }
protected void Button2_Click(object sender, EventArgs e)
    {
        //Your code
    }
protected void BtnCancel_Click(object sender, EventArgs e)
    {
        RadPanelBar1.Items[0].Visible = true;
        RadPanelBar1.Items[0].Enabled = true;
        RadPanelBar1.Items[1].Visible = false;
        RadPanelBar1.Items[1].Enabled = false;
    }

Regards,
Princy.

[Adeel]

Thanks, now I want to use Rad Loading panel when User click on Edit button but don't know how it used?

[Princy]

Hi Adeel,

Try the following code snippet to achieve your scenario.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
   <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="Button1">
         <UpdatedControls>
             <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" LoadingPanelID="RadAjaxLoadingPanel" />
         </UpdatedControls>
      </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" BackImageUrl="~/Images/loding.gif"   AnimationDuration="5000">
</telerik:RadAjaxLoadingPanel>

Hope this helps.

Regards,
Princy.