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>
<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>