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

Drag/Drop RadTile group

4 Answers 64 Views
TileList
This is a migrated thread and some comments may be shown as answers.
zAxis
Top achievements
Rank 1
zAxis asked on 23 Oct 2013, 10:17 PM
How do I determine (client-side) if a tile is being moved to a different group?

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 24 Oct 2013, 04:28 AM
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.
0
zAxis
Top achievements
Rank 1
answered on 24 Oct 2013, 02:01 PM
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.
0
Accepted
Stanimir
Telerik team
answered on 25 Oct 2013, 01:15 PM
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.
0
zAxis
Top achievements
Rank 1
answered on 25 Oct 2013, 01:38 PM
Thanks Stanimir, that does the job.
Tags
TileList
Asked by
zAxis
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
zAxis
Top achievements
Rank 1
Stanimir
Telerik team
Share this question
or