Using Window with MVVM

[Stacey]

I am attempting to use the Kendo Window system with an MVVM model, where the window pops up to edit data, and then returns it to the opening page, but I am having a difficult time finding any examples of this... Even the documentation seems very unhelpful. Are there any samples of such a thing?

[Alexander Valchev]

Hi Stacey,

It is unclear what data you would like to edit and what an "opening page" is. If you are displaying the data in a Grid widget you may use the build-in popup editing. For reference please see this demo.
In case you would like to use an external editor, my suggestion is to check this code library project which demosntrates how to edit dataSource's data via MVVM.

We will also appreciate if you can give us a concrete feedback regarding the documentation - what exactly is missing/unclear and could be improved. Thank you in advance.

Regards,
Alexander Valchev
Telerik

[Stacey]

What I am trying to do has nothing to do with a grid.

I am attempting to find an example of having a view model, with some data. That data is somehow written to the page - this is something I can already do. 

But I want to be able to click on certain data elements and open up a Kendo Window with a customized form, to edit the data, and once I am done editing, it
returns it back to the view model on the main page.

[Stacey]

So is this just impossible?

I simply have a ViewModel, and it is drawing to the page, like this ...

{
 Name: "Root",
 Collection: [
  {
     Name: "Item1",
     onEdit: function(e){
        // open window and edit Item1
     }
  },
  {
    Name: "Item2",
    onEdit: function(e){
        // open window and edit Item2
    }
  }
]
}

I am not using a grid. I just want to pass the e data to a Kendo Window, so that it can be edited, and keep it bound. I cannot figure out how to get it there though and work with the data binding.

[Alexander Valchev]

Hi Stacey,

Basically the approach is the same as the one demonstrated in the code library project.

I just want to pass the e data to a Kendo Window, so that it can be edited, and keep it bound. I cannot
figure out how to get it there though and work with the data binding.

The binding process is:

• create ViewModel field called 'selected' and bind the editor form to it;
• initially the selected object should have empty value (empty object);
• when the user marks given record for editing, you should get a reference to that object and set it as a value of the 'selected' field;
• once the ViewModel has changed, the editor form will automatically update

For your convenience I updated and attached the previous sample. The approach could be used with both DataSource and Observable array as source.

Regards,
Alexander Valchev
Telerik