This is a migrated thread and some comments may be shown as answers.

Need suggestion on which controls to use

5 Answers 42 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Shrikant Kale asked on 11 Dec 2009, 10:28 AM

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

5 Answers, 1 is accepted

answered on 14 Dec 2009, 09:53 AM

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

answered on 15 Dec 2009, 08:31 AM

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

answered on 18 Dec 2009, 10:05 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Need suggestion on which controls to use

5 Answers, 1 is accepted