Need suggestion on which controls to use

6 posts, 0 answers
  1. Shrikant Kale
    Shrikant Kale avatar
    20 posts
    Member since:
    Oct 2009

    Posted 11 Dec 2009 Link to this post

    Hi Team,

        I am having a problem to solve and need your suggestions on which controls are best suited to solve such problem.

    Here is description of my problem.

    I have a page which need to show multiple sections. They are displayed one below other.

    Ex.
    ------
    Section1
    ------
    Section2
    ------
    Section3
    ------

    I need to provide up/ down buttons in each section. These buttons will  re-order the sections(up/down). The order of the section  should be then stored to the server (database) using AJAX request.

    On page load depending upon the order specified for each section, that section should get loaded.

    Each section has Edit mode, and these changes need to be posted to server using AJAX request. Multiple sections can be opened in Edit mode at a given instance, and saving one section should not clear the other edit section's data. Also, re-ordering should not clear the edit section's data.

    So in short I need ajaxified sections which can be reordered in ajaxified way.


    Regards
    Shrikant
  2. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 11 Dec 2009 Link to this post

    Have a look at RadDock.  You can implement client-side "buttons" for re-ordering, and place RadEditors inside the content area of the dock for editing.

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

    Shaun.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shrikant Kale
    Shrikant Kale avatar
    20 posts
    Member since:
    Oct 2009

    Posted 14 Dec 2009 Link to this post

    Hi Shaun,

    Thanks a lot for your suggestion. The control looks good and I have decided to go with it. But I am facing one problem with reordering the docks using ReadDockZone.Dock(...)  method.

    Using this method I am able to move the dock up in order but I can not bring it down. It looks like a strange problem. I am attaching a sample code which demonstrates this problem. Can you please take a look at it, and let me know if there is any problem with the code.

    With following code I can move the "section2" up in order but I can not bring it down.

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript" language="javascript"
     
    var RadDock2Id = "<%=RadDock2.ClientID %>"
     
    function Move(dockId, direction) 
        var dock = $find(dockId); 
        var dock_zone = dock.get_parent(); 
        var current_index = dock.get_index(); 
     
        alert('current index ='+current_index); 
         
        var new_index; 
        if(direction == "up") 
        { 
            new_index = current_index-1; 
        } 
        else 
        { 
            new_index = current_index+1; 
        } 
         
        alert('new index ='+new_index); 
         
        dock_zone.dock(dock,new_index); 
         
        alert('updated index ='+dock.get_index()); 
     
        return false; 
    </script> 
    </telerik:RadCodeBlock> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <div> 
         
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
             
            <telerik:raddocklayout runat="server" enableviewstate="true" id="RadDockLayout1" 
                 storelayoutinviewstate="false"
                <telerik:raddockzone runat="server" id="RadDockZone2" orientation="vertical" style="width:100%;min-height:100px;float:left;margin-right:20px;"
                    <telerik:raddock runat="server" id="RadDock1" title="Section1" DefaultCommands="ExpandCollapse"
                        <contenttemplate> 
                        Section1 
                        </contenttemplate> 
                    </telerik:raddock> 
                    <telerik:raddock runat="server" id="RadDock2" title="Section2" DefaultCommands="ExpandCollapse"
                        <contenttemplate> 
                        Section2 
                        </contenttemplate> 
                    </telerik:raddock> 
                    <telerik:raddock runat="server" id="RadDock3" title="Section3" DefaultCommands="ExpandCollapse"
                        <contenttemplate> 
                        Section3 
                        </contenttemplate> 
                    </telerik:raddock>                     
                </telerik:raddockzone> 
            </telerik:raddocklayout> 
             
            <asp:Button id="upButton" runat="server" Text="Up" OnClientClick="return Move(RadDock2Id,'up');"/> 
            <asp:Button id="downButton" runat="server" Text="Down" OnClientClick="return Move(RadDock2Id,'down');"/> 
        </div> 
        </form> 
     


    Regards
    Shrikant
  5. Shrikant Kale
    Shrikant Kale avatar
    20 posts
    Member since:
    Oct 2009

    Posted 15 Dec 2009 Link to this post

    I did some more work on this. I removed all the conditional statements and wrote a simple function like this

    function Test() 
        var dock = $find(RadDock2Id); 
        var dockdock_zone = dock.get_parent(); 
         
        alert('docking at 0 index'); 
        dock_zone.dock(dock,0); 
        alert('updated index ='+dock.get_index()); 
     
        alert('docking at 1 index'); 
        dock_zone.dock(dock,1); 
        alert('updated index ='+dock.get_index()); 
     
        alert('docking at 2 index'); 
        dock_zone.dock(dock,2); 
        alert('updated index ='+dock.get_index()); 
             
        alert('docking at 3 index'); 
        dock_zone.dock(dock,3); 
        alert('updated index ='+dock.get_index()); 
         
        return false; 

    With this function I get output as
    -----------------------
    docking at 0 index
    updated index = 0
    docking at 1 index
    updated index = 0
    docking at 2 index
    updated index = 1
    docking at 3 index
    updated index = 2
    -----------------------
    Also docks appear at the index returned by get_index() method.

    I am confused...
    Does dock(...) method accepts index with 0 offset or with 1 offset.
    If it accepts index with 1 offset, then why get_index() returns index with 0 offset?

    Regards
    Shrikant
  6. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 Dec 2009 Link to this post

    Hello Shrikant,

    The zone.dock(dock, index) client-side method accepts indices [indexes]  with 0 offset (i.e. if you want to place the dock at the first position you need to supply index=0). The problem in your project is that you are not the using the dock() client-side method in the right way. This method was designed to be used in scenarios when a given RadDock control is not docked in a given zone and we want to dock this RadDock in the zone at a certain index. Basically you are trying to dock the Dock control in a zone where it is already docked, which is not a valid scenario. To achieve the desired behavior you need to first undock (call dock.undock() method) the desired dock and after that invoke the zone.dock(dock, index) method. Here is the modified source code of the project:

    <%@ 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>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     
            <script type="text/javascript" language="javascript">
     
                var RadDock2Id = "<%=RadDock2.ClientID %>";
     
                function Move(dockId, direction)
                {
                    var dock = $find(dockId);
                    var dock_zone = dock.get_dockZone();
                    var current_index = dock.get_index();
     
                    alert('current index =' + current_index);
     
                    var new_index;
                    if (direction == "up")
                    {
                        new_index = current_index - 1;
                    }
                    else
                    {
                        new_index = current_index + 1;
                    }
     
                    alert('new index =' + 1);
                     
                    //undock the dock from the zone
                    dock.undock();
                     
                    //and then dock it at the desired index
                    dock_zone.dock(dock, new_index);
                     
                    alert('updated index =' + dock.get_index());
     
                    return false;
                }
            </script>
     
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadDockLayout runat="server" EnableViewState="true" ID="RadDockLayout1"
                StoreLayoutInViewState="false">
                <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="vertical" Style="width: 100%;
                    min-height: 100px; float: left; margin-right: 20px;">
                    <telerik:RadDock runat="server" ID="RadDock1" Title="Section1" DefaultCommands="ExpandCollapse">
                        <ContentTemplate>
                            Section1
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock runat="server" ID="RadDock2" Title="Section2" DefaultCommands="ExpandCollapse">
                        <ContentTemplate>
                            Section2
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock runat="server" ID="RadDock3" Title="Section3" DefaultCommands="ExpandCollapse">
                        <ContentTemplate>
                            Section3
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
            <asp:Button ID="upButton" runat="server" Text="Up" OnClientClick="return Move(RadDock2Id,'up');" />
            <asp:Button ID="downButton" runat="server" Text="Down" OnClientClick="return Move(RadDock2Id,'down');" />
        </div>
        </form>
    </body>
    </html>
     

    Best wishes,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Shrikant Kale
    Shrikant Kale avatar
    20 posts
    Member since:
    Oct 2009

    Posted 18 Dec 2009 Link to this post

    Hi Pero,

    Thanks a lot for reply.
    It is working now.

    Regards
    Shrikant



Back to Top
UI for ASP.NET Ajax is Ready for VS 2017