Binding to event function in model root from child

4 posts, 0 answers
  1. Wayne Hiller
    Wayne Hiller avatar
    37 posts
    Member since:
    Sep 2005

    Posted 15 May 2015 Link to this post

    I have a model something like this derived from ObservableObject.

    Please ignore the syntax as I am just quickly typing this in.

     

    viewModel {

         data: {

            filter: {

                Rows: [{Field: "Hello"}]

             }

         },

         fieldChanged: function() {

         }

    }

     

    I bind to the Row array items manually like this, I cannot bind to the template directly because I cannot have the template re-render the items when a change is done to the model.

     

                var $tbody = $("table tbody", $fd);
                var tmp = kendo.template($("#filtering-row-template").html());


                for (var i = 0; i < this.data.filter.Rows.length; i++) {
                    var row = this.data.filter.Rows[i];
                    var $r = $(kendo.render(tmp, [row]));
                    $tbody.append($r);
                    kendo.bind($r, row);
                }

     <script type="text/x-kendo-template" id="filtering-row-template">
        <tr id="#= uid #">
            <td>
                <input class="field" data-role="dropdownlist" data-text-field="Name" data-value-field="ID"
                       data-bind="source: fields, value: Field, events: {change: fieldChanged}" />
            </td>

        </tr>

    </script>

    Everything works when I do this  except it does not find the fieldChanged function in the root object at runtime.I thought it was supposed to walk up the object chain looking for a match. In the Browsers debugger I can do row.parent().parent().parent().parent() and find the fieldChanged function.

     

     

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 19 May 2015 Link to this post

    Hello Wayne,

    You are binding the rows manually directly to the row object, not to the ViewModel instance.
    kendo.bind($r, row);

    In this case the MVVM will not search the ViewModel to resolve the binding. It will be limited to only the row object.

    The recommended solution is to use a template. I cannot suggest other build-in solution for this scenario.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Wayne Hiller
    Wayne Hiller avatar
    37 posts
    Member since:
    Sep 2005

    Posted 19 May 2015 in reply to Alexander Valchev Link to this post

    That is what I was expecting. In my case i am passing the row object to bind so that is the "root" object as far as binding is concerned. The only time it walks up the object graph is when binding via a template and even in that case the object passed to the outer bind is the root. Makes perfect sense. The only reason I was doing this was to try and find a way around an MVVM binding bug https://github.com/telerik/kendo-ui-core/issues/786 
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 May 2015 Link to this post

    Hi Wayne,

    The bug was fixed two days ago. The fix will be included in the next internal build which should be uploaded at the end of this week or in the beginning of the next week.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready