Drag/Drop RadTile group

[zAxis]

How do I determine (client-side) if a tile is being moved to a different group?

[Shinu]

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.

[zAxis]

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.

[Stanimir]

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

[zAxis]

Thanks Stanimir, that does the job.