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

RadTileList and Browser Context Menu

1 Answer 57 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Nina
Top achievements
Rank 1
Nina asked on 10 Sep 2015, 01:06 PM

Hello,

 is it possible to have a RadTileList with input controls (see sample below) and open the browsers' standard context menu on right click? We cannot figure out how to make it work. 

<telerik:RadTileList runat="server" ID="RadTileList1" TileRows="4" CssClass="myTileList" SelectionMode="None" EnableDragAndDrop="True" Width="100%">
        <Groups>
            <telerik:TileGroup>
                <telerik:RadContentTemplateTile ID="RadContentTemplateTile1" runat="server" Shape="Wide" Width="250px" Name="RadContentTemplateTile1">
                    <ContentTemplate>
                        <div>
                            <table style="width:100%;">
                                <tr>
                                    <td>
                                        <asp:Label ID="​lblExample" ​Text="Example" runat="server"></asp:Label>
                                    </td>
                                    <td style="text-align: right;">
                                        <telerik:RadTextBox ID="​txtExample" runat="server" Width="470px" Resize="None"></telerik:RadTextBox>                                                                              </telerik:RadComboBox>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </ContentTemplate>
                </telerik:RadContentTemplateTile>

            </telerik:TileGroup>
        </Groups>
    </telerik:RadTileList>​

And the javascript:

        function canceljQueryEventBubbling(evt) {
            //prevent the event from bubbling, i.e., reaching the Tile element where it will initiate dragging
            switch (evt.which) {
            case 1:
                evt.stopPropagation();
                break;
                case 3:
                    alert('bla');
            default:
                break;
            }
        }
        function disableTileDragOnChildElems() {
            //a selector for all input elements in the tile. Useful, for example, for buttons
            $telerik.$(".RadContentTemplateTile input").mousedown(canceljQueryEventBubbling);

            //Sys.Application.remove_load(disableTileDragOnChildElems);
        }
        Sys.Application.add_load(disableTileDragOnChildElems);

 

Any help will be appreciated!

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 11 Sep 2015, 07:59 AM

Hi Nina,

Tiles prevent the browser context menu by design, there is a handler specifically for this purpose. One of the reasons is because right clicks are reserved for tile selections.

Nevertheless, you can override the handler to remove the code that cancels the event. Note that with time this override can cause issues (e.g., if we change the function or add other functionality, or rewrite the existing one). For the snippet below to have effect, place it after your tiles declaration. Usually just before the closing </form> tag is ok.

<script>
    Telerik.Web.UI.RadBaseTile.prototype._contextMenuHandler = function(e) {
        //$telerik.cancelRawEvent(e);
        if (!$telerik.isAndroid)
            this.toggleSelection();
        return false;
    }
</script>

Regards,

Marin Bratanov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TileList
Asked by
Nina
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or