Raddoc slide down feature with editable form

2 posts, 0 answers
  1. Ambuj
    Ambuj  avatar
    31 posts
    Member since:
    Dec 2008

    Posted 13 Aug 2010 Link to this post

    Hi,
    I am looking for a slidedown feature like http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html to open the edit/add form in raddoc similar to igoogle widget. 

    Pl. refer below link for discussion.
    http://demos.telerik.com/aspnet-ajax/dock/examples/edittitle/defaultcs.aspx


    I would appreciate if someone can share sample code which demonstrate this feature.  Thanks in advance.

    -ambuj.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 Aug 2010 Link to this post

    Hi Ambuj,

    I created a sample project that I believe will help you get started with your application. Here is the source code:

    .aspx
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableCdn="true">
            <CdnSettings TelerikCdn="Enabled" />
        </telerik:RadScriptManager>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                    Skin="Sunset" EnableAjaxSkinRendering="true" OnCommand="DockCommand" CommandsAutoPostBack="true">
                    <Commands>
                        <telerik:DockCloseCommand />
                        <telerik:DockExpandCollapseCommand />
                        <telerik:DockCommand Name="Edit" Text="Edit Dock" />
                    </Commands>
                    <ContentTemplate>
                        <asp:Panel ID="panelEditDock" runat="server" Style="border: 2px solid red;" Visible="false">
                            <asp:RadioButtonList ID="rbl1" runat="server" OnSelectedIndexChanged="rbl1_SelectedIndexChanged"
                                AutoPostBack="true">
                                <asp:ListItem Text="Red" Value="Red" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Black" Value="Black"></asp:ListItem>
                                <asp:ListItem Text="Green" Value="Green"></asp:ListItem>
                            </asp:RadioButtonList>
                            Title:<asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
                            <asp:Button ID="Button1" runat="server" Text="Save Changes" OnClick="Button1_Click" />
                        </asp:Panel>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan euismod
                        tortor in semper. Cras vulputate egestas nunc, et pretium quam tincidunt euismod.
                        Integer vel augue sapien. Cras eu gravida neque. Vestibulum volutpat, lectus eget
                        pellentesque aliquet, mi erat lobortis ipsum, et volutpat ligula lorem sit amet
                        diam. Proin faucibus, sapien tempor porttitor imperdiet, tortor leo iaculis lectus,
                        in vulputate purus massa ut magna. Nunc rutrum euismod tincidunt. Lorem ipsum dolor
                        sit amet, consectetur adipiscing elit. Curabitur eros mi, vulputate vitae convallis
                        quis, aliquet facilisis nunc. Etiam eros massa, congue et luctus id, mattis commodo
                        ante. Vestibulum aliquam posuere felis sed cursus. Nulla rutrum lacus eu dui iaculis
                        id interdum mi facilisis. Quisque sem mi, hendrerit in elementum ac, dignissim vitae
                        eros.
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
        </form>
    </body>
    </html>

    .cs
    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                txtTitle.Text = RadDock1.Title;
            }
        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            RadDock1.Title = txtTitle.Text;
        }
        protected void rbl1_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (rbl1.SelectedValue)
            {
                case "Red":
                    RadDock1.Skin = "Sunset";
                    break;
                case "Black":
                    RadDock1.Skin = "Black";
                    break;
                case "Green":
                    RadDock1.Skin = "Hay";
                    break;
            }
        }
        protected void DockCommand(object sender, DockCommandEventArgs e)
        {
            if (e.Command.Name == "Edit")
            {
                panelEditDock.Visible = !panelEditDock.Visible;
            }
        }
    }


    All the best,
    Pero
    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
Back to Top