This question is locked. New answers and comments are not allowed.
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!