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

MVVM - Switching between form read mode and edit mode

2 Answers 12 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 2
Jacques asked on 20 Jan 2014, 09:26 AM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 22 Jan 2014, 11:27 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacques
Top achievements
Rank 2
answered on 27 Jan 2014, 06:58 AM
Thanks Atanas, I imagined it was something like that. I thought perhaps there was a slightly more automated or pattern oriented approach. 

Regards,
Jacques
Tags
General Discussions
Asked by
Jacques
Top achievements
Rank 2
Answers by
Atanas Korchev
Telerik team
Jacques
Top achievements
Rank 2
Share this question
or