This is a migrated thread and some comments may be shown as answers.

Custom binding fails to unbind

1 Answer 286 Views

MVVM

This is a migrated thread and some comments may be shown as answers.

Maciej asked on 04 Jun 2018, 03:37 PM

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>

1 Answer, 1 is accepted

answered on 06 Jun 2018, 10:56 AM

Hi Maciej,

The default value binder also has a destroy function, which detaches the input event listener that synchronizes the bound value (reference).

So, one possible fix is to add such a function and remove the event listeners from the element:
http://dojo.telerik.com/@tsveti/OyAlOniS

A possibly better approach is to follow the example from this article:
Edit Records Using External Forms

and create a view model, which holds a reference to the currently selected data item and is is bound to the edit form only once, not on each selection. In this way, your code will not produce multiple bindings, which may be harder to debug and more memory consuming:
http://dojo.telerik.com/@tsveti/ODayALEJ

Regards,
Tsvetina
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.