TileClicked: provide browsers click event

2 posts, 0 answers
  1. jasper
    jasper avatar
    6 posts
    Member since:
    Oct 2012

    Posted 14 Jul Link to this post

    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?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 14 Jul Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top