Drag/Drop RadTile group

5 posts, 1 answers
  1. zAxis
    zAxis avatar
    13 posts
    Member since:
    Aug 2010

    Posted 23 Oct 2013 Link to this post

    How do I determine (client-side) if a tile is being moved to a different group?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Oct 2013 Link to this post

    Hi zAxis,

    In order to identify the dragged RadTile in client side you can write the code in OnClientTileDropped event. Please have a look into the sample code I tried.

    ASPX:
    <telerik:RadTileList ID="RadTileList1" runat="server" EnableDragAndDrop="true" OnClientTileDropped="OnClientTileDropped1">
        <Groups>
            <telerik:TileGroup>
                <telerik:RadTextTile ID="RadTextTile1" runat="server" Text="Tile1">
                </telerik:RadTextTile>
                <telerik:RadTextTile ID="RadTextTile2" Text="Tile2" runat="server">
                </telerik:RadTextTile>
            </telerik:TileGroup>
        </Groups>
        <Groups>
            <telerik:TileGroup>
                <telerik:RadTextTile ID="RadTextTile3" runat="server" Text="Tile3">
                </telerik:RadTextTile>
                <telerik:RadTextTile ID="RadTextTile4" runat="server" Text="Tile4">
                </telerik:RadTextTile>
            </telerik:TileGroup>
        </Groups>
    </telerik:RadTileList>

    JavaScript:
    <script type="text/javascript">
        function OnClientTileDropped1(sender, args) {
            alert(args.get_tile().get_text() + " is dropped");
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. zAxis
    zAxis avatar
    13 posts
    Member since:
    Aug 2010

    Posted 24 Oct 2013 Link to this post

    Please read my question again, your answer is not relevant.
    I already know the tile, what I need to know is if it's moving to a different group.
  5. Answer
    Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 25 Oct 2013 Link to this post

    Hello Wayne,
    Currently there is a bug with groups reinitialization when the tiles are dragged / dropped. It will be fixed in the Q3.SP1 release. In mean time review the following code and check if it will fit your needs:
    function OnClientTileDropped1(sender, args) {
        var gIndex, tIndex, group, tile,
            $ = $telerik.$,
            droppedTile = args.get_tile(),
            groups = sender.get_groups();
     
        //clear current groups collection
        for (i = groups._array.length; i > 0 ; i--) {
            groups._array.pop();
        }
     
        //initialize the groups collection
        $(".rtlistGroup", sender.get_element()).each(function (index, groupElement) {
            group = new Telerik.Web.UI.TileList.TileGroup();
            groups.add(group);
            $(".RadTile", groupElement).each(function (tileIndex, tileElement) {
                tile = tileElement.control;
                group.addTile(tile);
                if (tile === droppedTile) {
                    //here you get the indexes
                    gIndex = index;
                    tIndex = tileIndex;
                }
            });
        });
        sender._updateTileGroupsJson();
    }

    In the Q3.SP1 version I will also provide an easier way of figuring out in which group the tile is dropped. Maybe adding it to the event arguments.

    Regards,
    Stanimir
    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. zAxis
    zAxis avatar
    13 posts
    Member since:
    Aug 2010

    Posted 25 Oct 2013 Link to this post

    Thanks Stanimir, that does the job.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017