MVVM - Switching between form read mode and edit mode

[Jacques]

We have forms that are rendered in 'read mode' which means the text for a field like First Name or Last Name is simply rendered inside a Span HTML element. When the user clicks Edit, we want the form to switch to 'edit mode' which means the Spans should be replaced with TextBoxes or whichever HTML element is most appropriate. 

Can Kendo help in the automation of this? Or is there another best practice approach? 

Regards,
Jacques

[Atanas Korchev]

Hello,

The visible and invisible bindings can help you achieve something similar. Here is some sample code:

  <input data-bind="visible: inEditMode, value: value">
  <span data-bind="invisible: inEditMode, text: value"></span>
  <button data-bind="click: toggleEditMode">toggle edit mode</button>
  <script>
  kendo.bind(document.body, {
    value: "foo",
    inEditMode: false,
    toggleEditMode: function() {
       this.set("inEditMode", !this.inEditMode);
     }
  });
  </script>

Regards,
Atanas Korchev
Telerik

[Jacques]

Thanks Atanas, I imagined it was something like that. I thought perhaps there was a slightly more automated or pattern oriented approach. 

Regards,
Jacques