Custom binding fails to unbind

2 posts, 0 answers
  1. Maciej
    Maciej avatar
    7 posts
    Member since:
    May 2017

    Posted 04 Jun 2018 Link to this post

    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>
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 06 Jun 2018 Link to this post

    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.
Back to Top