ContextMenu for Tiles

[Stein]

Is it somehow possible to use the ContextMenu on databound tiles?

I wish to achieve a dynamic contextmenu that has view, edit, delete (and other) items depending on the tile/item+user.

[Princy]

Hi Stein,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:

<telerik:RadTileList runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1"
    OnClientTileSelecting="showContxtMenu" SelectionMode="Multiple" AppendDataBoundItems="true"
    Width="1005px" TileRows="4">
    <DataBindings>
        <CommonTileBinding TileType="RadImageAndTextTile" Shape="Square" DataGroupNameField="ContactTitle" />
        <ImageAndTextTileBinding DataTextField="ContactName" />
    </DataBindings>
    <Groups>
        <telerik:TileGroup Name="Sales Manager">
            <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Shape="Square"
                CssClass="noHover">
                <ContentTemplate>
                    <div class="groupHeadingTitle">
                        <div class="innerTitle">
                            Sales<br />
                            Managers</div>
                    </div>
                </ContentTemplate>
            </telerik:RadContentTemplateTile>
        </telerik:TileGroup>
    </Groups>
</telerik:RadTileList>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="View">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Edit">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>

JavaScript:

function showContxtMenu(sender, args) {
    var x = parseInt(args._tile._element.offsetLeft) + 50;
    var y = parseInt(args._tile._element.offsetTop) + 70;
    $find("<%=RadContextMenu1.ClientID%>").showAt(x, y);
    if (args._tile._text == "Palle Ibsen") {
        $find("RadContextMenu1").findItemByText("Edit").hide();
        $find("RadContextMenu1").findItemByText("View").show();
    }
    else {
        $find("RadContextMenu1").findItemByText("Edit").show();
        $find("RadContextMenu1").findItemByText("View").hide();
    }
}

Thanks,
Princy.

[Stein]

Thanks. It's working for the OnClientTileSelecting-event, but I'm selecting the tiles already.
When I'm changing it to the OnClientTileClicking-event the contextmenu appears correctly, but disappears instantly (and the javascript is giving an error "Cannot read property 'findItemByText' of null", guess since the menu is no longer shown).

I've added
args.set_cancel(true);
, which seems to be the problem mentioned in http://www.telerik.com/forums/open-radwindow-from-radtilelist
I've also made sure of using the ClickING-event and not the ClickED-event.
Just tested opening a radwindow on the Clicking-event and that works as expected...


If I get the context-menu to work, how do I get to handle the contextmenu-clickevents correctly. I need to know which tile's contextmenu that was clicked?

[Princy]

Hi Stein,

Unfortunately I couldn't replicate the issue at my end. Please provide your code for further help. As for your next requirement 'args._tile' of the showContxtMenu menu will return the tile, which context menu has shown.  Please elaborate your requirement if it doesn't help. 

Thanks,
Princy.