[Solved] BUG + FIX for Selectable and client side Editing with Ajax

[Rob Schoenaker]

We found that editing on client side and selectable grids do not match.

 

 

 

This is the view code:

 

                Html.Telerik().Grid((IEnumerable<...>)null)
                 .Editable(p =>
                 {
                     p.Enabled(true);
                     p.Mode(GridEditMode.PopUp);
                 })
                 .DataKeys(dataKeys => dataKeys.Add(o => o.ID))
                 .DataBinding(databinding => databinding.Ajax()
                     .Select("...", Model)
                     .Update("...", Model)
                     )

                 .Name("Grid")
                 .Pageable(paging => paging
                   .PageSize(20)
                   .Style(GridPagerStyles.NextPreviousAndNumeric)
                   .Position(GridPagerPosition.Bottom)
                   )
               .Selectable()
               .Sortable()

               .Columns(columns =>
               {
                   columns.Bound(o => o.ID;
                   columns.Bound(o => o.LABEL)
                       .Width(80)
                       .Sortable(true);

...

                   columns.Command(commands =>
                   {
                       commands.Edit();
                   }).Width(180).Title("Commands");

               })

 

 

Now, when selecting a row and clicking the EDIT button in it, nothing happens. This is due to the fact that the event is killed from the queue.
A fix for this lies in telerik.grid.js:

$t.grid = function (element, options) {

...

        if (this.selectable)
            this.$tbody.delegate('tr:not(.t-grouping-row)', 'click', $t.nostop(this.rowClick, this)) // notstop is a new function
                       .delegate('tr:not(.t-grouping-row)', 'dblclick', $t.stop(this.rowDblClick, this))
                       .delegate('tr:not(.t-grouping-row)', 'hover', $t.stop(function () {
                           $(this).toggleClass('t-state-hover');
                       }));
...



// in telerik.common.js:
...

stop: function (handler, context) {
            return function (e) {
                e.stopPropagation();
                handler.apply(context || this, arguments);
            };
        },

        nostop: function (handler, context) {
            return function (e) {
                //e.stopPropagation(); // NO! Will kill grid editing
                handler.apply(context || this, arguments);
            };
        },

        stopAll: function (handler, context) {
            return function (e) {
                e.preventDefault();
                e.stopPropagation();
                handler.apply(context || this, arguments);
            }
        },
...

I am not sure about the total impact of this change, so please confirm this fix, or (if possible) provide a better solution. Thanks in advance!

[Atanas Korchev]

Hi Rob Schoenaker,

We are aware of this bug introduced in the Q2 beta. We have fixed it and the hotfix will be part of the official release due at the end of this month.

Regards,
Atanas Korchev
the Telerik team

[Rob Schoenaker]

Atanas,

Wow you guys are fast! I have tried to find the bug report, but could not find it. Do you have a link maybe? I hate spoiling forums with bad reports, so I would like to prevent that as much as possible.

Again, thanks for the fast response. Looking forward to the hotfix.

[Atanas Korchev]

Hello Rob Schoenaker,

There is no public report as far as I know - we discovered the bug internally shortly after releasing the beta.

Kind regards,
Atanas Korchev
the Telerik team