edit on double click

[mohammed]

1) Can I use double click event on a cell to edit?

2) Is it possible to use MVC grid like excel spread sheet for update? I mean update single column multiple rows and navigate with keyboard arrows? IN THIS CASE I WILL ISSUE MASS DB UPDATE VIA BUTTON AT BOTTOM OF GRID (passing xml to stored proc).

[Atanas Korchev]

Hello mohammed,

1) can be easily implemented using the following JavaScript:
<%= Html.Telerik().Grid(Model)
                  .Name("Grid")
                  .ClientEvents(events => events.OnLoad("onLoad"))
%>
 <script type="text/javascript">
    function onLoad() {
        $('tr:has(td)', this).live('dblclick', function(e) {
            var grid = $('#Grid').data('tGrid');
            grid.editRow($(this));
        });
    }
 </script>
2) Is not currently supported. If this becomes a common request we will log it for implementation.

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.

[Emmanuel]

2) I would also love to see this implemented

[Andrew]

Weird - thats just what I'm trying to implement. Consider this another request.

Meanwhile, is there a way to

a) tell if a row is being edited
b) do a javascript Save ? along the lines of grid.updateRow($tr)

[Makoto]

Thanks Atanas,

I'd like to do this with a single click,but when I change dblclick to click, then all the elements inside of the row fire the event (textboxes, checkboxes, drop downs, etc).

1.) How can I attach this event to a row that's not in edit mode?
2.) If I can't do that, is there a way to determine if a row is in edit mode?

[Rosen]

Hello Makoto,

In order to fire the event only for item which are not in edit mode you may modify the previous script similar to the following:

function onLoad() {
    $('tr:has(td)', this).live('click', function (e) {
        if($(e.target).closest("td.t-edit-container").length == 0)
        {
            var grid = $('#Products').data('tGrid');
            grid.editRow($(this));
        }
    });
}

Greetings,
Rosen
the Telerik team

[Makoto]

Thanks,

There was one slight problem with that script.  If you have a grid with a details view, and then you click on the row first, expand the details view, then click within the details view, it would mess up the grid.

I modified it a bit to handle that scenario like so:

function gridOnLoad(e) {
    var grid = $(this).data('tGrid');
    $('tr:has(td)', this).live('click', function (e) {
        if ($(e.target).closest("td.t-edit-container").length == 0 && $(e.target).closest("tr.t-detail-row").length == 0) {
            grid.editRow($(this));
        }
    });
}

[Makoto]

One more addition, also need to be able to properly handle empty grids:

function gridOnLoad(e) {
    var grid = $(this).data('tGrid');
    $('tr:has(td)', this).live('click', function (e) {
        if ($(e.target).closest("td.t-edit-container").length == 0 && $(e.target).closest("tr.t-detail-row").length == 0 && $(e.target).closest("tr.t-no-data").length == 0) {
            grid.editRow($(this));
        }
    });
}