Double-click and Right-click event

[Christopher Ronak]

Is there a way to catch a double-click and right-click event on the asp.net mvc grid?

Thanks!

Chris

[Atanas Korchev]

Hello Christopher Ronak,

There is no out of the box support currently. However it is very easy to implement those using jQuery:

<%= Html.Telerik().Grid(Model)
     .Name("Grid")
     .ClientEvents(events => events.OnLoad("onLoad"))
%>

<script type="text/javascript">
function onLoad() {
    $('tr', this).live('dblclick', function(e) {
        var $tr = $(this);
        alert('double click ' + $tr.text());
    })
   .live('contextmenu', function(e) {
       // prevent the browser context menu from showing
       e.preventDefault();
       var $tr = $(this);
       alert('context menu ' + $tr.text());
   });
}
</script>

Regards,
Atanas Korchev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Rob Schoenaker]

I implemented double click support natively on the grid. Is there a place I can send my changes for consideration?

[Atanas Korchev]

Hi Rob Schoenaker,

Right now there isn't but you can post your code in this forum thread.

Regards,
Atanas Korchev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Rob Schoenaker]

Changes to individual files below.

telerik.gris.js

        if (this.selectable)
            $('tr:not(.t-grouping-row)', this.$tbody[0]).live('click', $t.delegate(this, this.rowClick))
                .live('dblclick', $t.delegate(this, this.rowDblClick)) // ROBS 2010-04-08
                .live("mouseenter", $t.hover)
                .live("mouseleave", $t.leave);

        $t.bind(this, {
            error: this.onError,
            dataBinding: this.onDataBinding,
            dataBound: this.onDataBound,
            rowSelected: this.onRowSelected,
            rowDoubleClicked: this.onRowDoubleClicked,  // ROBS 2010-04-08
            rowDataBound: this.onRowDataBound,
            load: this.onLoad
        });

    $t.grid.prototype = {

        rowClick: function(e, element) {
            $(element).addClass('t-state-selected')
                      .siblings().removeClass('t-state-selected');
            if (this.onRowSelected)
                $t.trigger(this.element, 'rowSelected', { row: element });
        },

        // ROBS 2010-04-08
        rowDblClick: function (e, element) {
            $(element).addClass('t-state-selected')
                      .siblings().removeClass('t-state-selected');
            if (this.onRowDoubleClicked)
                $t.trigger(this.element, 'rowDoubleClicked', { row: element });
        },

Grid.cs

...
            objectWriter.Append("onRowSelected", ClientEvents.OnRowSelected);
            objectWriter.Append("onRowDoubleClicked", ClientEvents.OnRowDoubleClicked); // ROBS 2010-04-08
            objectWriter.Append("onDataBound", ClientEvents.OnDataBound);
...

GridClientEvents.cs

        // ROBS 2010-04-08
        public Action OnRowDoubleClicked
        {
            get;
            set;
        }

GridClientEventsBuilder.cs

        // ROBS 2010-04-08 start
        /// <summary>
        ///  Defines the name of the JavaScript function that will handle the the OnRowDoubleClicked client-side event.
        /// </summary>
        /// <param name="onLoadHandlerName">The name of the JavaScript function that will handle the event.</param>
        /// <example>
        /// <code lang="CS">
        ///  &lt;%= Html.Telerik().Grid(Model)
        ///             .Name("Grid")
        ///             .ClientEvents(events => events.OnRowDoubleClicked("onRowDoubleClicked"))
        /// %&gt;
        /// </code>
        /// </example>
        public GridClientEventsBuilder OnRowDoubleClicked(string onRowDoubleClickedHandlerName)
        {
            Guard.IsNotNullOrEmpty(onRowDoubleClickedHandlerName, "onRowDoubleClickedHandlerName");

            events.OnRowDoubleClicked = HandlerAction(onRowDoubleClickedHandlerName);

            return this;
        }

        /// <summary>
        /// Defines the inline handler of the OnRowDoubleClicked client-side event.
        /// </summary>
        /// <param name="onLoadAction">The action defining the inline handler.</param>
        /// <example>
        /// <code lang="CS">
        ///  &lt;% Html.Telerik().Grid(Model)
        ///            .Name("Grid")
        ///            .ClientEvents(events => events.OnRowDoubleClicked(() =>
        ///            {
        ///                 %&gt;
        ///                 function(e) {
        ///                     //Error handling code
        ///                 }
        ///                 &lt;%
        ///            }))
        ///            .Render();
        /// %&gt;
        /// </code>
        /// </example>
        public GridClientEventsBuilder OnRowDoubleClicked(Action onRowDoubleClickedAction)
        {
            Guard.IsNotNull(onRowDoubleClickedAction, "onRowDoubleClickedAction");

            events.OnRowDoubleClicked = onRowDoubleClickedAction;

            return this;
        }

That should be it. I can provide a zip file with the changes.

[Atanas Korchev]

Hello Rob Schoenaker,

Thank you! This would suffice. I hope we can squeeze that in the next release.

I have updated your telerik points as a token of gratitude.

Regards,
Atanas Korchev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Adam Haid]

Has this been implemented in any code releases yet?

[Julián]

Hi,

This works fine :)

Is there a way of put the row in edit mode on double click event? Using this code?

Thanks!

[Greg]

I don't think this solution works with the latest version of the MVC control suite (2010.3.1110). I can't seem to find the JavaScript files reference or even similar lines of code any where in the Telerik JS.

Is there no native client side event handling for the grid? If there isn't this is probably going to be a deal breaker for us. :(

[Rosen]

Hi Greg,

You may refer to this forum thread for more details on how to implement edit on row double-click.

All the best,
Rosen
the Telerik team

[Greg]

Not really looking to edit the cell or row but fire an event. I think that source might get me where I need to go.