MVVM Binding Issue: new Items added to an ObservableArray fire the change event, but fail to re-render the HTML.

[Justin]

Hi Kendo Gurus,

I am have a really tough time with a binding issue and I am not sure if it is MVVM related or Template related. I will try and provide as much information as possible.

The binding is done via nested templates like this:


obsOccupants is an ObservableArray that is a child property to an ObservableObject, that is bound to a form and includes the below. The "s20-employees-list" template looks like this:



I do NOT believe that anything above is an issue as this binds and works just fine on initial load, ala (I'm hiding information so there are blanks):



Further, clicking the delete icon on the right (red trash can) "soft" deletes the row via the click event handler in the bindings (pictured above), resulting in this:



Clicking the undelete icon on the right (green trash can) also behaves as expected. This is done by updating the isDeleted property on an ObservableObject in the ObservableArray. Additionally, there are other, more complicated bindings that are working just fine in the same form, although no adds - this is the first.

So far so good and I thought I was on fire. But now, when I click the Add Occupant button, search for an employee (via a separate UI not pictured) and select an employee and add it to the Observable array, things go south.

The code to add to the Observable array looks like this, and I have tried all three permutations below (First Try, Second Try, etc.). The third one seems really stupid and I was hoping that would not be the answer. :D  



All of these fire a bound change event as expected, and you can see that the count of obsOccupants has increased to 2 and the added employee is included in the event, ala: 



So the new employee exists in the obsOccupants array, the count is correct but the HTML does not update, although as mentioned above, a change on any of the objects IN the Observable Array correctly updates the HTML..

I have tried simplifying the HTML as well as the bindings but still to no avail. Is there anything I should be looking for or trying?

Thankyou for any help.

Cheers,

Justin

[Justin]

And of course, not minutes after posting this, I made some progress. Doh.

I was able to force a refresh by triggering a change on the obsOccupants property (field). Now it looks like my templates are incorrectly bound as I am rendering the header for each row. 

You can ignore this and I will try to find a way to delete or cancel it.

[Justin]

I'm dumb and this is fixed, sorry to waste anyone's time.