Finding drag direction when TabStrip Reordered

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    2 posts
    Member since:
    Feb 2014

    Posted 12 Feb 2014 Link to this post

    Hi, 

    I as thinking of using the Reordered server event to catch the reordering of tabs and to save the change to a database. I know e.Offset is the difference between the source index and the destination index, however it is always positive, so if I drag a tab by 1 to the left or to the right, the offset is still always positive 1.

    Is there any way to detect the drag direction?

    The code I was planning to use is something like this:

    void tabsDescriptions_Reordered(object sender, RadTabStripReorderedEventArgs e)
    {
        int descriptionId = (int.Parse(e.Tab.Value));
        int destinationIndex = (e.Tab.Index + e.Offset);
        int destinationId = int.Parse(tabsDescriptions.Tabs[destinationIndex].Value);
        if (e.Offset > 0) //moving after destination
        {
            ProductDescriptionsController.MoveProductDescriptionAfter(descriptionId, destinationId, int.Parse(txtProductId.Text), System.Threading.Thread.CurrentThread.CurrentUICulture.Name);
        }
        else //moving before destination
        {
            ProductDescriptionsController.MoveProductDescriptionBefore(descriptionId, destinationId, int.Parse(txtProductId.Text), System.Threading.Thread.CurrentThread.CurrentUICulture.Name);
        }
    }
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Feb 2014 Link to this post

    Hello,

    An easy and convenient way of determining whether the user is dragged the selected tab to the left or right would be to use the RadTabStrip OnClientReordering. This way you can store the tab index before the dragging. So in the Reordered server-event you can determine the drag direction
    //markup code
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnReordered="RadTabStrip1_Reordered" EnableDragToReorder="true" OnClientReordering="clientReordering">
        <Tabs>
            .....
        </Tabs>
    </telerik:RadTabStrip>
    <asp:HiddenField  ID="hiddenField" runat="server"/>
    <asp:Label ID="Label1" runat="server"></asp:Label>
    //JavaScript
    function clientReordering(sender, args) {
                        document.getElementById("hiddenField").value = args.get_tab().get_index();
                    }
    //code behind
    protected void RadTabStrip1_Reordered(object sender, RadTabStripReorderedEventArgs e)
            {
                if (int.Parse(hiddenField.Value) > e.Tab.Index)
                {
                    Label1.Text = "Negative";
                }
                else
                {
                    Label1.Text = "Positive";
                }
            }



    Regards,
    Boyan Dimitrov
    Telerik
    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 UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    2 posts
    Member since:
    Feb 2014

    Posted 27 Feb 2014 in reply to Boyan Dimitrov Link to this post

    Thanks, I found another way by reading the whole thing back after a move and then do my reordering according to what changed, but your solution probably has a better performance. I will try to implement that for the next version of what I am doing...
Back to Top