TileClicked: provide browsers click event

[jasper]

Hi,

From my TileClicked method in javascript I would like to check whether the Ctrl/Shift key is hold during the click so I can implement different behavior in that cases. 

In Chrome I can use window.event to check this, but in Firefox the event is not accessible this way. I need the original click event of the dom element for that. Could this be provided through the TileClicked event as a parameter?

[Marin Bratanov]

Hello Jasper,

At the moment the browser (DOM) event is not passed as an argument and if you would like to see that changed, I can suggest you post your idea in the Feedback portal: http://feedback.telerik.com/project/108. This will let its popularity among our community influence our management.

I also prepared for you an example that shows two approaches you can use to get that functionality in the meantime:

<telerik:RadTileList runat="server" ID="RadTileList1" OnClientTileClicking="OnClientTileClicking">
    <Groups>
        <telerik:TileGroup>
            <telerik:RadTextTile Text="text tile"></telerik:RadTextTile>
            <telerik:RadContentTemplateTile CssClass="customContainer">
                <ContentTemplate>
                    <div class="clickCaptureContainer" style="background: yellow;" onclick="myfunc(event);">This is approach 1: using a custom DOM element to capture the desired click event</div>
                    <style type="text/css">
                        .customContainer .rtileContent, .customContainer .rtileContent .clickCaptureContainer
                        {
                        width: 100%;
                        height: 100%;
                        }
                    </style>
                </ContentTemplate>
            </telerik:RadContentTemplateTile>
        </telerik:TileGroup>
    </Groups>
</telerik:RadTileList>
<script>
    function OnClientTileClicking(sender, args) {
        alert("OnClientTileClicking " + args.__domEvent.ctrlKey);
    }
    function myfunc(evt) {
        alert("custom DOM event " + evt.ctrlKey);
        //cancel the event if you like
        evt.preventDefault();
        evt.stopPropagation();
        evt.cancelBubble = true;
        evt.returnValue = false;
        return false;
    }

    //this is the second approach: override the built-in functions to pass the handler.
    //NOTE: these may change in a future version and such an override may or may not cause problems if this happens
    Telerik.Web.UI.RadBaseTile.prototype._mouseClickHandler = function(e) {
        var that = this;
        if (!that.get_enabled())
            return false;
        var eventArgs = new Telerik.Web.UI.TileCancelEventArgs(that.get_navigateUrl());
        eventArgs.__domEvent = e;
        that.raiseEvent("clicking", eventArgs);

        if (eventArgs.get_cancel() !== true)
            that._onClick(eventArgs);

        return true;
    }

    Telerik.Web.UI.RadTileList.prototype._onTileClicking = function(tile, args) {
        var eventArgs = new Telerik.Web.UI.TileListCancelEventArgs(tile, args.get_value());
        eventArgs.__domEvent = args.__domEvent;
        eventArgs.set_cancel(args.get_cancel());
        this.raiseEvent("tileClicking", eventArgs);
        args.set_cancel(eventArgs.get_cancel());
        args.set_value(eventArgs.get_value());
    }
</script>

Regards,

Marin Bratanov
Telerik by Progress