Dynamically adding docks & loading content from a database

29 posts, 2 answers
  1. Paul
    Paul avatar
    76 posts
    Member since:
    Feb 2008

    Posted 01 Aug 2008 Link to this post

    I haven't seen an examples online or in the documentation for what I'm trying to do. Has anyone dynamically created docks from content loaded from a database?

    It seems like a realatively easy thing to do, but I seem to be having a problem with it. It may just be beause of the way I'm dynamically creating the docks, but I only get the first row of content from my database table to appear. If I hit refresh, the rest of the content appears, although not in any of the specified zones I have. They show up in the upper left corner of the browser.

    Does anyone have some samples of doing anything like this?

    Thanks!

    Paul
  2. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 04 Aug 2008 Link to this post

    Hello Paul,

    The problem you mention that the docks appear after refreshing the page but they are not in the specified zones is probably due to the DockZoneIDs of the docks not being correctly set when recreating the controls and Page_Init. This can be result of docks' states not being correctly saved in the database. I suggest you take a look at the Dynamically Created Docks online example which demonstrates how to dynamically create RadDock controls and if you want to save/load docks' states into DB you could modify the RadDockLayout1_SaveDockLayout and RadDockLayout1_LoadDockLayout event handlers' code in a way similar to the one below:
    protected void RadDockLayout1_SaveDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)      
    {         
        string dockState;      
        Script.Serialization.JavaScriptSerializer serializer = new Script.Serialization.JavaScriptSerializer();      
        List<DockState> stateList = RadDockLayout1.GetRegisteredDocksState();      
        StringBuilder serializedList = new StringBuilder();      
        int i = 0;      
        while (i < stateList.Count) {      
            serializedList.Append(serializer.Serialize(stateList(i)));      
            serializedList.Append("|");      
            i++;            
        }      
        dockState = serializedList.ToString();      
        //Save the dockState string into DB     
    }      
        
    protected void RadDockLayout1_LoadDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)      
    {         
        Script.Serialization.JavaScriptSerializer serializer = new Script.Serialization.JavaScriptSerializer();      
        //Get saved state string from the database - set it to dockState variable for example    
        string[] currentDockStates = dockState.Split("|");      
        foreach (string stringState in currentDockStates) {      
        if (stringState != string.Empty) {      
             DockState state = serializer.Deserialize<DockState>(stringState);      
             e.Positions(state.UniqueName) = state.DockZoneID;      
             e.Indices(state.UniqueName) = state.Index;      
        }       
    }    
     
    Let us know if you need further assistance.

    Best wishes,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Paul avatar
    76 posts
    Member since:
    Feb 2008

    Posted 04 Aug 2008 Link to this post

    Hi Sophy,

    I had looked at the demo you mentioned and had used its code as a starting point. I don't really see a need to save the states to a database as I do not intend to allow the user to move or close the docked windows so storing it to a session as done in the example is sufficient (if its even required for what I am trying to do).

    The only differences from the demo aside from not being able to drag a docking window or close it is that instead of using the button to add another docking window, it would dynamically add a dock window (as many as required) and fill it with content that was pulled from a datatable (which was populated from a database)

    Would you be able to provide an small example of loading 4 or 5 docking windows dynamically and populate it from dummy title & content data stored in an MDF file? As I mentioned, I don't need to 'remember' the placement of the docking windows per user so a saving states to a database is not required. Also I expect that each time the user opens the page it is reloaded as the content may have changed.

    Thanks!!
  5. Answer
    Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 05 Aug 2008 Link to this post

    Hi Paul,

    I prepared a very simple page which dynamically loads docks and sets the title and the text of the docks to values stored in a database. Please, find the sample attached and let us know what is different in your case. In case the example cannot help you achieve the desired scenario, please, send us a simple running project which demonstrates your scenario and reproduces the issue so that we can take a closer look at it. You will need to open a support ticket in order to have the right to attach files. For your convenience I have attached a screenshot with instructions how to open a support ticket. We will be glad to help you.

    Sincerely yours,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Nilachandan
    Nilachandan avatar
    18 posts
    Member since:
    Jul 2008

    Posted 05 Aug 2008 Link to this post

    Hi Sophy,

    I have follwed exactly the same procedure as you have described above, to save the dockstate info into the Database. But I am facing problem in saving the dockState into the database. My "dockState" variable is not able to hold the DockZoneID. Here is the value that dockState is able to hold.
    {"DockZoneID":"","Width":{"IsEmpty":false,"Type":1,"Value":300},"ExpandedHeight":0,"Height":{"IsEmpty":true,"Type":1,"Value":0},"Index":-1,"Top":{"IsEmpty":false,"Type":1,"Value":0},"Left":{"IsEmpty":false,"Type":1,"Value":0},"Closed":false,"Resizable":false,"Collapsed":false,"Pinned":false,"UniqueName":"4bd35917-2d92-45a4-a257-84d302817519","Tag":null,"Title":"Dock","Text":"Added at 8/5/2008 3:31:11 PM"}|

    As you can see, there is no DockZoneID value. Why so? Can you please help me?

    Thanks,
    Chandan
  7. Nilachandan
    Nilachandan avatar
    18 posts
    Member since:
    Jul 2008

    Posted 05 Aug 2008 Link to this post

    Hi Sophy,

    I have follwed exactly the same procedure as you have described above, to save the dockstate info into the Database. But I am facing problem in saving the dockState into the database. My "dockState" variable is not able to hold the DockZoneID. Here is the value that dockState is able to hold.
    {"DockZoneID":"","Width":{"IsEmpty":false,"Type":1,"Value":300},"ExpandedHeight":0,"Height":{"IsEmpty":true,"Type":1,"Value":0},"Index":-1,"Top":{"IsEmpty":false,"Type":1,"Value":0},"Left":{"IsEmpty":false,"Type":1,"Value":0},"Closed":false,"Resizable":false,"Collapsed":false,"Pinned":false,"UniqueName":"4bd35917-2d92-45a4-a257-84d302817519","Tag":null,"Title":"Dock","Text":"Added at 8/5/2008 3:31:11 PM"}|

    As you can see, there is no DockZoneID value. Why so? Can you please help me?

  8. Paul
    Paul avatar
    76 posts
    Member since:
    Feb 2008

    Posted 05 Aug 2008 Link to this post

    Hi Sophy,

    Thanks! I implemented your code into my project (with of few modifications of course to the content getting loaded) and it worked just like I had wanted it to. I guess I was over complicating things through the use of the other examples but this was just what I was trying to accomplish... A few more tweaks here and there and I'm set.

    Thanks again!!!

    Paul
  9. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 06 Aug 2008 Link to this post

    Hi Nilachandan,

    I prepared a sample project which demonstrates how you could modify the Dynamically Created Docks example so that it saves the state into Database. Please, take a look at the attached archive and let us know in case you still experience any problems.

    Best regards,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Nilachandan
    Nilachandan avatar
    18 posts
    Member since:
    Jul 2008

    Posted 07 Aug 2008 Link to this post

    Hi Sophy

    The sample that you have prepared, worked wonderfully for me. Thank you for that. But I have another small issue. Problem is, when I put designed a dock into the RadDockZone, and trying to add one dynamic RadDock to the same page by click of a Button.

    When the page loads for the first time with one designed RadDock, there is no problem. The data inserts into the database. When I am refershing the page, it tries to add the same saved raddock into the page, where problem occurs as there are already that designed raddock on the page with the same name.

    The error that displays is as follows

    "Please, ensure that the UniqueName property of RadDock with ID='RadDockRadDock1' is unique to RadDockLayout with ID='RadDockLayout1'."

    Can you please help me in this?

    Thanks,
    Nilachandan

  11. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 07 Aug 2008 Link to this post

    Hi Nilachandan,

    The problem you experience is due to trying to recreate the statically added dock at Page_Init. However, as the dock is static it is already added on the page and therefore two docks with the same id appear. If you want to have statically added docks on the page as well as dynamically added ones you will need to modify the provided example so that it checks whether this is the saved state of a static dock and do not recreate it at Page_Init. You could do this check using the dock's id. It depends on the requirements of your exact scenario how you will implement this logic. 

    Best regards,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Answer
    Nilachandan
    Nilachandan avatar
    18 posts
    Member since:
    Jul 2008

    Posted 08 Aug 2008 Link to this post

    Hi Sophy

    Thank you for your timely help. It did solve my problem. I hope that in future also you will be as cooperative.

    Thanks,
    Nilachandan
  13. Shreya Tech
    Shreya Tech avatar
    4 posts
    Member since:
    Feb 2010

    Posted 02 Feb 2010 Link to this post

    I have exactly the same issue. 
     
    "The problem is due to trying to recreate the statically added dock at Page_Init. However, as the dock is static it is already added on the page and therefore two docks with the same id appear. If you want to have statically added docks on the page as well as dynamically added ones you will need to modify the provided example so that it checks whether this is the saved state of a static dock and do not recreate it at Page_Init. You could do this check using the dock's id. It depends on the requirements of your exact scenario how you will implement this logic. "

    How to check whether this is the saved state of a static dock and not recreate it at Page_Init?

    Thanks,
    Shreya
  14. Shreya Tech
    Shreya Tech avatar
    4 posts
    Member since:
    Feb 2010

    Posted 03 Feb 2010 Link to this post

    Please do ignore my previous post. Telerik version: Q2 2009

    I am checking whether it is the saved state of a static dock and not recreate it at Page_Init, but i still get the error. 

    "Please, ensure that the UniqueName property of RadDock with ID='RadDockRadDock1' is unique to RadDockLayout with ID='RadDockLayout1'."


    Steps to recreate the problem is:
    1. DockZone Orientation = 'Horizontal".
    2. Create 3 docks in the above created DockZone.
    3. Undock one of the Dock from this Dockzone(drag outside of the DockZone but not docked in any of the other zones)
    4. Now click on "Add Dock button" to create the docks dynamically. Add 3 more docks dynamically this way to this DockZone. I get the above error message when i am creating 3rd dock dynamically.

    Hope to get some light on resolving this issue.

    Thanks,
    Shreya
  15. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 Feb 2010 Link to this post

    Hello Shreya,

    How do you check whether your dock is dynamically created or not? For example you can use the following approach to check whether a dock is static or not:
    • Set it's Tag property to a value that cannot be set to any of the dynamically created docks. I usually set it to "STATIC".
    • In the Page_Init check if the Dock's Tag property is different than static and recreate the dock:
      protected void Page_Init(object sender, EventArgs e)
      {
          //Recreate the docks in order to ensure their proper operation
          for (int i = 0; i < CurrentDockStates.Count; i++)
          {
              if (CurrentDockStates[i].Closed == false && CurrentDockStates[i].Tag != "STATIC")
              {
                  RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
                  //We will just add the RadDock control to the RadDockLayout.
                  // You could use any other control for that purpose, just ensure
                  // that it is inside the RadDockLayout control.
                  // The RadDockLayout control will automatically move the RadDock
                  // controls to their corresponding zone in the LoadDockLayout
                  // event (see below).
                  RadDockLayout1.Controls.Add(dock);
       
                  //We want to save the dock state every time a dock is moved.
                  CreateSaveStateTrigger(dock);
                  //Load the selected widget
                  LoadWidget(dock);
              }
          }
      }

    Please let me know if this helps.

    Regards,
    Pero
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  16. Shreya Tech
    Shreya Tech avatar
    4 posts
    Member since:
    Feb 2010

    Posted 11 Feb 2010 Link to this post

    Thank you for the response Pero.
    I have resolved the issue by setting enableviewstate to false.

    I am not sure if i need to start the different thread for this question:
    Is there a way to get the list of docks that have been undocked on load in Javascript? like raddocklayout.get_docks()..I need the list to alter the Zindex values for specific browser types.

    Appreciate your help,
    Shreya
  17. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Feb 2010 Link to this post

    Hello Shreya,

    You can handle the OnClientInitialize client-side event of every dock and store the dock object in a global array if it is floating. To check whether the dock is floating or not, you should use the dock.get_dockZoneID() which returns an empty string if the dock is floating. The following example implements this approach:

    .aspx
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
     
        <script type="text/javascript">
            var arrayDocks = [];
            function OnClientInitialize(dock, args)
            {
                if (dock.get_dockZoneID() == "")
                {
                    arrayDocks[arrayDocks.length] = dock;
                }
            }
            function GetDocks()
            {
                for (var i in arrayDocks)
                {
                    alert(arrayDocks[i].get_id());
                }
            }
        </script>
     
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <input type="button" value="Get Floating Docks" onclick="GetDocks(); return false;" />
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock_000000"
                        OnClientInitialize="OnClientInitialize">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock_1111111111111"
                        OnClientInitialize="OnClientInitialize">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock_2222222222"
                        OnClientInitialize="OnClientInitialize">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDock ID="RadDock4" Top="200" Left="600" runat="server" Width="300px"
                    Title="RadDock_3333333333" OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock5" Top="50" Left="400" runat="server" Width="300px" Title="RadDock_444444444"
                    OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        CONTENT
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    Regards,
    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.
  18. Shreya Tech
    Shreya Tech avatar
    4 posts
    Member since:
    Feb 2010

    Posted 17 Feb 2010 Link to this post

    Thanks Pero, I did workout on the similar lines.
    I was wondering that there could be a way to get the dock properties through radDockLayout control, instead of adding the event for every dock.

    Thanks & Regards,
    Shreya
  19. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 22 Feb 2010 Link to this post

    Hello Shreya,

    I am sorry, but such functionality is not supported out of the box and you need to use custom implementation to get all docks on the client-side.


    Regards,
    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.
  20. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 20 Jun 2011 Link to this post

    I'm using the code of DynamicDockLoadContentFromDB.zip sample application with some changes. I've checkboxes which lets user to choose the widget to show on page. When the checkbox is clicked I load the selected widget and when the checkbox is unchecked the selected widget is closed. Each widget is a RadDock which contains a UserControl.

    The issue I'm facing is when the checkbox is unchecked to close the widget, the widget gets closed but the closed property of the RadDock is not updated and the widget (RadDock) comes back on page refresh. If I use the default close buttons of the RadDocks, the docks are closed and the value of closed property is also updated and saves properly.

    I'm using the same code which is used in dock command event handler but I'm not sure what else I need to do to make sure that the value of the closed property is also updated before getting saved to the database.

     
    protected void chkWidget1_CheckedChanged(object sender, EventArgs e)
    {
                     if (chkWidget1.Checked)
                    {
                      //Code to load to selected widget
                             //(same code as in Add Dock button of sample application )
                       ..............................................
                                                      ...............................................
                                                      ...............................................  
                      //Saving the widget to access later
                       Session["Widget1"] = dock;>           
                     }  
                
                   if (!chkWidget1.Checked)
                  {
                     RadDock dock = (RadDock)Session["Widget1"];
                     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);", dock.ClientID, UpdatePanel1.ClientID),
                   true);
                     
                    dock.Closed = true;
                     
                    }
    }
  21. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 23 Jun 2011 Link to this post

    Hi Shumaila,

    You may experience this problem if the RadDock object is not updated during the AJAX call that is responsible for the closing function.

    Could you try to close the dock using the its set_closed(true) client-side method in the _removeDock function, .e.g:
    ScriptManager.RegisterStartupScript(
        UpdatePanel1,
        this.GetType(),
        "RemoveDock",
        string.Format(@"function _removeDock() {{
            Sys.Application.remove_load(_removeDock);
            var dock = $find('{0}');
            dock.undock();
            dock.set_closed(true);
            $get('{1}').appendChild($get('{0}'));
            dock.doPostBack('DockPositionChanged');
        }};

    I hope this helps.

    Greetings,
    Dobromir
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  22. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 24 Jun 2011 Link to this post


    Thanks Dobromir, it works. The correct value of Closed is storing back to database now.

    The other issue I'm facing now is that hiding/showing RadDocks with Checkboxes stops working when they are checked & unchecked multiple times until I refresh the page.

    Below is the code of one of the checkboxes' checked changed event.
    protected void chkWidget1_CheckedChanged(object sender, EventArgs e)
           {
     
               if (chkWidget1.Checked)
               {
                   //Load Widget1
                    
                   RadDock dock = (RadDock)Session["Widget1"];
     
                   if (dock == null)
                      dock = CreateRadDock();
                        
                                     
                   UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);
                   ScriptManager.RegisterStartupScript(
                               dock,
                               this.GetType(),
                               "AddDock",
                               string.Format(@"function _addDock() {{
                               Sys.Application.remove_load(_addDock);
                               $find('{1}').dock($find('{0}'));
                               $find('{0}').doPostBack('DockPositionChanged');
                               }};
                               Sys.Application.add_load(_addDock);", dock.ClientID, RadDockZone3.ClientID),
                               true);
                    
                   CreateSaveStateTrigger(dock);
                   dock.Tag = "~/folder/Widget1.ascx";
                   dock.Title = "Widget1";
                    
                    
                   LoadWidget(dock);
     
                   //saving the widget to access later
                   Session["Widget1"] = dock;
                  
                   
     
               }
     
               if (!chkWidget1.Checked)
               {
                   RadDock dock = (RadDock)Session["Widget1"];
                   ScriptManager.RegisterStartupScript(
                   UpdatePanel1,
                   this.GetType(),
                   "RemoveDock",
                   string.Format(@"function _removeDock() {{
                       Sys.Application.remove_load(_removeDock);
                       var dock = $find('{0}');
                       dock.undock();
                       dock.set_closed(true);
                       $get('{1}').appendChild($get('{0}'));
                       dock.doPostBack('DockPositionChanged');
                   }};
                   Sys.Application.add_load(_removeDock);", dock.ClientID, UpdatePanel1.ClientID),
                   true);
                   
                   
     
               }
     
           }
  23. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 29 Jun 2011 Link to this post

    Hi Shumaila,

    First of all I want to bring your attention to the fact that it is not a good idea to store ASP.NET controls in the Session, because they heavily depend on the ASP.NET page lifecycle, and you may find that they are not working correctly on the next trip to the server. What you should do is, save the state of the dock and recreate it each time in the Page.Init.
    Regarding your problem with the CheckBoxes, you should again use a client-side script registered from the server that will open/close the dock. You should modify your code to open the dock when the check box is checked:
    ScriptManager.RegisterStartupScript(
        UpdatePanel1,
        this.GetType(),
        "RemoveDock",
        string.Format(@"function _removeDock() {{
            Sys.Application.remove_load(_removeDock);
            var dock = $find('{0}');
            dock.undock();
            dock.set_closed(false);
            $get('{1}').appendChild($get('{0}'));
            dock.doPostBack('DockPositionChanged');
        }};


    Kind regards,
    Pero
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  24. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 14 Jul 2011 Link to this post

    Thanks Pero. I've modified my code and now I'm not allowing the users to close the docks with Checkbox. So I don't have to store the Docks in Session anymore to access them later when Checkbox is unchecked to close the dock. What I'm trying to do now is to let the user to close the docks from close button of docks only and when some dock is closed the related checkbox should get enabled and unchecked so that user can load the dock again by checking it. I'm trying to update the Checkbox's properties within the same JS function registered in code behind to close the dock using the hidden UpdatePanel. Here is my updated script code-

    if (e.Command.Name == "Close")
                {
                    RadDock dock = (RadDock)sender;
                    if (dock.Tag == "~/PD/Widget1.ascx")
                    {
                        ScriptManager.RegisterStartupScript(
                   UpdatePanel1,
                   this.GetType(),
                   "RemoveDock",
                   string.Format(@"function _removeDock() {{
        Sys.Application.remove_load(_removeDock);
        $find('{0}').undock();
        $get('{1}').appendChild($get('{0}'));
        $find('{2}').attr('checked', false);
        $find('{2}').attr('disabled', false);
        $find('{0}').doPostBack('DockPositionChanged');
         
     
    }};
    Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID, chkWidget1.ClientID),
                   true);
                    }
    // same code follows for the rest of the docks & related checkboxes.


    I suppose everything should work fine if I manage to update the checkbox within the same AJAX request. But I can't seem to update the checkboxes using the above updated script call. I would be really grateful if someone could point out what am I doing wrong here.

  25. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 15 Jul 2011 Link to this post

    Hello Shumaila,

    I noticed that in your code sample you used jQuery's .attr method, which is not supported by the $find method. $find provides a shortcut to the Sys.Application.findComponent() method, which returns the specified Component object. To be able to use .attr, you can refer the jQuery object with the $telerik.$ alias.

    Please try modifying your script according to the example below:
    $telerik.$('#{2}').attr('checked', false);
    $telerik.$('#{2}').attr('disabled', false);

    You may check this help article about using jQuery with the RadControls, which I think you will find helpful.

    If you are still unable to resolve your issue, please send us sample, runnable project that isolates your case or at least specify whether you use ASP CheckBox or RadButton configured as checkbox. That way we can inspect the problem and provide more to the point solution.

    Best wishes,
    Slav
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  26. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 17 Jul 2011 Link to this post

    Thanks Slav . It works with $telerik.$ alias. But after Checkbox status is changed from JS the CheckChanged event does not fire up again. I guess the changes are not communicated to the server. I'm using ASP.Net Checkbox. Does it make a difference in my case if I configure RadButton as Checkbox ?
  27. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 Jul 2011 Link to this post

    Hello Shumaila,

    Thank you for the clarification, I needed to know which ASP control you used for checkbox in order to provide more accurate solution to your problem.

      The described behavior is considered general knowledge and is not caused by the RadControls, it is simply the way the asp control works, which takes it out of the scope of our support. Nevertheless I can suggest a solution to your issue. With the jQuery method .attr you change the attributes of the checkbox, but this does not cause the CheckedChanged server-side event of the Checkbox control to be fired. To successfully trigger the event, please use the JavaScript click() method, when changing the state of the checkbox.

    I attached a sample page, demonstrating this implementation, that you can use as a basis for your further development.

    Kind regards,
    Slav
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  28. Shumaila Imran
    Shumaila Imran avatar
    19 posts
    Member since:
    Dec 2009

    Posted 26 Jul 2011 Link to this post

    Thank you Slav!
  29. HL
    HL avatar
    55 posts
    Member since:
    Dec 2009

    Posted 15 Nov 2011 Link to this post

    Hi all:
       I posted my question on other place but I didn't get reply yet. wonder if any one can help out for my question? I need to fix my issue asap since I have a deadline soon.
    I want to make sure if  I understand the dock process correctly. example:
    when I first create docks then save it to database . as I understand , the process will be:

    1) inside the page_int, create dock from state . the state should be retrieve from database
    2)  RadDockLayout1_LoadDockLayout fired. -- purpose: load dock based on the state
    3) then RadDockLayout1_saveDockLayout fired -- it will save to database -- I am assuming I don't need to save database if nothing change after loading state from the database

    then now if I drag and drop docks, the processs should be
    1) inside the page_int, create dock from state . the state should be the previous state ( before dock  drag and drop)
    2)  RadDockLayout1_LoadDockLayout fired. -- purpose: load dock based on new state ( dock changed postion)
    3) then RadDockLayout1_saveDockLayout fired -- it will save to database for the new state

    is it correct?

    my confusion is that step 1. how state can change and which event make the state change?

    Thanks
    Helena


  30. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 16 Nov 2011 Link to this post

    Hi Helena,

    I have already answered your question in your original forum thread, so you can refer to it for more information on the matter.

    Please use a separate support ticket or forum thread for reporting problems with the RadControls in the future. Note that following the same issue on several places will most probably result in confusion and it will be much easier to understand each other and to solve the problems faster, if you use the practice that I mentioned above. I would suggest continuing our discussion in your original thread.

    Regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017