I have a selectable grid (only one row can be selected). When an item is selected, it is bound to a form for editing. Textbox in the form has a custom binding 'valueInput'. If I select a several different items from a grid and then try to edit current selection in the form, all previosuly selected items are modified. If I change binding to built-in 'value' then it works fine (only last selected item gets modified). How to fix it ?
How get the incorrect behavior:
1. Select an element from grid.
2. Select another element from grid.
3. Modify textbox value.
4. All previously selected items will change.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>Untitled</
title
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.default.min.css"
>
<
link
rel
=
"stylesheet"
href
=
"https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"
>
<
script
src
=
"https://code.jquery.com/jquery-1.12.3.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.2.516/js/angular.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.2.516/js/jszip.min.js"
></
script
>
<
script
src
=
"https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"
></
script
></
head
>
<
body
>
<
div
class
=
'form'
>
<
input
data-bind
=
"valueInput: text"
/>
</
div
>
<
div
class
=
'grid'
></
div
>
<
script
>
kendo.data.binders.valueInput = kendo.data.Binder.extend({
init: function (element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
let that = this;
$(that.element).on("input", function () {
that.change();
});
},
refresh: function () {
let that = this;
let value = that.bindings["valueInput"].get();
$(that.element).val(value);
},
change: function () {
var value = this.element.value;
this.bindings["valueInput"].set(value);
}
});
function change(e)
{
let item = e.sender.dataItem(e.sender.select());
kendo.bind($(".form"), item);
}
let data = [{text: "a"},{text: "b"},{text: "c"},{text: "d"}];
$(".grid").kendoGrid({dataSource: data, selectable: true, change: change});
</
script
>
</
body
>
</
html
>