New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Drag to Reorder

  • Microsoft
  • Amazon
  • CNN
  • Telerik
microsoft
amazon
cnn
telerik

With the new drag-to-reorder functionality the user could reorder the tabs by dragging. The drag-to-reorder behavior is very similar to the one when dragging tabs in the modern browsers. In order to enable the new functionality the EnableDragToReorder property should be set to true, by default it's disabled.

This functionality is available both for horizontal and vertical layout of the RadTabStrip. The tabs of the RadTabStrip could be even scrolled during a drag-to-reorder operation, when scrolling is enabled.

Important aspect is the fact that tabs could be reordered only in the current child level collection to which they belong, thus one could not drag a tab and place it as a child of a sibling tab. When the tabs are reordered their correspoding pageviews will be still associated with them.

With the new feature, three client-side and one serve-side event are introduced.

Drag tabs to change their position in the tabs collection. While dragging a ghost item representing the dragged tab and two drop indicators defining the position where the tab will be inserted upon drop will be shown.

  • DefaultCS.aspx
  • styles.css
<%@ Page  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadTabStrip RenderMode="Lightweight" ID="TabStrip1" runat="server"  EnableDragToReorder="true" Skin="Silk" MultiPageID="RadMultiPag1" SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Microsoft"></telerik:RadTab>
                <telerik:RadTab Text="Amazon"></telerik:RadTab>
                <telerik:RadTab Text="CNN"></telerik:RadTab>
                <telerik:RadTab Text="Telerik"></telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPag1" runat="server"  CssClass="RadMultiPage" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView1" runat="server" Height="1300" Style="overflow: hidden">
                <img alt="microsoft" src="images/Microsoft.png" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" Height="1300" Style="overflow: hidden">
                <img alt="amazon" src="images/Amazon.png" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" Height="1300" Style="overflow: hidden">
                <img alt="cnn" src="images/CNN.png" />
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView4" runat="server" Height="1300" Style="overflow: hidden">
                <img alt="telerik" src="images/Telerik.png" />
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance