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

4 posts, 1 answers
  1. Adeel
    Adeel avatar
    8 posts
    Member since:
    Oct 2012

    Posted 10 Oct 2012 Link to this post

    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
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Oct 2012 Link to this post

    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="abc@gmail.com"></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="abc@gmail.com"></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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adeel
    Adeel avatar
    8 posts
    Member since:
    Oct 2012

    Posted 13 Oct 2012 Link to this post

    Thanks, now I want to use Rad Loading panel when User click on Edit button but don't know how it used?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Oct 2012 Link to this post

    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.
Back to Top