Portal page like netvibes/bbc.co.uk

9 posts, 0 answers
  1. Satyadev
    Satyadev avatar
    13 posts
    Member since:
    Jun 2009

    Posted 08 Jun 2009 Link to this post

    I m a new user of telerik.

    i want to create a portal page using your rad control like netvibes/bbc.co.uk

    pls help me, how to create this page.



  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 09 Jun 2009 Link to this post

    Hello Satyadev,

    You may use our RadDock control to create a layout that resembles NetVibes. On our demo pages we have an example that demonstrates how to use the control to create a portal page and a layout similar to NetVibes:

    http://demos.telerik.com/aspnet-ajax/dock/examples/default/defaultcs.aspx

    All the best,
    Martin Ivanov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Satyadev
    Satyadev avatar
    13 posts
    Member since:
    Jun 2009

    Posted 09 Jun 2009 Link to this post

    Hi Martin,

    Thanks for your reply...

    i ve created this type of docks, but my requirement is to store all docks state into database based on user configuration or users movement, close or open of the docks.

    Also user can create some dynamic docks which will store into the database.

    Satyadev.
  4. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 09 Jun 2009 Link to this post

    You can find a simple example which illustrates how to add/remove RadDocks dynamically and save their state in Session is available here:
    http://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx
    You should modify it to save the state in DB.
  5. Satyadev
    Satyadev avatar
    13 posts
    Member since:
    Jun 2009

    Posted 11 Jun 2009 Link to this post

    Hello Obi-Wan Kenobi,

    I ve already checked your example from the telerik site, this example contain only dynamic dock and storing in session,

    My requirement is to create some static docks and dynamic docks based on users requirement.

    I will not chose any .ascx file from the combo box.

    Suppose a user created three dynamic docks, Corresponding .ascx files needs to rearrange in refresh of the page.

    I will not store the contents into session, but will store into database.

    pls guide me.

    Satyadev.
  6. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 17 Jun 2009 Link to this post

    Hi Satyadev,

    Please find attached a simple example which illustrates how to save state for dynamically added RadDocks in DB.

    Greetings,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. Satyadev
    Satyadev avatar
    13 posts
    Member since:
    Jun 2009

    Posted 19 Jun 2009 Link to this post

    Hi team,

    I have been modified certain parts of your code,

    i ve attached two static docks with dynamic code. It is working fine. While arranging docks from one zone to another zone of dynamic dock is working properly, but for static zone is not not updating into database.

    -i ve attached a link button in title template for duplicate of the dock. lik button always showing into left side.

    -while closing of each dock, state is not updating into database which code attached here.

    pls check the following code for modification.


    i m attaching the modified code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="SaveDBDynamicallyRadDocks_CS_Default" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <!--[if lte IE 6]>
        <style type="text/css">
        .raddockzone{height:200px}
        </style>
        <![endif]-->
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
            <asp:ScriptManager ID="ScriptManager" runat="server" />
            <div>
                &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
                <br />
                &nbsp;<asp:Button runat="server"  ID="ButtonAddDock" Text="AddNews"
                    OnClick="ButtonAddDock_Click" />
                <asp:Button runat="server"  ID="ButtonPostBack" Text="Weather"
                    OnClick="ButtonPostBack_Click" />
            </div>
            <asp:UpdatePanel runat="server" ID="UpdatePanel2">
                <ContentTemplate>
                    <br />
                    <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
                        OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="451px" MinHeight="200"
                            Style="float: left; margin-right: 15px; background: #f5f4e8;" Height="512px">
                            <telerik:RadDock ID="RadDock1" Runat="server" Height="80px" Skin="Hay"
                                Width="232px" EnableAnimation="True" Tag="~/UserControls/StaticC1.ascx">
                                 <TitlebarTemplate>
     
         <ContentTemplate>
           <asp:LinkButton
               id="Duplicate"
               runat="server"
               Text="Duplicate" onclick="Duplicate_Click">
           </asp:LinkButton>
          
         </ContentTemplate>
     
     </TitlebarTemplate>
                                
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="502px" MinHeight="200"
                            Style="background: #d5f0fa; float: left;" Height="506px">
                            <telerik:RadDock ID="RadDock2" Runat="server" Height="85px" Skin="Hay"
                                EnableAnimation="True" Tag="~/UserControls/StaticC2.ascx">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </telerik:RadDockLayout>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="ButtonAddDock" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            <div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">
                Hidden UpdatePanel, which is used to help with saving state when minimizing, moving and closing docks.
                This way the docks state is saved faster (no need to update the docking zones).
                <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                </asp:UpdatePanel>
            </div>
            </form>
    </body>
    </html>


    using System;
    using System.Collections.Generic;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Text;
    using System.Data.SqlClient;
    using System.Collections;
    using System.Configuration;

    public partial class SaveDBDynamicallyRadDocks_CS_Default : System.Web.UI.Page
    {
        private SqlConnection _conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DockConnectionString"].ConnectionString);
        private List<DockState> CurrentDockStates
        {
            get
            {
                //Get saved state string from the database - set it to dockState variable for example
                string dockStatesFromDB = "";

                _conn.Open();
                SqlCommand command = new SqlCommand("select State from States where id=2", _conn);
                dockStatesFromDB = command.ExecuteScalar().ToString();
                _conn.Close();

                List<DockState> _currentDockStates = new List<DockState>();
                string[] stringStates = dockStatesFromDB.Split('|');
                foreach (string stringState in stringStates)
                {
                    if (stringState.Trim() != string.Empty)
                    {
                        _currentDockStates.Add(DockState.Deserialize(stringState));
                    }
                }
                return _currentDockStates;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

       

        protected override void OnInit(EventArgs e)
        {

        
            
       
            base.OnInit(e);
            //Recreate the docks in order to ensure their proper operation
            for (int i = 0; i < CurrentDockStates.Count; i++)
            {
                if (CurrentDockStates[i].Closed == false)
                {
                    RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
                    switch (dock.UniqueName)
                    {
                        case "RadDock1": break;
                        case "RadDock2": break;
                        default:
                            RadDockLayout1.Controls.Add(dock);
                            CreateSaveStateTrigger(dock);
                            LoadWidget(dock);
                            break;
                    }
                }
            }
        }
        

        protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)
        {
            foreach (DockState state in CurrentDockStates)
            {
                e.Positions[state.UniqueName] = state.DockZoneID;
                e.Indices[state.UniqueName] = state.Index;
            }
        }

        protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)
        {   
                List<DockState> stateList  = RadDockLayout1.GetRegisteredDocksState();
                StringBuilder serializedList = new StringBuilder();
                int i = 0;

                while (i < stateList.Count)
                {
                    serializedList.Append(stateList[i].ToString());
                    serializedList.Append("|");
                    i++;
                }

                string dockState = serializedList.ToString();
                if (dockState.Trim() != String.Empty)
                {
                    _conn.Open();
                    SqlCommand command = new SqlCommand(String.Format("update States set State='{0}' where id=2", dockState), _conn);
                    command.ExecuteNonQuery();
                    _conn.Close();
                }
            
        }

        private RadDock CreateRadDockFromState(DockState state)
        {
            RadDock dock = new RadDock();
            dock.DockMode = DockMode.Docked;
            dock.ID = string.Format("RadDock{0}", state.UniqueName);
            dock.ApplyState(state);
            dock.Commands.Add(new DockCloseCommand());
            dock.Commands.Add(new DockExpandCollapseCommand());

            return dock;
        }

        private RadDock CreateRadDock()
        {
            int docksCount = CurrentDockStates.Count;

            RadDock dock = new RadDock();
            dock.DockMode = DockMode.Docked;
            dock.UniqueName = Guid.NewGuid().ToString();
            dock.ID = string.Format("RadDock{0}", dock.UniqueName);
            dock.Title = "Dock";
            dock.Text = string.Format("Added at {0}", DateTime.Now);
            dock.Width = Unit.Pixel(300);

            dock.Commands.Add(new DockCloseCommand());
            dock.Commands.Add(new DockExpandCollapseCommand());
            dock.Command += new DockCommandEventHandler(Dock_Command);

            return dock;
        }
        protected void Dock_Command(object sender, DockCommandEventArgs e)
        {
            if (e.Command.Name == "Close")
            {
                ScriptManager.RegisterStartupScript(
                    UpdatePanel1,
                    this.GetType(),
                    "RemoveDock",
                    string.Format("function _removeDock() {{" +
                        "Sys.Application.remove_load(_removeDock);" +
                        "$find('{0}').undock();" +
                        "$get('{1}').appendChild($get('{0}'));" +
                        "$find('{0}').doPostBack('DockPositionChanged');" +
                        "}};" +
                        "Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),
                    true);
            }
        }

        private void CreateSaveStateTrigger(RadDock dock)
        {
            //Ensure that the RadDock control will initiate postback
            // when its position changes on the client or any of the commands is clicked.
            //Using the trigger we will "ajaxify" that postback.
            dock.AutoPostBack = true;
            dock.CommandsAutoPostBack = true;

            AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
            saveStateTrigger.ControlID = dock.ID;
            saveStateTrigger.EventName = "DockPositionChanged";
            UpdatePanel1.Triggers.Add(saveStateTrigger);

            saveStateTrigger = new AsyncPostBackTrigger();
            saveStateTrigger.ControlID = dock.ID;
            saveStateTrigger.EventName = "Command";
            UpdatePanel1.Triggers.Add(saveStateTrigger);
        }

        private void LoadWidget(RadDock dock)
        {
            if (string.IsNullOrEmpty(dock.Tag))
            {
                return;
            }
            Control widget = LoadControl(dock.Tag);
            dock.ContentContainer.Controls.Add(widget);
        }


        protected void ButtonAddDock_Click(object sender, EventArgs e)
        {
            RadDock dock = CreateRadDock();
            //find the target zone and add the new dock there
            RadDockZone dz = (RadDockZone)FindControl("RadDockZone2");
            dz.Controls.Add(dock);
            CreateSaveStateTrigger(dock);

            //Load the selected widget in the RadDock control
            dock.Tag = "~/UserControls/News.ascx";
            dock.EnableAnimation = true;
            LoadWidget(dock);
        }
        protected void ButtonPostBack_Click(object sender, EventArgs e)
        {
            RadDock dock = CreateRadDock();
            //find the target zone and add the new dock there
            RadDockZone dz = (RadDockZone)FindControl("RadDockZone2");
            dz.Controls.Add(dock);
            CreateSaveStateTrigger(dock);

            //Load the selected widget in the RadDock control
            dock.Tag = "~/UserControls/Weather.ascx";
            dock.EnableAnimation = true;
            LoadWidget(dock);
        }
     
        protected void Duplicate_Click(object sender, EventArgs e)
        {
            DockState state = RadDock1.GetState();
            state.UniqueName = "NewUniqueName";
            RadDock dock = new RadDock();
            dock.ApplyState(state);
            RadDockLayout1.Controls.Add(dock);
        }
    }


    -----------

    Satyadev.








  8. Satyadev
    Satyadev avatar
    13 posts
    Member since:
    Jun 2009

    Posted 25 Jun 2009 Link to this post

    Hi Team,

    According to your solution, it's working fine. With implementation of master page, error showing " 'length' is null or not an object"
    . Please give the solution.


    Satyadev.
  9. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 25 Jun 2009 Link to this post

    Hi Satyadev,

    I think that there are two problems which are not directly related to the project I sent. To help you resolve the problems faster, please open a new support ticket and send us a running project where we can observe the problems on our side. Once we receive it we will do our best to help you.


    Greetings,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top